您的位置：首页 > Web前端 > CSS

CSS Image Map —— CSS图片地图

2015-07-14 20:58 856 查看

记得在刚刚学习CSS的时候，博主曾经也顺带着学习过CSS Image Map技术，就是通过<dd><dt>那几个标签来实现。当时博主作为一个前端小白都感觉出这个方法的繁琐，相信大家在需要做图片地图功能的时候也不喜欢这样做。

今天我就总结一下前一段时间在实习中学习到的一个完成CSS图片地图的思路。

What is 图片地图 ?

可能还有一些朋友不知道图片地图是什么，我就简短的解释一下：

图片地图，为什么叫这个名字呢，大概是发明这个技术的大牛发明的目的就是为了在一张地图图片上，点击地图上不同的区域就可以跳转到相关与该区域的不同页面。

看起来好像有些繁琐……其实简单来说，就是一种：用户点击图片的不同区域，就可以获得不同反馈（比如说跳转到不同的页面、触发不同的事件）的技术。

希望你们能看的明白……

怎么实现？

这一次我们用css中的position:relative和position:absolute这兄弟俩来实现！

假设<div id=”map”></div>是我们要存放图片地图的容器。

图片地图，顾名思义就是要有个图片，接下来我们给div#map（我指的就是上一行的div标签！）加上背景图片，这里我们用葛大爷来做背景图片。

&l
4000
t;div id="map"></div>

#map{
position:absolute;
top:100px;
left:100px;
width:400px;
height:400px;
background:url('example.jpg');
background-size:100%;
}

然后我们在div#map里添加几个<a></a>标签。

<div id="map">
<a id="L_eye" href=""></a>
<a id="R_eye" href=""></a>
<a id="mouth" href=""></a>
<a id="L_ear" href=""></a>
<a id="R_ear" href=""></a>
</div>

a{
display:block;
width:30px;
height:30px;
}

这里我把<a>标签设置为block元素，因为<a>标签本身是inline元素，而inline元素是不能设置长宽的。

接下来，就是CSS图片地图的核心了，就是将<a>标签自定义的放置到div#map元素的不同区域。

我们通过给<a>标签设置position:absolute来实现。

#L_eye{
top:125px;
left:195px;
}

#R_eye{
top:125px;
left:250px;
}

#mouth{
top:185px;
left:220px;
}

#L_ear{
top:140px;
left:145px;
}

#R_ear{
top:150px;
left:280px;
}

PS：这里提一下，可能之前在将<a>标签设置成block元素时，有些同学会担心block的特性会影响position:absolute的布局效果，比如说当我们将两个元素通过position:absolute设置在一行时，会不会因为他们是block元素的原因而让他们不能出现在一行呢？

答案是不会的，三句两句的也说不清楚，这个等以后我单独作为一个主题来写吧，大家也可以看下这篇文章：
css position: absolute、relative详解

反正只要记住position:absolute可以让block同行显示就可以了！

现在我们的图片地图就已经完成了，大家把鼠标移到葛大爷的眼睛、耳朵和嘴巴上时就可以看到鼠标变成小手了~

PS：在补充一点：position:absolute在W3C的官方定义中是

<blockquote>生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</blockquote>

我们要知道，position属性的值有五个：absolute, fixed, relative, static, inherit，其中static就是position的默认值，而inherit是继承父元素的position值。所以官方定义的意思就是：position:absolute的元素将根据父级元素中第一个position值不为static的元素来进行绝对定位。

好吧，还是有点绕……

还可以理解为：position:absolute的元素将根据父级元素中第一个position值为relative或absolute或fixed的元素进行绝对定位。

所以，如果我们不想div#map元素绝对定位，而是想让他按正常方式来显示的话，那么就要把div#map的position值改为：

position:relative;
width:400px;
height:400px;
background:url('example.jpg');
background-size:100%;

因为position:relative是根据元素在正常文档流中的位置进行便宜，所以position:relative;top:0;left:0;跟static是等效的！

下面是完整源码：

cssImageMap.rar

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div id="map">
<a id="L_eye" href=""></a>
<a id="R_eye" href=""></a>
<a id="mouth" href=""></a>
<a id="L_ear" href=""></a>
<a id="R_ear" href=""></a>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

#map{
position:relative;
width:400px;
height:400px;
background:url('example.jpg');
background-size:100%;
}

a{
display:block;
width:30px;
height:30px;
position:absolute;
}

#L_eye{
top:125px;
left:195px;
}

#R_eye{
top:125px;
left:250px;
}

#mouth{
top:185px;
left:220px;
}

#L_ear{
top:140px;
left:145px;
}

#R_ear{
top:150px;
left:280px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航