如何丰富alt属性的显示效果_javascript技巧

IE默认会给带alt属性图片和带title的链接一个浮动显示

<img src="http://www.blueidea.com/img/common/logo.gif" alt="蓝色理想"> <a href="#" title="蓝色理想">蓝色理想</a>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

很多朋友觉得不好看或者功能不丰富想改改，搜集了几种办法大家研究下

<style> .popShow{ background:#ffffcc; border:1px solid black; padding:4px;font-family:verdana; font-size:70%; width:300px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#0099FF', EndColorStr='#00FFFF') } .popImg{ border:0px; cursor: hand; } </style> <script> var oPopup = window.createPopup(); function fnDef() { oPopup.document.body.innerHTML = "<DIV STYLE=\"background:#ffffcc; border:1px solid black; padding:4px;font-family:verdana; font-size:70%;color=#111; width:300px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#0099FF', EndColorStr='#00FFFF'\">"+event.srcElement.title+"</script>

"; var popupBody = oPopup.document.body; oPopup.show(0, 0, 300, 50); var realHeight = popupBody.scrollHeight; oPopup.hide(); oPopup.show(0, 15 , 300, realHeight, event.srcElement); }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<script language="javascript"> var ns4 = document.layers; var ns6 = document.getElementById && !document.all; var ie4 = document.all; offsetX = 0; offsetY = 20; var toolTip; function initToolTips() { if(ns4||ns6||ie4) { if(ns4) toolTipSTYLE = document.toolTipLayer; else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style; else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style; if(ns4) document.captureEvents(Event.MOUSEMOVE); else { toolTipSTYLE.visibility = "visible"; toolTipSTYLE.display = "none"; } document.onmousemove = moveToMouseLoc; } } function toolTip(msg, fg, bg) { if(toolTip.arguments.length < 1) // hide { if(ns4) toolTipSTYLE.visibility = "hidden"; else toolTipSTYLE.display = "none"; } else // show { if(!fg) fg = "#777777"; if(!bg) bg = "#FFFFFF"; var content = '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '"><td>' + '<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + '"><td align="center"><font face="sans-serif" color="' + fg + '" style="font-size:12px"> \;' + msg + ' \;'; if(ns4) { toolTipSTYLE.document.write(content); toolTipSTYLE.document.close(); toolTipSTYLE.visibility = "visible"; } if(ns6) { document.getElementById("toolTipLayer").innerHTML = content; toolTipSTYLE.display='block' } if(ie4) { document.all("toolTipLayer").innerHTML=content; toolTipSTYLE.display='block' } } } function moveToMouseLoc(e) { if(ns4||ns6) { x = e.pageX; y = e.pageY; } else { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } toolTipSTYLE.left = x + offsetX; toolTipSTYLE.top = y + offsetY; return true; } </script> <a href="#" onmouseover="toolTip('四川辣椒的艺术 （转）', '#333333', '#BFFF95')" onmouseout="toolTip()"><span style="color:#FF6600">四川辣椒的艺术 （转）</span></a> <div id="toolTipLayer" style="position:absolute; visibility: hidden"></div> <script language="JavaScript"><!-- initToolTips(); //--></script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<script language="javascript"> var tipTimer; function locateObject(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=locateObject(n,d.layers[i].document); return x; } function hideTooltip(object) { if (document.all) { locateObject(object).style.visibility="hidden" locateObject(object).style.left = 1; locateObject(object).style.top = 1; return false } else if (document.layers) { locateObject(object).visibility="hide" locateObject(object).left = 1; locateObject(object).top = 1; return false } else return true } function showTooltip(object,e, tipContent, backcolor, bordercolor, textcolor, displaytime) { window.clearTimeout(tipTimer) if (document.all) { locateObject(object).style.top=document.body.scrollTop+event.clientY+20 locateObject(object).innerHTML='<table style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; border: '+bordercolor+'; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background-color: '+backcolor+'" width="10" border="0" cellspacing="1" cellpadding="1"><tr><td nowrap><font style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+' ' if ((e.x + locateObject(object).clientWidth) > (document.body.clientWidth + document.body.scrollLeft)) { locateObject(object).style.left = (document.body.clientWidth + document.body.scrollLeft) - locateObject(object).clientWidth-10; } else { locateObject(object).style.left=document.body.scrollLeft+event.clientX } locateObject(object).style.visibility="visible" tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime); return true; } else if (document.layers) { locateObject(object).document.write('<table width="10" border="0" cellspacing="1" cellpadding="1"><tr bgcolor="'+bordercolor+'"><td><table width="10" border="0" cellspacing="0" cellpadding="2"><tr bgcolor="'+backcolor+'"><td nowrap><font style="font-family: Verdana,Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: '+textcolor+'">'+unescape(tipContent)+'') locateObject(object).document.close() locateObject(object).top=e.y+20 if ((e.x + locateObject(object).clip.width) > (window.pageXOffset + window.innerWidth)) { locateObject(object).left = window.innerWidth - locateObject(object).clip.width-10; } else { locateObject(object).left=e.x; } locateObject(object).visibility="show" tipTimer=window.setTimeout("hideTooltip('"+object+"')", displaytime); return true; } else { return true; } } </script> <div id="dHTMLToolTip" style="position: absolute; visibility: hidden; width:10; height: 10; z-index: 1000; left: 0; top: 0"></div> <span onmouseover="showTooltip('dHTMLToolTip',event, '文字提示信息部分 带图片的<img src=http://www.blueidea.com/img/common/logo.gif>', '#fffff2','#000000','#000000','20000')" onmouseout="hideTooltip('dHTMLToolTip')">点这里</span>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<div id="DIV" style="position:absolute; top:190px; left:100px; width:440px; height:160px; padding:10px; font:bold 13pt verdana; color:white; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')"> <style type="text/css"> .link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal} .link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal} .prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#ffffff; font-weight:normal} .header{font-family:arial,verdana,helvetica; font-size:20pt; color:#ffff00; font-weight:bold} </style> <!--BEGIN REQUIRED--> <script language="javascript"> // Location of this script: // http://www.geocities.com/e_i_search/premshree/pub/scripts/JS/link_hint_scroller.htm //********************************************* //* Link Hint Scroller 1.0 * //* This script when you move your mouse over * //* displays a scrolling hint * //* (c) Premshree Pillai, * //* http://qik.cjb.net * //* E-mail : premshree@hotmail.com * //* Use the script freely as long as this * //* message is intact * //********************************************* window.onerror = null; var bName = navigator.appName; var bVer = parseInt(navigator.appVersion); var NS4 = (bName == "Netscape" && bVer >= 4); var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4); var NS3 = (bName == "Netscape" && bVer < 4); var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4); var scroll_length = 150; //The scroll length var time_length =50; //Scroll speed var begin_pos = 100; //Start position of scroll hint var i; var j; if (NS4 || IE4) { if (navigator.appName == "Netscape") { layerStyleRef="layer."; layerRef="document.layers"; styleSwitch=""; }else{ layerStyleRef="layer.style."; layerRef="document.all"; styleSwitch=".style"; } } //SCROLL function Scroll(layerName){ if (NS4 || IE4) { if (NS4 || IE4) { if(i<(begin_pos+scroll_length)){ eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.visibility="visible"'); eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+i+'"'); i++; j++; if(i==j){ setTimeout("Scroll('"+layerName+"')",time_length);} } } } } //STOP SCROLLING function StopScroll(layerName) { i=begin_pos+scroll_length; eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+i+'"'); hideLayer(layerName); } function reset() { i=begin_pos; j=i; } // HIDE HINT function hideLayer(layerName){ if (NS4 || IE4) { eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.visibility="hidden"'); } } </script> <!--END REQUIRED--> <center> <span class="header">Link Hint Scroller 1.0</span> <!--BEGIN REQUIRED--> <a href="#" class="link" onmouseover="javascript:reset();Scroll('prem_hint');" onmouseout="javascript:StopScroll('prem_hint');">Move your mouse over</a> </center> <div id="prem_hint" style="position:relative; visibility:hidden" class="prem_hint"> This is the hint or description for the above link! </div> <!--END REQUIRED--> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]