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


答案：IE默认会给带alt属性图片和带title的链接一个浮动显示 
<img src="/upload/20121013/logo.gif" alt="蓝色理想"> 
蓝色理想

  [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> 
</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+"</div>"; 

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); 
} 
</SCRIPT> 
<IMG src="/upload/20121013/logo.gif" border=0 class="popImg"  title="联系人：fsdfsafasf
ID：asdfasdf
E-Mail：tierhuang@126.com
联系电话：asdfadsf
联系地址：asdfasdf
邮政编码：asdfasdf
" onmouseover="fnDef();" >

  [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 toolTipSTYLE=""; 
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 + 
    ' \;</font></td></table></td></table>'; 
    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> 

<span style="color:#FF6600">四川辣椒的艺术 （转）</span> 
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div> 
<script language="JavaScript"><!-- 
initToolTips(); //--></script>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

<html> 
<head> 
  <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)+'</font></td></tr></table> ' 

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)+'</font></td></tr></table></td></tr></table>') 
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> 
  </head> 
  <body> 
<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=/upload/20121013/logo.gif>', '#fffff2','#000000','#000000','20000')" onMouseOut="hideTooltip('dHTMLToolTip')">点这里</span> 
</body> 
<html>

  一个多次搜索+多次传值的解决方案
下一个：Javascript里使用Dom操作Xml
更多图片编程知识:
"好玩的放大镜效果" 的另一种实现方法

利用JScript中运算符"||"和"&&"的特殊特性实现代码精简第1/2页

如何利用百度地图JSAPI画带箭头的线？

jsGantt（甘特图控件）

[cocos2d-x从c++到js]02：解决在vs中修改js源文件无效

ExtJs在IE下存在的一个bug
  
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。