1. 程式人生 > 其它 >javascript當中Map Area Shape 和onmousemove的用法

javascript當中Map Area Shape 和onmousemove的用法

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; 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">
<!--
.my {
font-size: 13px;
color: #000000;
background-color: #99CC99;
padding: 3px;
}
-->
</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.矩形:必須使用四個數字,前兩個數字為左上角座標,後兩個數字為右下角座標


更多內容請見原文,文章轉載自:https://blog.csdn.net/qq_43650923/article/details/102591587