Question

怎样用css制作图片热点（热点地图）

Answer 1

float:right;
width:163px;
height:105px;
margin-right:0;
margin-top:0;
background-image:url(images/t_06.jpg)}#right a{position:absolute;
display:block;
width:108px;
height:26px;}#right a:hover{
border:1px solid #ffcc00;
}/*定义hover时的样式*/
#right .one a{top:10px;right:110px;
} /* 第一个热点链接位置的*/
#right .two a{top:40px;right:110px;
}/* 第二个热点链接位置的*/
#right .three a{top:70px;right:110px;
}/* 第二个热点链接位置的*/
在html中加入以下<body<div id="top"
<li id="right"<ul<li class= "one " <a href= "# " 第一个热点</a </li
<li class= "two " <a href= "# " 第二个热点</a </li
<li class= "three " <a href= "# "第三个热点 </a </li</ul</li</div</body
注：top是整个页面上部分的定义，这个是接上面的一部分，主要是讲解添加热点。在网站制作的过程中是很使用的一块，可以根据情况做些改动。