问一个关于图片上面热区坐标位置的问题

javaoaout 2006-10-27 09:27:53
<html>
<head>
<title>网络拓扑--地图</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<style type='text/css' id='defaultPopStyle'>
.cPopText { background-color:red;color:red; border: 2px red solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}
</style>

<script language=javascript>
//***************内部变量定义*****************
sPop=null;
MouseX=null;
MouseY=null;

function showPopupText(o){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;

if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
showIt();
}

}
}

function showIt(){
dypopLayer.className=popStyle;
//在这里设置..可以做出各种各样的效果.
dypopLayer.innerHTML="<font color=white><b>"+sPop+"</b></font>";

popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=100)";
}
document.onmouseover=showPopupText;
</script>
...全文
484 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
把上面保存成文件，鼠标在图片上面随意移动会看到对应的效果，我现在想做到在没有鼠标在地图的各个地区移动的情况下也能够自动显示出各个地区的提示信息而且提示信息也要显示在各自的地区范围内，并且不会消失掉，不知道我这么说大家是不是明白？
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td height="40%"> </td>
</tr>
<tr>
<td height="20%" >
<div align="center"><img src="http://www.infobase.gov.cn/intro/sdmap/Images/SD.gif" width="640" height="430" usemap="#Map" border="0">
</div>
</td>
</tr>
<tr>
<td height="40%"> </td>
</tr>
</table>
<map name="Map">

