图像滚动、无Javascript、无链接、纯CSS、代码验证和Broswer兼容

图像滚动，无JavaScript，无链接，纯CSS，代码验证和浏览器兼容

大家好，我一直在24小时不间断地工作，以想出这个相当简单的解决方案。我想知道是否一切正常，是否有改进的方法。它相当优雅，我们来看看：

我只有一个图像“徽标”，但它将显示为2个不同的徽标，每个徽标都具有滚动效果。 我使用了一个精灵（只有一个图像包含我的4个徽标），我只是改变了它的位置

在这里，我将图像插入一个div中

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

说明：当有人悬停在图像上时，图像会变得透明，并显示背景是同一图像，但位置不同。不透明度：Firefox为0，Google为0，Explorer为filter:alpha（不透明度=0）。位置：.logo滚动类上的相对位置是为了与IE6和IE7兼容隐藏溢出。显示：块；添加到Opera浏览器的id img中

无黑客攻击：当没有链接时，不需要href=“#”或“javascript:void（0）”

优点：不是请求4个（或更多）图像，而是只有1个图像（1个图像精灵的总大小小于4个图像精灵的总大小）。滚动是即时的，因为图像已经下载。没有黑客，没有虚假链接，代码验证。为图像添加标题。唯一没有滚动的浏览器是IE6，但网站没有损坏，徽标显示正确。有一个黑客为IE6激活悬停，但我没有麻烦，因为IE6已经死了

提示：在任何地方对图像使用相同的路径。 我的意思是“通往你形象的道路”需要对所有通话都是一样的。因为浏览器缓存

这是最优雅的方式吗？这个代码可以改进吗？我希望它能帮助一些人，因为这是一个真正的痛苦发展感谢他人的用户在这里，我发现了一些技巧，在这里和那里，并提出了这个

---

感谢评论。

描述得很好！我看到了一个小小的改进：在.logo滚动类中添加背景和不重复定义，以减少css代码（您只需编写一次而不是两次）

为什么不完全删除内部

并使用css背景创建徽标

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

Logo
#logo{宽度：100px；高度：60px；背景：url（path/to/logo.png）0；
溢出：隐藏；文本缩进：-1000px；显示：块；}
#徽标：悬停{背景位置：0-60px；}

说明：

是IE6上唯一支持：悬停伪选择器的元素。如果您想为悬停徽标使用本机解决方案，则必须使用此标记。有些人有时包装其他元素，例如：

，通过使用

a:hover div{}

从CSS访问div hover属性来赋予它

溢出：隐藏；和文本缩进：-1000px从div内部隐藏文本。出于可访问性原因，最好将文本留在div内部

background设置div的背景色，初始标记为0，0

background position执行实际操作并移动图像-它在“viewport”div中移动图像，使图像的不同部分可见。
我认为您可能应该在中发布此消息，也就是说，我觉得您使用的是最佳方法。一定要添加alt文字的标志。是的，我已经把完整的代码，但不允许在这篇文章。。。我编辑了它，是的，它有alt文本。谢谢你，我编辑了代码以反映你的建议。现在这必须是一个近乎完美的代码，我终于做到了！美好的你也可以把背景网址放在那里！你在类中添加链接是正确的，而不是在id中添加两次，我编辑了这篇文章以反映你的建议。为了与Opera兼容，我还向IDIMG添加了display:block。现在，它在IE6-7-8-9、Opera、Firefox、Chrome和Safari中运行良好。@Sylvain Larose:尽管你不想使用链接，但我认为它是最适合此用途的元素。噢，我没有注意到“无链接”这一点，这是一个愚蠢的要求。所有用户都希望在单击徽标时重定向到主页。这是一个常见的可用性预期。你又一次错过了重点，我从来没有说过这是针对主网站徽标的。当然，我的主要网站标志重定向到主页。。。我在页面中为装饰性图像编写了这段代码，不想像大多数人那样使用ref“#”或javascript（void），这是无效的。此图像滚动旨在不使用链接并进行验证。差不多没什么。
.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }