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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义