怎样用css制作图片热点(热点地图)

html-css028

怎样用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是整个页面上部分的定义,这个是接上面的一部分,主要是讲解添加热点。在网站制作的过程中是很使用的一块,可以根据情况做些改动。

网页的动态效果你说的这里的动态效果是让一个画面或者文字动一下吧?因为在专业里边动态是与数据库连接的后台的技术。

css是层叠样式表,是不能够实现动态效果的。但是可以让某个画面动,比如:

一个文字点击的时候,变大的css代码为:

a{font-size:12px}      /*这里文字默认大小是12像素*/

a:hover{font-size:14px}      /*这里鼠标经过大小是14像素*/

上边这个简单的代码就实现鼠标经过a的时候,文字变大,离开又恢复。

希望能帮到你