热区背景!

落日映苍穹つ 2022-08-05 16:15 139阅读 0赞

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

遇到了一些问题

问题很复杂  抽空在写一下

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

模仿的原地址界面  [http://hnrb.hinews.cn/html/2009-06/28/node\_2.htm][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>

[http_hnrb.hinews.cn_html_2009-06_28_node_2.htm]: http://hnrb.hinews.cn/html/2009-06/28/node_2.htm