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

html-css038

怎样用css制作图片热点（热点地图）,第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:10pxright:110px

} /* 第一个热点链接位置的*/

#right .two a{top:40pxright:110px

}/* 第二个热点链接位置的*/

#right .three a{top:70pxright: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是整个页面上部分的定义，这个是接上面的一部分，主要是讲解添加热点。在网站制作的过程中是很使用的一块，可以根据情况做些改动。

热点在背景不能实现

但是你可以在背景的层上，在放一个小图片设置按钮

也就是

<div id="pic"><a> <img src="你的按钮，热点位置的图" ></a></div> //这里就是你设置的背景，那么我在里面加一个热点位置的图

#pic img {在这里控制图片的位置}

思路就是这样的！

a.a_img {

filter:alpha(opacity=50)/* IE */

-moz-opacity:0.5/* Moz + FF */

opacity: 0.5/* 支持CSS3的浏览器（FF 1.5也支持）*/

}

a.a_img:hover {

filter:alpha(opacity=100)/* IE */

-moz-opacity:1/* Moz + FF */

opacity: 1/* 支持CSS3的浏览器（FF 1.5也支持）*/

}

这样最简单了,你把图片割成一块一块,每一块都是一个连接:)