使用Javascript、div层进行title等信息浮出显示
使用Javascript、div层进行title等信息浮出显示，示例代码如下：<html><head> <style type="text/css"> .xstooltip {visibility: hidden; position: absolute; top: 0;left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px;} </style></head><body><div id="test" onmouseout="xstooltip_hide('tooltip_123');">显示注释</div><div id="tooltip_123" class="xstooltip">Time spent: 00:00:08<br/>Page viewed: 4<br/>Browser: Mozilla – 1.7.11<br/>Operating system: Linux - i686 (x86_64)</div> </body></html><script>function xstooltip_findPosX(obj) {var curleft = 0;if (obj.offsetParent) {while (obj.offsetParent) {curleft += obj.offsetLeftobj = obj.offsetParent;}}else if (obj.x)curleft += obj.x;return curleft;}function xstooltip_findPosY(obj) {var curtop = 0;if (obj.offsetParent) {while (obj.offsetParent) {curtop += obj.offsetTopobj = obj.offsetParent;}}else if (obj.y)curtop += obj.y;return curtop;}function xstooltip_show(tooltipId, parentId, posX, posY){it = document.getElementById(tooltipId);if ((it.style.top == '' || it.style.top == 0) && (it.style.left == '' || it.style.left == 0)){// need to fixate default size (MSIE problem)it.style.width = it.offsetWidth + 'px';it.style.height = it.offsetHeight + 'px';img = document.getElementById(parentId); // if tooltip is too wide, shift left to be within parent if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;if (posX < 0 ) posX = 0; x = xstooltip_findPosX(img) + posX;y = xstooltip_findPosY(img) + posY;it.style.top = y + 'px';it.style.left = x + 'px';}it.style.visibility = 'visible'; }function xstooltip_hide(id){it = document.getElementById(id); it.style.visibility = 'hidden'; }</script>
页:
[1]