今天朋友遇到了一个问题,就是鼠标移到图片上显示图片的题目,日期等内容,但是用alt呢可以显示,但不能分行等,后来我帮他弄了一下,下面将代码与大家分享:
《style type="text/css"》 .altbox border:1px solid #f60; background:#fff; padding:5px; width:150px; font-family:Arial; font-size:12px} 《/style》 《script type="text/javascript"》 function aa(a,b) var offsetX = 20; var offsetY = 20; var imgs = document.images; for (var i=0; i《imgs.length; i++) (function() var div; var pw = getPW(); var ph = getPH(); var timeout; document.images[i].onmouseover = function(e) div = document.createElement("DIV"); div.className = "altbox"; div.innerHTML = a+"《br》"+b; div.style.position = "absolute"; this.alt = ''; document.body.appendChild(div); var p = getMouse(e); var x = p.x + offsetX; var y = p.y + offsetY; if (div.offsetWidth + x 《 pw) div.style.left = x + "px" ; } else div.style.left = ( pw - div.offsetWidth ) + "px"; } if (div.offsetHeight + y 《 ph) div.style.top = y + "px"; } else div.style.top = (ph - div.offsetHeight) + "px"; } (function(img) timeout = setTimeout(function() if (div) img.alt = div.innerHTML; div.parentNode.removeChild(div); document.onmousemove = null; } },3000) })(this); document.onmousemove = function(e) var p = getMouse(e); var x = p.x + offsetX; var y = p.y + offsetY; if (div.offsetWidth + x 《 pw) div.style.left = x + "px" ; } if (div.offsetHeight + y 《 ph) div.style.top = y + "px"; } } } document.images[i].onmouseout = function(e) if (div.parentNode) this.alt = div.innerHTML; div.parentNode.removeChild(div); document.onmousemove = null; clearTimeout(timeout); } } })(); }
} function getMouse(ev) var ev = ev || window.event; if (ev.x) nx = ev.x; ny = ev.y; } else nx = ev.pageX; ny = ev.pageY; } return x:nx,y:ny}; } function getPW() return document.documentElement.scrollWidth; } function getPH() return document.documentElement.clientHeight 》 document.documentElement.scrollHeight ? document.documentElement.clientHeight : document.documentElement.scrollHeight; }《/script》 《/head》 《body》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" a onMouseover="aa(11111,1111)"width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" onMouseover="aa(1111,112)"width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示4" width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" width="204" height="150" /》 《img src="http://case.blueidea.cn/files/2008/05/25/work_335982_6337_20080525_180105_5838013_t.jpg" alt="提示提示提示7" width="204" height="150" /》
请将代码中的“()、{}、《》”分别替换成"()、{}、<>" |