html - CSS Sprite 和图像映射

Question

我正在尝试将 CSS Sprited CSS 类嵌入到图像映射中。最初，我创建了一个加载 8 张图片的 HTML 图像映射:

带有 7 个按钮的正方形图像 = 未将鼠标悬停在其上时全部为灰色。 7 个正方形图像，每个图像都有一个带有颜色的按钮，用于悬停。

这会导致图像加载问题，因为只有有人将鼠标悬停在上面时图像才会加载，从而导致用户在悬停在图像上时出现短暂的延迟。

我检查了 CSS Sprites，发现这是实现所有所需按钮快速加载的最有效方法。

所以...我已经创建了我的 CSS Sprite，但是图像映射似乎只允许我调用图像文件，而不是为 sprite 创建的类。我将如何合并这两种技术，让我可以将鼠标悬停在每个按钮上并根据 CSS Sprite 定位激活它们各自的颜色。

抱歉，如果这听起来太冗长或太困惑。很长一段时间以来，我一直在努力解决这个问题。

我是否应该放弃在具有定位功能的图像映射中使用 1 张图像的想法，转而使用 CSS Sprited 加载 7 张图像？

Answer 1

因此，您正在尝试获取 CSS Sprite - 具有可调整背景位置的背景图像 - 使用 html <map> <area>元素？棘手但可能。

DEMO on jsbin

这已在 Firefox、Chrome、Opera 和 Safari(2013 年 8 月)以及 Internet Explorer 7、8、9 和 10 中进行了测试。

---

你基本上只需要一个 <img>带有不可见但有效 src 不会导致浏览器显示其“损坏的图像”图标的属性。

我的首选方式是，一个 1px x 1px 透明 gif，base64 编码，因此不需要实际的 .gif 文件:

src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIC‌​RAEAOw=="

在 "What's the valid way to include an image with no src?" 中还有一些其他建议的方法但我尝试过的所有其他人都至少有一个问题。这工作得很好。

然后就是普通的东西了:

• 固定高度和宽度，最好通过 css
• 设置了背景位置的背景图像，就像在普通 Sprite 图像中一样。
• 一个usemap制作图像映射时属性就像正常一样(如 usemap="#someArea" 和 # 如果你想要旧的 IE 支持 - 正常)。
• 正常<map> id对应于img的元素的 usemap , 包含 <area>元素

---

如果您的目标是在同一个 Sprite 表上拥有多个具有来自不同位置的相关区域的图像，您可能会遇到这个问题:Overlapping images w/ image maps obstructing each other .那里建议的简单解决方案适用于图像映射:分配你的 <map>到一个完全透明的图像，如上，但没有背景图像，将其放在所有其他图像之上，然后将图像作为常规图像 Sprite 放在下面。