热区背景!_img usemap 显示背景颜色-CSDN博客

本文链接：https://blog.csdn.net/wtcsy/article/details/4305684

其实是个挺简单的效果,可是却花了比较长的时间,于是就记录下来了

遇到了一些问题

问题很复杂抽空在写一下

现在还存在一些问题比如在ff下看看吧哈哈有时间在改改最近工作挺忙的

模仿的原地址界面 http://hnrb.hinews.cn/html/2009-06/28/node_2.htm

<!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=gb2312" /> <title>Hot</title> <style type="text/css"> #show{ border:2px solid #FF0000; height:100px; width:100px; position:absolute; display:none } #title{ border:2px solid #428ADE; height:40px; width:350px; font-weight:bold; display:none; position:absolute; vertical-align:middle; line-height:40px; text-align:center; } #title div{ height:100%; width:100%; background-color:#DEE7F7; filter:alpha(opacity=90); } </style> </head> <body > <div> <div style="float:left"> 带扩展的<br><br> <img id='sss' src ="http://album.hi.csdn.net/app_uploads/wtcsy/20090628/235430046.p.jpg" usemap="#ss" border="0" /> <map id ="ss" name="ss"> <area shape ="rect" coords ="174,3,352,86" t="全省房地产开发投资保持增长"/> <area shape ="rect" coords ="-2,97,231,276" t="海南有机农业已露尖尖角" /> <area shape ="rect" coords ="236,110,350,185" t="农民土地承包仲裁委员会" /> <area shape ="rect" coords ="236,190,350,255" t="六中纠纷可申请调解和仲裁" /> <area shape ="rect" coords ="-2,280,58,521" t="海南周报" /> <area shape ="rect" coords ="63,295,228,362" t="干部带头清理垃圾" /> <area shape ="rect" coords ="63,363,228,437" t="秀英区整环境" /> <area shape ="rect" coords ="61,442,230,538" t="海南养猪业逆势扩张"/> <area shape ="rect" coords ="234,265,352,363" t="一本二本录取分数线" /> <area shape ="rect" coords ="234,365,352,440" t="军校公安院考生7月1好面试"/> </map> </div> <div style=" float:left; width:100px; height:100px;"></div> <div > 无扩展的<br><br> <img id='sss1' src ="http://album.hi.csdn.net/app_uploads/wtcsy/20090628/235430046.p.jpg" usemap="#sss" border="0" /> <map id ="ss1" name="sss"> <area shape ="rect" coords ="174,3,352,86" t="全省房地产开发投资保持增长"/> <area shape ="rect" coords ="-2,97,231,276" t="海南有机农业已露尖尖角" /> <area shape ="rect" coords ="236,110,350,185" t="农民土地承包仲裁委员会" /> <area shape ="rect" coords ="236,190,350,255" t="六中纠纷可申请调解和仲裁" /> <area shape ="rect" coords ="-2,280,58,521" t="海南周报" /> <area shape ="rect" coords ="63,295,228,362" t="干部带头清理垃圾" /> <area shape ="rect" coords ="63,363,228,437" t="秀英区整环境" /> <area shape ="rect" coords ="61,442,230,538" t="海南养猪业逆势扩张"/> <area shape ="rect" coords ="234,265,352,363" t="一本二本录取分数线" /> <area shape ="rect" coords ="234,365,352,440" t="军校公安院考生7月1好面试"/> </map> </div> </div> <div id='show'></div> <div id='title'><div></div></div> <script> var commontion ={ $ : function(id){ return "string" == typeof id ? document.getElementById(id) : id; }, Bind : function(object, fun){ var args = Array.prototype.slice.call(arguments).slice(2); return function(event) { return fun.apply(object, [window.event||event].concat(args)); } }, getTarget:function(e){ e = e||window.event; return e.srcElement||e.target; }, CurrentStyle : function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); }, addListener : function(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); }, removeListener : function(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn); }, Extend:function(destination, source){ for (var property in source) { destination[property] = source[property]; } }, getPosition : function(o){ return !!document.documentElement.getBoundingClientRect&&function(){ var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.document; var can=0;document.all&&(can=2); return {x:pos.left+root.documentElement.scrollLeft-can,y:pos.top+root.documentElement.scrollTop-can}; }()|| function(){ var x = 0, y = 0; do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent)); return {'x':x,'y':y}; }(); } } var Class = function(properties){ var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; _class.prototype = properties; return _class; }; var Hotzone = new Class({ options :{ onshow:function(){}, onhide:function(){} }, initialize : function(img,map,bgborder,title,options){ this._img = img; this._map = map; this._bgborder = bgborder; this._title = title; this.onshow = this.options.onshow; this.onhide = this.options.onhide; // commontion.Extend(this,options||{}); var a = this._map.getElementsByTagName('area'); for(var i =0; i<a.length;i++) { commontion.addListener(a[i],'mouseover',commontion.Bind(this,this.Show,a[i].coords)); } if(document.all) {commontion.addListener(this._img,'mouseout',commontion.Bind(this,this.Hide));} else {commontion.addListener(this._bgborder,'mouseout',commontion.Bind(this,this.Hide)); } }, Show:function(e,a){ var Coords = new Object(); Coords.x1=parseInt(a.split(",")[0]);Coords.y1=parseInt(a.split(",")[1]); Coords.x2=parseInt(a.split(",")[2]);Coords.y2=parseInt(a.split(",")[3]); var css = this.Count(this._img,Coords); with(this._bgborder.style){ //位置div的位置和大小 display !="block"&&(display = "block"); height = css.h+"px"; width = css.w+"px"; left=css.x-parseInt(commontion.CurrentStyle(this._bgborder).borderLeftWidth)+"px"; top =css.y- parseInt(commontion.CurrentStyle(this._bgborder).borderLeftWidth)+"px"; }; this.onshow(e); }, Count:function(o,p){ var pos = commontion.getPosition(o); return {x:pos.x+p.x1,y:pos.y+p.y1,w:p.x2-p.x1,h:p.y2-p.y1} }, Hide:function(){ this._bgborder.style.display = "none"; this.onhide(); } }); var c=new Hotzone(commontion.$('sss1'),commontion.$('ss1'),commontion.$('show')) var d = new Hotzone(commontion.$('sss'),commontion.$('ss'),commontion.$('show'),commontion.$('title'),{ move:function(e){ d._title.style.left = e.clientX+10+'px'; d._title.style.top = e.clientY+20+'px'; }, onshow:function(e){ d._title.style.display = "block"; d._title.style.left = e.clientX+'px'; d._title.style.top = e.clientY+'px'; d._title.getElementsByTagName("div")[0].innerHTML = commontion.getTarget(e).t; commontion.addListener(document.body,'mousemove',commontion.Bind(this,this.move)); }, onhide:function(){ commontion.removeListener(document.body,'mousemove',commontion.Bind(this,this.move)); d._title.style.display = "none"; } }); </script> </body> </html>