打印

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

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

 提示:您可以先修改部分代码再运行
很多朋友觉得不好看或者功能不丰富想改改,搜集了几种办法大家研究下

 提示:您可以先修改部分代码再运行


 提示:您可以先修改部分代码再运行


 提示:您可以先修改部分代码再运行
『网站重构』群:138158

TOP



 提示:您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┨┠┨┠┨┠
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE>
.haha {
       BORDER-RIGHT: #cc0000 1px outset; BORDER-TOP: #cc0000 1px outset; FONT-SIZE: 9pt; BORDER-LEFT: #cc0000 1px outset; WIDTH: 100px; COLOR: #cc0000; BORDER-BOTTOM: #cc0000 1px outset; BACKGROUND-COLOR: #F0F0F0; layer-background-color: #B5CDE6
}
</STYLE>
<SCRIPT language=javascript>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
//  ALTTXT V1.2
//  BY: BRIAN GOSSELIN OF SCRIPTASYLUM.COM
//  ADDED FADING EFFECT FOR IE4+ AND NS6+ ONLY AND OPTIMIZED THE CODE A BIT.
//  SCRIPT FEATURED ON DYNAMIC DRIVE (http://www.dynamicdrive.com)


var dofade=true;     // ENABLES FADE-IN EFFECT FOR IE4+ AND NS6 ONLY
var center=false;     // 盢亥弧逆瞷菲公い丁(true), 玥瞷菲公娩(false)
var centertext=false; // 弧ゅい丁癸非逼(true),玥ゅ綼オ逼(false)


////////////////////////////// 礚惠э //////////////////////////////////////

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? true : false;
var IE4 = (document.all && !document.getElementById)? true : false;
var IE5 = (document.getElementById && document.all)? true : false;
var NS6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var W3C = (document.getElementById)? true : false;
var w_y, w_x, navtxt, boxheight, boxwidth;
var ishover=false;
var isloaded=false;
var ieop=0;
var op_id=0;

function getwindowdims(){
w_y=(NS4||NS6)? window.innerHeight : (IE5||IE4)? document.body.clientHeight : 0;
w_x=(NS4||NS6)? window.innerWidth : (IE5||IE4)? document.body.clientWidth : 0;
}

function getboxwidth(){
if(NS4)boxwidth=(navtxt.document.width)? navtxt.document.width : navtxt.clip.width;
if(IE5||IE4)boxwidth=(navtxt.style.pixelWidth)? navtxt.style.pixelWidth : navtxt.offsetWidth;
if(NS6)boxwidth=(navtxt.style.width)? parseInt(navtxt.style.width) : parseInt(navtxt.offsetWidth);
}

function getboxheight(){
if(NS4)boxheight=(navtxt.document.height)? navtxt.document.height : navtxt.clip.height;
if(IE4||IE5)boxheight=(navtxt.style.pixelHeight)? navtxt.style.pixelHeight : navtxt.offsetHeight;
if(NS6)boxheight=parseInt(navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(NS4)navtxt.moveTo(x,y);
if(W3C||IE4){
navtxt.style.left=x+'px';
navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(NS4||NS6)return window.pageYOffset;
if(IE5||IE4)return document.body.scrollTop;
}

function getpagescrollx(){
if(NS4||NS6)return window.pageXOffset;
if(IE5||IE4)return document.body.scrollLeft;
}

function writeindiv(text){
if(NS4){
navtxt.document.open();
navtxt.document.write(text);
navtxt.document.close();
}
if(W3C||IE4)navtxt.innerHTML=text;
}

//**** END UTILITY FUNCTIONS ****//

function writetxt(text){
if(isloaded){
if(text!=0){
ishover=true;
if(NS4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
writeindiv(text);
getboxheight();
if((W3C || IE4) && dofade){
ieop=0;
incropacity();
}}else{
if(NS4)navtxt.visibility="hide";
if(IE4||W3C){
if(dofade)clearTimeout(op_id);
navtxt.style.visibility="hidden";
}
writeindiv('');
ishover=false;
}}}

function incropacity(){
if(ieop<=100){
ieop+=7;
if(IE4 || IE5)navtxt.style.filter="alpha(opacity="+ieop+")";
if(NS6)navtxt.style.MozOpacity=ieop/100;
op_id=setTimeout('incropacity()', 50);
}}

function moveobj(evt){
if(isloaded && ishover){
margin=(IE4||IE5)? 1 : 23;
if(NS6)if(document.height+27-window.innerHeight<0)margin=15;
if(NS4)if(document.height-window.innerHeight<0)margin=10;
//mx=(NS4||NS6)? evt.pageX : (IE5||IE4)? event.clientX : 0;
//my=(NS4||NS6)? evt.pageY : (IE5||IE4)? event.clientY : 0;
if (NS4){
mx=evt.pageX
my=evt.pageY
}
else if (NS6){
mx=evt.clientX
my=evt.clientY
}
else if (IE5){
mx=event.clientX
my=event.clientY
}
else if (IE4){
mx=0
my=0
}

if(NS4){
mx-=getpagescrollx();
my-=getpagescrolly();
}
xoff=(center)? mx-boxwidth/2 : mx+5;
yoff=(my+boxheight+30-getpagescrolly()+margin>=w_y)? -15-boxheight: 30;
movenavtxt( Math.min(w_x-boxwidth-margin , Math.max(2,xoff))+getpagescrollx() , my+yoff+getpagescrolly());
if(NS4)navtxt.visibility="show";
if(W3C||IE4)navtxt.style.visibility="visible";
}}

if(NS4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onload=function(){
  navtxt=(NS4)? document.layers['navtxt'] : (IE4)? document.all['navtxt'] : (W3C)? document.getElementById('navtxt') : null;
  getboxwidth();
  getboxheight();
  getwindowdims();
  isloaded=true;
  if((W3C || IE4) && centertext)navtxt.style.textAlign="center";
  if(W3C)navtxt.style.padding='4px';
  if(IE4 || IE5 && dofade)navtxt.style.filter="alpha(opacity=0)";
  
window.onresize=getwindowdims;
}


</SCRIPT>
<style type="text/css">
<!--
.??1 {font-size: 12px}
.chen{
       FONT-SIZE: 12px; LINE-HEIGHT: 20px; FONT-FAMILY: "??"; TEXT-DECORATION: none
}
A:hover {
       LEFT: 1px; COLOR: #333333; POSITION: relative; TOP: 1px
}
-->
</style>
</head>

<body>
<DIV class=haha id=navtxt
style="Z-INDEX: 3; LEFT: 0px; POSITION: absolute; TOP: -100px; visibility: visible;"></DIV>
<table width="414" height="133" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td> <a href="#" class="chen" onmouseover="writetxt('zhe shi yi ge!')" onmouseout=writetxt(0)
                  href="http://www.qq.com">我们都是中国人 </a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
道风的BK
博主QQ群:7916133

TOP