Question

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

带7个按钮的方形图像=未悬停时全灰色。 7个方形图像，每个图像都有一个带有颜色的按钮，用于悬停。

这导致图像加载问题，因为图像不会加载，直到有人盘旋，导致悬停在用户出现的图像上短暂延迟。

我正在检查CSS Sprites并发现这将是实现所需按钮快速加载时间的最有效方法。

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

很抱歉，如果这听起来太冗长或太混乱。我一直试图将这个问题包围了很长一段时间。

我是否应该放弃图像地图中带有定位的1个图像的想法，然后加载7个图像CSS Sprited？

Answer 1

所以你试图获得CSS精灵 - 具有可调背景位置的背景图像 - 使用html <map> <area>元素？棘手但可能。

DEMO on jsbin

这在Firefox，Chrome，Opera和Safari（2013年8月）以及Internet Explorer 7,8,9和10中进行了测试。

您基本上只需要<img> 隐藏但有效 src属性不会导致浏览器显示其“已损坏的图片”图标< / strong>即可。

我首选的方法是这样，1px xpp 1透明gif，base64编码，因此不需要实际的.gif文件：

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

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

然后它就是通常的东西：

固定高度和宽度，最好通过css

背景位置设置的背景图像，与普通精灵图像一样。

一个usemap属性就像制作图像地图一样正常（如usemap="#someArea" #，如果你想要旧的IE支持 - 正常情况下）。

普通<map>元素，其ID与img的{{1}}相对应，包含usemap元素

如果您的目标是在同一个精灵表上拥有来自不同位置的关联区域的多个图像，则可能会遇到此问题：Overlapping images w/ image maps obstructing each other。这个简单的解决方案表明它适用于图像地图：如上所述将<area>分配给一个完全透明的图像，但没有背景图像，将其保持在所有其他图像之上，然后将图像作为常规图像精灵放在下面。

Answer 2

您需要使用css hover修饰符：

Somebutton {
  /* things needed to display the sprite */
  ...
  background-position: 0px -7px /* normal mode */
}

Somebutton:hover {
  /* things needed to display the sprite */
  ...
  background-position: 0px -56px /* shift the image
      49 pixels to the left to display color image. */
}

CSS Sprites和图像映射

2 个答案:

DEMO on jsbin