<a href="#" onMouseOver="document.getElementById('button1Inline').style.backgroundPosition='0px -90px';">
<img src="ads/button1.png" id="button1Inline" />
</a>
button1.png是一个180像素高的精灵,由两个效果组成。由于我无法控制的不自然的力量,我必须使这项工作内联。我知道这不是最好的做法,我觉得自己很糟糕,但现在我只需要它就可以了。拜托,谢谢!
答案 0 :(得分:3)
这样做的一种方法是使用这样的HTML:
<a href="#" id="button1"></a>
你可以给它像display: block;
或display: inline-block;
这样的CSS属性,它们的宽度和图像的高度的一半,然后是: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
仅适用于设置为background-image
的HTML元素。
答案 1 :(得分: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>
答案 2 :(得分:0)
你应该在img标签的src中放置一个空的1px x 1px gif。 “ads / button1.png”图片应该作为背景图片放在img CSS中。