需要更改onMouseOver的背景位置

时间:2012-12-19 16:41:55

标签: javascript html inline

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

button1.png是一个180像素高的精灵,由两个效果组成。由于我无法控制的不自然的力量,我必须使这项工作内联。我知道这不是最好的做法,我觉得自己很糟糕,但现在我只需要它就可以了。拜托,谢谢!

3 个答案:

答案 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中。