用CSS图像映射

影像地图 -本教程将显示您的图像绘制的好处，为什么要实现它在建立网站。 我将通过如何及为何，以及您展示形象，操作映射你。 这个图像映射教程是针对初学者，只会要求你知道HTML和CSS的基础知识。

要查看图像映射操作演示一下这里

为什么要使用的图像地图？

考虑下面的形象。 请注意，这实际上是2已在同一个文件放置图像。 这可以通过使用诸如Photoshop中良好的成像软件。

有两个图像绘制的主要好处。 第一个是更干净的代码，这是所有网页设计师都应该追求实现的，二是图像映射独特的能力，克服按钮状态丢了问题。

当使用翻转图像，你需要下载不止一图像，您还需要显示这个图像时的状态变化，这意味着您的浏览器将需要提供第二个下载的形象，在过渡不会被顺利第一次显示。 使用图像地图完全停止这一问题，因为当原始图像下载的是第二个。 没有滞后，它就是这么简单。

如何使用影像地图

让我们来考虑，我想想使用上述图标为翻转图像。 这将有两种状态：灰色当页面最初加载，然后涂上当超过它的用户左右。 要做到这一点，我们需要使用一些简单的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数额，我们可以创建一个非常快速有效的方式来过渡图像。 要查看演示在行动按这里 。