首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么给DIV的背景图片加链接(本人后台人员,CSS不专业)

2013-09-09 
如何给DIV的背景图片加链接(本人后台人员,CSS不专业)div classbox stylebackground:url(skin/images

如何给DIV的背景图片加链接(本人后台人员,CSS不专业)
<div class="box" style="background:url(skin/images/vip.gif) right bottom no-repeat;">
    <div class="title"><h2><a href="" title="工具栏!">工具栏!!</a></h2><span class="more"><a href="" title="" >更多&gt;&gt;</a></span></div>
    <ul class="box_con">
     <li class="vip_t"><span class="gray_1">士大夫第三方士大夫第三方士大夫第三方的身份上的佛挡杀佛第三方都是是是!</span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">士大夫士大夫是的辅导书是的是!</a></span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">士大夫第三方大师傅都是飞第三方!</a></span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">士大夫士大夫第三方第三方士!</a></span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">一士大夫第三方第三方惠的服务网络!</a></span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">11享受特价产品和服零元等)!</a></span></li>
     <li><span>&bull;&nbsp;</span><span><a href="" title="">更多特权,敬请期待我们的努力!</a></span></li>
    <div class="clear" style="height:10px;"></div></ul>
</div>


如上代码,我想在background:url(skin/images/vip.gif) 加上一个链接,让这个图片可以点击。请问如何实现呢???
[解决办法]
对,就是利用地图(map标签)
貌似是DW CS3 新增的功能,很实用


今天又学了一个新标签:map。在Html中,给图像使用map标签,可以给图像的某个部分建立超连接,用法如下:

<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect
[解决办法]
circle
[解决办法]
poly" coords="#" href="url">


</map>
注:所有的坐标都是相对于图片左上角的

其中,坐标coords对各个shape的解释如下:

shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right

即,当shape是矩形时,coords表示矩形左上及右下(x2, y2)的坐标
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

即,当shape是圆形时,coords表示圆中心点坐标(x, y)及半径

shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

即,当shape是poly多边形时,coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...


注意:以上所有坐标都是相对于图形img.gif左上脚坐标而言的


以下是一个例子:

<img src="mapimg.gif" usemap="#Face">
<map name="Face">
   <area shape="rect" href="page.html" coords="140,20,280,60">
   <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
   <area shape="circle" href="new.html" coords="80,100,60">
</map>

热点排行