Home >Web Front-end >JS Tutorial >How to enrich the display effect of alt attributes_javascript skills

How to enrich the display effect of alt attributes_javascript skills

WBOYOriginal: 2016-05-16 19:20:341179browse

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

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

"; 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需刷新才能执行]

<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"></script>

[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)+' '

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需刷新才能执行]

//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>

<span class="header">Link Hint Scroller 1.0</span>

<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>

</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Writing htc data table_javascript skillsNext article：Writing htc data table_javascript skills

See more

How to enrich the display effect of alt attributes_javascript skills

Related articles