旧学校图像地图与2覆盖状态

Question

我被要求创建一个我不需要做的图像地图，我不知道有多长时间：）

基本图片是一个圆圈，其中区域为

图标图像有2种状态（开/关）下面是一个示例。所有3张图像尺寸相同，图标相关图像相同，只是颜色不同，以产生悬停效果。

我最好的方法是如何实现这一目标？ 到目前为止我已经创建了这个

<map name="Map" id="Map">
<area shape="rect" coords="242,47,376,104" href="#" id="availiblity-manager" class="a-am"/>
<area shape="rect" coords="259,124,385,176" href="#"  id="capicaty-manager" class="a-capm"/>
<area shape="rect" coords="201,204,324,260" href="#" id="configuration-manager" class="a-confm" />

               

将on状态应用于区域类的一些基本查询，如

$('.a-am').hover(function () {
    $(this).addClass('on');
}, function () {
   $(this).removeClass('on');
});

我认为它是.css，我有点卡住，因为我不确定如何对齐每个区域形状

#Map .a-am
{
display:block;
background:url("../Content/Images/map2.png");
background-position:-256px -58px;
height:33px;
width:109px;
}

#Map .a-am.on
{
display:block;
background:url("../Content/Images/map3.png");
background-position:-256px -58px;
height:33px;
width:109px;
}

有人可以建议我应该如何在圆圈上对齐图标图像？

Answer 1

您实际上不需要使用图像映射。正如ctcherry在评论中指出的那样，最好只将项目放在页面上。

此外，使用CSS sprite，您不需要进行任何切片。只需使用您为UL背景发布的第一张图片，然后取出所有图标并将它们组合在一起以创建图标精灵集。锚点的背景应该都指向此图标集，然后调整背景位置。

我会做这样的事情：

HTML

<ul>
    <li class="house"><a href="#">nice description</a></li>
    <li class="chart"><a href="#">nice description</a></li>
    <li class="etc"><a href="#">nice description</a></li>
    <li class="etc"><a href="#">nice description</a></li>
</ul>

CSS

ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
background: url(somefilepathtobackground.png) no-repeat;
width: something;
height: something;
}

ul li a {
display: block;
text-indent: -9999px;
text-decoration: none;
}

ul li {
background-image: url(somefilepathtoiconset.png) no-repeat;
width: 20px;
height: 20px;
}

ul li.house {
position: absolute;
top: something;
left: something;
background-position: something;
}

我希望这很清楚。如果没有，请告诉我！

http://www.alistapart.com/articles/sprites