图片热点调用CSS样式

html-css024

图片热点调用CSS样式,第1张

1、首先打开dw,点击设计;

2、然后用鼠标点击你想要加热点的图片,点击选中以后,用鼠标点击左下角划热点的一种矩形工具;

3、选择工具以后就可以在要加热点的图片上划热点了;

4、划上热点以后在左下角添加上链接。

在html中显示如下:

<body>

   <img src="images/loginfoot.jpg" border="0" usemap="#Map1" name="foot" width="100" height="100"/>  

    <map name="Map1">    

      <area shape="rect" coords="50,50,100,100" style="cursor:hand" href="login.jsp" /> 

      <area shape="rect" coords="0,0,50,50" style="cursor:hand" href="main.jsp"/>   

  </map>

  </body>

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