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

现在的位置: 首页 > 综合 > 正文

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

2012年04月07日 ⁄ 综合 ⁄ 共 2979字 ⁄ 字号小中大 ⁄ 评论关闭

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

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

<br />
<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>
<p><script> 
var oPopup = window.createPopup(); 
function fnDef() 
{  </p>
<p>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>
<p>"; </p>
<p>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="http://www.blueidea.com/img/common/logo.gif" border="0" class="popImg" title="联系人：fsdfsafasf
ID：asdfasdf
E-Mail：tierhuang@126.com
联系电话：asdfadsf
联系地址：asdfasdf
邮政编码：asdfasdf
" onmouseover="fnDef();">

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

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

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>
<p> ' </p>
<p>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>
<p>') 
locateObject(object).document.close() 
locateObject(object).top=e.y+20 </p>
<p>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>
<p><span onmouseover="showTooltip('dHTMLToolTip',event, '文字提示信息部分
带图片的<img src=http://www.blueidea.com/img/common/logo.gif>', '#fffff2','#000000','#000000','20000')" onmouseout="hideTooltip('dHTMLToolTip')">点这里</span><br />

【上篇】如何调试你的C#程序
【下篇】解决安装SP3后，Window Media Player 播放器不能播放的问题

作者: pickler

该日志由 pickler 于12年前发表在综合分类下，最后更新于 2012年04月07日.
转载请注明: 如何丰富alt属性的显示效果 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: pickler

书签

最新文章New

本站推荐

返回首页