侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 119157 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

map offset

2023-12-01 星期五 / 0 评论 / 0 点赞 / 2 阅读 / 1915 字

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

<!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>

广告 广告

评论区