-1 
<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='0px -90px';">
    <img src="ads/button1.png" id="button1Inline" />
</a>

button1.png は、2 つの半分のエフェクトで構成される高さ 180 ピクセルのスプライトです。私の制御を超えた不自然な力のため、これをインラインで機能させる必要があります。私はそれがベストプラクティスではないことを知っており、自分自身についてひどい思いをしていますが、今はそれが機能する必要があります. よろしくお願いします！

4

3 に答える 3

3

これを行う 1 つの方法は、次のような HTML を使用することです。

<a href="#" id="button1"></a>

そして、画像の幅と画像の半分の高さ、そしてスタイルのようdisplay: block;なCSS プロパティを与えることができます。display: inline-block;:hover

例えば：

#button1 {
    display: block;
    width: 180px; /* assuming it's square */
    height: 90px;
    background: url(<path_to_images>/button1.png) top left no-repeat transparent;
    background-position: 0 0;
}
#button1:hover {
    background-position: 0 -90px;
}

そうすれば、Javascript は必要なく、副作用もありません。

セットbackground-positionを持つHTML要素に対してのみ機能することを忘れないでください。background-image

于 2012-12-19T16:51:36.177 に答える
1

このようなことを試してください。

<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='-55px 0px';" onMouseOut="document.getElementById('button1Inline').style.backgroundPosition='0px 0px';">
    <div id="button1Inline" style="background-image:url(110crunchglovesi.png);width:55px;height:110px;background-position:0px 0px"
</a>
于 2012-12-19T16:50:53.880 に答える
0

imgタグのsrcに空の1pxx1pxgifを配置する必要があります。「ads/button1.png」画像は、背景画像としてimgCSSに配置する必要があります。

于 2012-12-19T16:52:06.643 に答える