<area shape="poly" id="yantai" coords="388,139,410,127,412,116,446,87,462,78,488,71,508,84,526,91,540,102,562,101,572,102,562,117,552,132,534,135,516,142,520,151,528,160,534,167,514,180,498,185,480,186,474,187,468,170,468,153,470,146,464,137,452,138,440,137,434,146,416,149,398,150,390,137" href="#" alt="烟台" title="烟台">
<area shape="poly" id="weihai" coords="574,103,582,92,588,99,594,104,622,105,626,106,620,123,612,132,610,141,618,144,614,153,602,160,598,161,590,144,582,153,574,148,560,159,550,168,538,167,526,156,516,143,542,134,554,129,564,118,574,101" href="#" title="威海">
<area shape="poly" id="qingdao" coords="392,145,388,170,400,189,424,200,416,217,404,230,396,237,404,254,400,263,390,274,394,283,408,282,420,277,420,268,426,269,432,256,442,255,448,246,440,245,434,234,434,225,440,224,448,225,452,220,454,231,450,240,470,233,478,230,478,211,480,202,486,199,494,206,496,197,496,190,480,185,470,182,468,159,466,148,462,137,440,140,422,149,404,148,390,143" href="#" title="青岛">
<area shape="poly" id="weifang" coords="285,189,293,172,307,157,319,140,323,127,343,126,357,133,373,138,389,139,391,150,387,175,395,182,403,191,423,200,411,219,397,234,401,245,399,262,389,271,381,262,361,251,349,244,349,237,337,236,331,227,313,232,307,239,297,220,287,195,285,188" href="#" title="潍坊">
<area shape="poly" id="rizhao" coords="347,244,335,251,323,264,331,275,325,296,319,299,319,306,345,307,351,306,361,313,361,322,367,331,379,332,381,315,391,304,397,289,389,274,375,257,347,244" href="#" title="日照">
<area shape="poly" id="linyi" coords="225,296,237,283,253,270,265,255,273,244,289,249,301,248,311,237,323,230,333,229,341,234,349,241,329,256,325,265,327,274,327,287,321,300,325,307,339,308,353,307,359,314,361,327,357,334,341,337,337,346,331,357,329,366,315,369,307,378,305,391,297,396,285,399,281,386,275,375,261,376,255,371,245,344,239,333,233,324,225,317,225,296" href="#" title="临沂">
<area shape="poly" id="dongyin" coords="287,48,303,47,309,54,319,47,327,38,339,49,351,64,351,75,341,96,341,107,337,124,319,141,305,154,297,151,291,150,299,127,295,120,285,111,281,100,289,87,297,78,287,61,287,46,287,47" href="#" title="东营">
<area shape="poly" id="binzhou" coords="217,82,231,87,235,72,233,55,251,44,259,33,263,36,267,43,271,54,279,55,283,46,287,57,297,78,285,89,277,98,281,113,291,116,295,127,291,144,285,151,277,138,271,121,257,122,241,129,237,138,243,141,257,152,263,159,257,174,247,179,237,168,231,155,213,148,225,139,225,128,219,111,211,96,219,81" href="#" title="滨州">
<area shape="poly" id="zibo" coords="265,215,263,240,267,249,279,244,295,247,305,242,303,233,291,212,285,191,289,172,301,163,303,154,287,151,279,146,273,137,269,118,249,125,239,134,249,145,261,154,259,165,247,178,247,195,263,214" href="#" title="淄博">
<area shape="poly" id="jinan" coords="129,230,157,203,169,188,169,175,187,158,187,141,197,134,191,115,201,106,211,99,221,108,227,131,213,144,217,149,231,156,243,173,245,188,247,195,219,202,193,213,191,222,173,217,153,222,157,233,147,240,133,241,129,228" href="#" title="济南">
<area shape="poly" id="laiwu" coords="219,200,223,225,231,236,245,245,259,246,263,231,267,216,251,199,245,194,219,199" href="#" title="莱芜">
<area shape="poly" id="taian" coords="117,247,119,236,129,233,129,240,141,243,155,234,153,225,173,220,189,223,193,216,211,207,219,204,225,229,227,238,237,241,251,248,261,249,267,252,261,261,251,274,239,275,239,282,221,271,207,268,191,267,181,276,163,275,163,268,159,259,167,256,159,255,145,264,131,263,121,256,117,245" href="#" title="泰安">
<area shape="poly" id="jining" coords="116,246,104,253,106,262,122,273,124,288,124,293,130,300,132,311,134,324,124,335,126,346,140,357,150,350,168,351,178,350,186,357,174,332,182,325,196,322,208,321,218,314,226,315,226,300,234,285,224,274,196,269,182,274,158,271,162,266,162,253,148,260,136,263,122,254,116,245" href="#" title="济宁">
<area shape="poly" id="zaozhuang" coords="188,363,202,388,204,393,218,392,224,379,232,390,248,385,254,372,248,351,238,332,224,315,208,320,190,323,176,330,186,363" href="#" title="枣庄">
<area shape="poly" id="heze" coords="10,339,36,304,60,293,74,270,94,263,100,258,110,269,120,272,122,293,132,304,134,319,124,332,126,345,142,356,140,369,132,382,102,381,92,376,84,381,70,374,68,361,56,352,44,341" href="#" title="heze">
<area shape="poly" id="liaocheng" coords="96,155,86,168,78,169,62,188,58,197,66,214,72,229,64,240,64,255,62,262,84,251,98,244,112,241,124,230,150,209,154,204,142,189,144,168,148,151,132,144,120,157" href="#" title="聊城">
<area shape="poly" id="dezhou" coords="93,156,115,157,133,148,147,153,145,176,143,189,155,204,171,185,169,176,189,157,187,146,197,133,191,114,205,103,213,96,221,81,227,84,231,81,235,64,235,53,219,68,203,67,181,68,169,75,161,86,149,101,139,92,135,101,135,108,125,113,115,120" href="#" title="德州">

