具有2个覆盖状态的旧学校图像地图

Question

我被要求创建一个图像地图，这是我不需要做的事情，我不知道有多久了:)

基础图像是一个圆圈，上面留有覆盖区域。

​

有两种状态的图标图像(开/关)下面是一个例子.All 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状态应用于area类的一些基本查询，如

$('.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精灵，您不需要做任何切片。只需使用您发布第一张图片作为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