易网时代-编程资源站
Welcome
微信登录
首页
/
脚本样式
/
JavaScript
/
如何丰富alt属性的显示效果
IE默认会给带alt属性图片和带title的链接一个浮动显示
<img src="http://www.blueidea.com/img/common/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 = ""+event.srcElement.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）; } </SCRIPT> <IMG src="http://www.blueidea.com/img/common/logo.gif" border=0 class="popImg"title="联系人：fsdfsafasfID：asdfasdfE-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><script language="JavaScript"></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><span onMouseOver="showTooltip（"dHTMLToolTip",event, "文字提示信息部分带图片的<img src=http://www.blueidea.com/img/common/logo.gif>", "#fffff2","#000000","#000000","20000"）" onMouseOut="hideTooltip（"dHTMLToolTip"）">点这里</span> </body> <html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
<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><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 lengthvar time_length =50; //Scroll speedvar begin_pos = 100; //Start position of scroll hintvar 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><center> <span class="header">Link Hint Scroller 1.0</span> Move your mouse over </center>This is the hint or description for the above link！
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图
易网时代-编程资源站
易网时代-编程资源站