<area shape="rect" id="dezhou" coords="144,114,164,126" href="#" alt="德州" title="德州">
<area shape="rect" id="liaocheng" coords="86,191,104,203" href="#" alt="聊城" title="聊城">
<area shape="rect" id="heze" coords="70,316,96,330" href="#" alt="heze" title="heze">
<area shape="rect" id="jining" coords="154,287,176,299" href="#" alt="济宁" title="济宁">
<area shape="rect" id="linyi" coords="264,310,290,322" href="#" alt="临沂" title="临沂">
<area shape="rect" id="zaozhuang" coords="204,339,220,349" href="#" alt="枣庄" title="枣庄">
<area shape="rect" id="rizhao" coords="344,278,362,286" href="#" alt="日照" title="日照">
<area shape="rect" id="weifang" coords="316,193,338,205" href="#" alt="潍坊" title="潍坊">
<area shape="rect" id="qingdao" coords="424,186,442,196" href="#" alt="青岛" title="青岛">
<area shape="rect" id="yantai" coords="460,117,478,127" href="#" alt="烟台" title="烟台">
<area shape="rect" id="weihai" coords="564,126,580,136" href="#" alt="威海" title="威海">
<area shape="rect" id="taian" coords="174,235,199,248" href="#" alt="泰安" title="泰安">
<area shape="rect" id="laiwu" coords="234,216,246,222" href="#" alt="莱芜" title="莱芜">
<area shape="rect" id="jinan" coords="188,173,209,189" href="#" alt="济南" title="济南">
<area shape="rect" id="binzhou" coords="232,96,252,108" href="#" alt="滨州" title="滨州">
<area shape="rect" id="to_zibo" coords="258,183,274,191" href="#" alt="淄博" title="淄博">
<area shape="rect" id="to_dongyin" coords="302,98,318,108" href="#" alt="东营" title="东营">
</map>
</body>
</html>
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
并且是程序控制显示的，不是使用鼠标控制的
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
需要能同时显示
fosjos 2006-10-27
  • 打赏
  • 举报
 回复
是不是要同时显示提示内容，还是每次只是显示一个？

前者需要每个area对应一个div ，后者只需要一个

function showPopupText(o){
if(o){
MouseX = x1(图片的x值)+x2(o.coords的x平均值);
MouseY = y1(图片的y值)+y2(o.coords的y平均值);
}else{
o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
}
不知能否满足需求
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
现在网页上面有一幅地图，我想在地图的不同地区上面显示不同的提示内容，请问如何处理呢？而且提示内容还要能控制改变
fosjos 2006-10-27
  • 打赏
  • 举报
 回复
楼主还是说的清楚些吧，比如：要实现的运行过程，测试出现的问题
javaoaout 2006-10-27
  • 打赏
  • 举报
 回复
直接调用我也测试过了，不行。艾，或许是我的方法不对
fosjos 2006-10-27
  • 打赏
  • 举报
 回复
直接调用showPopupText不就可以了，把area对象传递进去，显示坐标计算倒是有些麻烦

不知道有什么其他困难
uniapp,图片热区链接的实现问题汇总
我们现在看看如何获取coords坐标的问题，我这里用的是ps我们首先打开一个想要加热区链接的图片然后选择如下图窗口-----信息这里需要注意的是默认打开后是以厘米计算的，我们这里切换成像素即可按照上面调整完毕后...
设置图片热点链接以及获取图片上某个位置的坐标
有时候需要在一张图片上设置几个区域，鼠标点击图片的不同区域可以进入不同的页面，或者是点击图片的某一块区域进入某一个页面，这就是网页的热点链接。 1 <img src="test.jpg" usemap="#testmap" alt="test" /...
vue实现在图片中画矩形框,并得到对角坐标，并拿到对应坐标制作图片热区并设置map中area的样式
使用鼠标的移动事件onmousemove，更新div的宽度以及坐标 使用鼠标的抬起事件onmouseup，可以限定画的矩形的大小， 由于html的map的area 是无法设置样式的，hover也对其无效，如果想要设置悬浮效果改变样式，可以...
JS获取鼠标点击时图片的相对坐标位置并添加自定义内容
本来想用图片的热区useMap实现，但发现useMap只支持href跳转属性，不能添加自定义的内容。最后通过网上搜索方案，找到如下解决方法。 在点击图片时，通过鼠标点击位置计算点击的坐标，然后在点击的位置添加自定义...
php 热区,jquery如何使热区锚点随图片大小尺寸改变而变化
我们在图片上标识多个锚点热区，当用户使用不同分辨率的终端查看网页时，那么预期的锚点位置就会发生偏移，这就需要我们利用技术来适用各类屏幕尺寸。我们利用jquery可以很好地实现热区锚点随图片尺寸大小缩放而适应...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章