onMouseOut und onMouseOver Bild mit CSS Sprite

Question

Ich habe folgendes Bild und ich will es CSS Sprite drehen:

<img height="32" width="139" border="0" onmouseout="this.src='/images/top_menu/nav03.gif';" onmouseover="this.src='/images/top_menu/nav04.gif';" src="/images/top_menu/nav03.gif" />

Meine CSS ist

.sprite-top_menu { 
background-image: url(top_menu.png); 
background-repeat: no-repeat; 
/*display: block;*/ 

}

.sprite-nav03-top_menu { 
width: 139px; 
height: 32px; 
background-position: 0 -32px; 

}

.sprite-nav04-top_menu { 
width: 139px; 
height: 32px; 
background-position: -139px -32px; 

}

Was ist der beste Weg, es zu tun?

Answer 1

<img> Tags selbst nicht sehr gut für Sprites verleihen, empfehle ich Ihnen, wie dies etwas zu tun:

<div class="sprite-top_menu"></div> 

CSS

.sprite-top_menu { 
    background: url(top_menu.png) no-repeat; 
    width: 139px; 
    height: 32px; 
    background-position: 0 -32px; 
} 

.sprite-top_menu:hover { 
    background-position: -139px -32px; 
}