ONMOUSEOUTとONMOUSEOVERイメージ

Question

私は、次のイメージを持っていると私はCSSスプライトにそれを有効にする：

<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" />

私のCSSは

.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; 

}

どのような方法が最適ですか？

Answer 1

<img>タグがスプライトのために非常によく向いていない、私はこのような何かを行うことをお勧めします：

<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; 
}