图像翻转，无 Javascript，无链接，纯 CSS，代码验证且兼容浏览器

发布于 2024-11-09 10:58:34 字数 1728 浏览 2 评论 0原文

图像翻转，无 JavaScript，无链接，纯 CSS，代码验证和浏览器兼容。

大家好，我一直在 24 小时工作，想出了这个相当简单的解决方案。我想知道是否一切都好以及是否有改进的方法。它非常优雅，我们开始吧：

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

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

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

，然后我在另一个 div 中插入相同的图像，但具有不同的 id

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

现在我的 CSS：

.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; }

说明：当有人悬停图像时，它会变得透明并显示背景女巫是相同的图像，但具有不同的图像位置。对于 Firefox、Google，不透明度：0；对于 Explorer，过滤器：alpha(opacity=0)。 .logo-rollover 类上的位置：相对是为了与 IE6 和 IE6 兼容隐藏溢出。 IE7。显示：块；添加到 Opera 浏览器的 id img 中。

No Hack：当没有链接时，不需要 href="#" 或 "javascript:void(0)"

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

提示：在任何地方都对图像使用相同的路径。我的意思是“图像路径”对于所有调用都必须相同。因为浏览器缓存。

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

评论赞赏。

原文

Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.

Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:

I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.

Here I insert my image in a div with

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

Then I insert in another div the same image but with a different id

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

Now my CSS:

.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; }

Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.

No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"

Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.

Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.

Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.

Comment appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

開玄 2024-11-16 10:58:34

为什么不完全删除内部并使用 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; }

说明：

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

，通过使用 a:hover 从 CSS 访问它来赋予 div 悬停属性div { }

溢出：隐藏；和 text-indent:-1000px; 隐藏 div 内部的文本。出于可访问性的原因，最好将文本保留在内部。

background 设置 div 的背景颜色，初始对齐为 0，0

background-position 执行实际操作并移动图像 - 它在“视口”div 内移动图像，使图像的不同部分可见。

Why not completely removing inner <img> and create logo using CSS background?

<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; }

Explanation:

<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }

overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.

background sets the background color of your div, initialy alligned to 0, 0

background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.

回复收藏 0 原文