Javascript 滚动图像
嗨,我正在尝试一个网站,我目前正在工作的简单滚动图像。当我在firefox中测试这个效果时,鼠标悬停效果会移动网页上的其他元素。有没有关于如何解决这个问题的建议Javascript 滚动图像,javascript,html,Javascript,Html,嗨,我正在尝试一个网站,我目前正在工作的简单滚动图像。当我在firefox中测试这个效果时,鼠标悬停效果会移动网页上的其他元素。有没有关于如何解决这个问题的建议 <head> <script type="text/javascript"> if (document.images) { img1 = new Image(); img1.src = "training2.png"; } </script></head> <bod
<head>
<script type="text/javascript">
if (document.images) {
img1 = new Image();
img1.src = "training2.png";
} </script></head>
<body>
<script type="text/javascript">
function rollover(name, filename)
{
var fullpath = '' + filename;
document.images[name].src = fullpath; }
</script>
<div id="trainingbutton"><a href="#" onmouseover="rollover('button1','training2.png');" onmouseout="rollover('button1','training.png')">
<img src="training.png" name="button1" border="0" alt="training" /></a></div></body>
if(document.images){
img1=新图像();
img1.src=“training2.png”;
}
函数滚动(名称、文件名)
{
var fullpath=''+文件名;
document.images[name].src=fullpath;}
我不会对翻滚图像使用javascript,只需创建一个包含正常状态和悬停状态的精灵,然后使用css的悬停属性就可以移动背景位置
大概是这样的:
<a class="rollover">Link</a>
此方法也不必在翻滚时下载图像,因为它是作为初始请求的一部分下载的,正如前一个人回答的那样;精灵才是最好的选择。它负责预加载“悬停”图像;这是纯CSS 示例(图像链接滚动): HTML:
基本上,您可以创建一个“遮罩”,从中移动下面的背景图像以显示您希望它显示的内容。使用相同的图像分辨率?
a.rollover
{
background-image:url('/images/background.png');
background-position:top left;
}
a.rollover:hover
{
background-position:bottom left;
}
<a href="#" class="mysprite">Join Newsletter</a>
.mysprite {
display: block;
width: 100px;
height: 20px;
background: url('mysprite.png') no-repeat;
background-position: 0 0; /* technically not neccesary, but illustrates the example */
text-indent: -9999px; /* eliminates the link text so only the background image shows */
font: 0px; /* eliminates IE displaying the text despite text-indent */
}
.mysprite:hover {
background-position: 0 -20px;
}