码迷,mamicode.com
首页 > 其他好文 > 详细

map area2

时间:2014-09-18 13:25:44      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   io   os   java   ar   div   sp   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<title>无标题文档</title>


<script type="text/javascript"> 


    $(function(){

$("map area")

.hover(

function(){

var $obj=$(this).addClass(‘bor‘);

var offset=$obj.offset();

var coords= $obj.attr("coords").split(‘,‘);

$("#content").empty().append(this.alt).show().css({"top":(offset.top+parseInt(coords[3]))+"px","left":(offset.left+parseInt(coords[2]))+"px"});

},

function(){ $("#content").hide();});


    })

</script>

</head> 

<body>

 <img src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" border="0" usemap="#bdMap" id="bd" />

 <map name="bdMap" id="bdMap">  

  <area shape="rect" coords="35,22,115,97" alt="baidubaidu" href="http://www.baidu.com"   />

  <area shape="rect" coords="158,26,238,94" alt="baidubaidu222222"  />

 </map>

  <div id="border" style="display:none; position:absolute;border:2px solid #FF0000; ">

   

  </div>

  <div id="content" style="position:absolute;display: none;width: 200px;height: 20px;background-color: red;">


</div>

</body></html>


map area2

标签:style   http   color   io   os   java   ar   div   sp   

原文地址:http://my.oschina.net/glelaine/blog/315455

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!