javascript当中Map Area Shape 和onmousemove的用法

最新推荐文章于 2023-03-13 16:51:51 发布

mark_to_win

最新推荐文章于 2023-03-13 16:51:51 发布

阅读量235

点赞数

分类专栏： javascript 文章标签： javascript coords map area shape 马克java社区马克-to-win

本文链接：https://blog.csdn.net/mark_to_win/article/details/88679505

版权

javascript 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

例 4.2（MapAreaShapeMouseMoveIEFF.html）

<html>
<head>
<title> img hidefocus="true"必须加,否则ie8中点击map后，会粗线一个contour，轮廓线</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
    function showTip(event,txt)
    {
        var newDiv = document.getElementById('newDiv');
        newDiv.style.display="block";
        //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标
        newDiv.style.left=event.clientX+10; //必须加上10，如果不加10的话，老会闪烁
        newDiv.style.top=event.clientY+5;
        newDiv.style.position="absolute"; //必须指定这个属性，否则newDiv层无法跟着鼠标动
        newDiv.innerHTML="<table class='my'><tr><td>" + txt + "</td></tr></table>";;
    }
    function closeTip()
    {
        var newDiv = document.getElementById('newDiv');
        newDiv.style.display="none";
    }
</script>

<style type="text/css">
    
</style>
</head>
<body>
<div id="newDiv" style="display: none; z-index: 1;">
</div>
<img hidefocus="true"
        src="markWeChat.jpg"
        border="0" usemap="#qixyplanetmap"
        />

<map name="qixyplanetmap" id="planetmap">

    <area
            shape="circle"
            coords="200,50,50"
            href ="us.html"
            target ="_blank"
            alt="us" οnmοusemοve="showTip(event,'想加微信 <br /> 必须得扫一下<br /> 否则是<br />加不上的<br />知道了吗')"
οnmοuseοut="closeTip()" οnmοusedοwn="" />

    <area
            shape="rect"
            coords="0,0,100,100"
            href ="rect.html"
            target ="_blank"
            alt="rect" οnmοusemοve="showTip(event,'想加微信 <br /> 必须得扫一下<br /> 否则是<br />加不上的<br />知道了吗')"
οnmοuseοut="closeTip()" οnmοusedοwn="" />

</map>

< p><b>马克-to-win：注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标

mark_to_win

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript当中Map Area Shape 和onmousemove的用法

例 4.2（MapAreaShapeMouseMoveIEFF.html）<html><head><title> img hidefocus="true"必须加,否则ie8中点击map后，会粗线一个contour，轮廓线</title> <meta http-equiv="content-type" content="text/html...
复制链接

扫一扫