css图像映射

CSS图像映射

html代码

<div class="imgmap">
	<img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team">
	<ul>
		<li class="r"><a href="#" title="r">r</a></li>
		<li class="s"><a href="#" title="s">s</a></li>
		<li class="c"><a href="#" title="c">c</a></li>
		<li class="j"><a href="#" title="j">j</a></li>
		<li class="p"><a href="p" title="r">p</a></li>
	</ul>
</div>

css代码

<style type="text/css">
	.imgmap{
		width:333px;
		height:500;
		position:relative;
	}
	.imgmap ul{
		padding:0px;
		margin:0px;
		list-style:none;
	}
	/*对链接进行绝对定位*/
	.imgmap a{
		position:absolute;
		display: block;
		width:50px;
		height:60px;
		text-indent:-1000em;
	}
	/*将各个链接定位到相应的人身上*/
	.imgmap .r a{
		top:50px;
		left: 80px;
	}
	.imgmap .s a{
		top:90px;
		left: 200px;
	}
	.imgmap .c a{
		top:140px;
		left: 55px;
	}
	.imgmap .j a{
		top:140px;
		left: 145px;
	}
	.imgmap .p a{
		top:165px;
		left: 245px;
	}
	/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/
	.imgmap a:hover,.imgmap a:focus{
		border:1px solid #fff;
	}
	/*解决IE浏览器白色边框不显示的问题（给锚链接添加透明的背景 或无效的图像地址）*/
	.imgmap a{
		position:absolute;
		display: block;
		background-image: url(img/shim.gif);
		width:60px;
		height:80px;
		text-indent:-1000em;
	} 
</style>

运行结果

当鼠标未悬停在图片上时

当鼠标悬停在人像上时

flickr风格的图像映射

html代码

<div class="imgmap">
	<img src="img/nerdcore.jpg" width="333" height="500" alt="some of the clearleft team">
	<ul>
		<li class="r"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li>
		<li class="s"><a href="#" title="s"><span class="outer"><span class="inner"><span class="note">s</span></span></span></a></li>
		<li class="c"><a href="#" title="c"><span class="outer"><span class="inner"><span class="note">c</span></span></span></a></li>
		<li class="j"><a href="#" title="j"><span class="outer"><span class="inner"><span class="note">j</span></span></span></a></li>
		<li class="p"><a href="#" title="r"><span class="outer"><span class="inner"><span class="note">r</span></span></span></a></li>
	</ul>
</div>

css代码

<style type="text/css">
	.imgmap{
		width:333px;
		height:500;
		position:relative;
	}
	.imgmap ul{
		padding:0px;
		margin:0px;
		list-style:none;
	}
	/*对链接进行绝对定位*/
	.imgmap a{
		position:absolute;
		display: block;
		background-image: url(img/shim.gif);
		color:#000;
		text-decoration: none;
		border: 1px solid transparent;
	}
	.img a .outer{
		display: block;
		border:1px solid transparent;
	}
	.imgmap a .inner{
		display: block;
		width:50px;
		height:60px;
		border:1px solid transparent;
	}
	/*将各个链接定位到相应的人身上*/
	.imgmap .r a{
		top:50px;
		left: 80px;
	}
	.imgmap .s a{
		top:90px;
		left: 200px;
	}
	.imgmap .c a{
		top:140px;
		left: 55px;
	}
	.imgmap .j a{
		top:140px;
		left: 145px;
	}
	.imgmap .p a{
		top:165px;
		left: 245px;
	}
	/*为了创建翻转效果 将一个白色的实线边框应用于鼠标悬停时的链接*/
	.imgmap a:hover,.imgmap a:focus{
		border-color:#d4d82d;
	}
	.imgmap a .note{
		position:absolute;
		bottom:-30px;
		width:70px;
		padding:3px 5px;
		background-color:#ffc;
		text-align:center;
		/*使说明部分在热点下面水平居中，而不是对准左边 将说明span的左边缘定位到热点的中点 接下来使用负的外边距值将说明span向左移动说明部分宽度的一半*/
		/*left:25px;*/
		margin-left:-40px;
		/*将文本隐藏到屏幕左边之外 并且在鼠标悬停时对它重新定位*/
		left:-100000px;
	}

运行结果：

当鼠标悬停在人像上时