用CSS的图像映射

图像映射 -本教程将向您展示图像映射的好处，以及为什么在建设网站时，你应该实现它。 我会通过怎样和为什么你，再加上显示你的形象动作映射。 此图片映射教程是针对初学者，只需要你知道HTML和CSS的基础知识。

要在行动中看到图像映射演示，请单击此处

为什么要使用影像地图？

考虑下面的图像。 请注意，它在事实上已放置在同一文件中的图像。 使用最良好的成像软件，如Photoshop，这样就可以实现。

图像映射有两个主要好处。 第一个是干净的代码，所有网页设计师应该渴望实现的东西，二是图像映射独特的能力，克服抛出按钮状态的问题。

使用翻转图像，您将需要下载以上的只有1图像时，您也将需要显示的图像状态的变化，也就是说，您的浏览器将需要呈现的第二个下载的图像，从而在过渡不会顺利它第一次显示。 使用影像地图完全停止这个问题，因为当原始图像是下载的是第二。 有没有滞后性，它的那样简单。

如何使用图像地图

让我们考虑一下，我想，要使用上面翻转图像的图标。 这将有两种状态：显示为灰色时，最初加载页面，然后有色用户​​徘徊。 要做到这一点，我们就需要使用一些简单的CSS样式，代码将要看起来像这样。

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


正如你可以看到同样的图像是被应用到双方的风格国，我们是做改变的状态修改背景位置，所以当用户悬停在链接状态的变化，但说的其实是不断变化的是在页面上的背景图片的位置。 这个真正的美是少量的实际HTML，你需要在页面上，一旦​​你这样做。 对于我们的例子，实际的HTML看起来像这样。

< a class = "bookmark" href = "#" >Delicious</ a >


这有它。 只需少量的CSS甚至更小的HTML量的，我们可以创建变换图像非常快，功能强大的方法。 要在行动中看到的演示，请单击此处。