分享

title Alt 的tooltip提示代码

 一位老师的收藏 2017-12-12

<html>

<head>

<style type="text/css">

<!--

A {

font-size: 9pt;

COLOR: #0000FF;

TEXT-DECORATION: underline;

}

A:hover {

font-size: 9pt;

COLOR: #CC0000;

TEXT-DECORATION: underline;

}

//

-->

</style>

</head>

<body>

<b style="font-size:14px;">鼠标放到图片上,会显示提示信息,鼠标离开后三秒消失!不需要在标签中添加其它事件,凡标签有Alt,title属性的,会自动处理</b>

<P> </P>

<img src="http://www./dl/up_img/1129183598.jpg" alt="<Font Size=4 Face=微软简行楷><I><Font Color=#FF0000>帮</Font><Font Color=#FF6000>助</Font><Font Color=#FFC000>他</Font><Font Color=#80C000>人</Font><Font Color=#00C000>,</Font><Font Color=#00C07F>快</Font><Font Color=#00C0FF>乐</Font><Font Color=#0060FF>自</Font><Font Color=#0000FF>己</Font> <Font Color=#FF00FF>。</Font><br><Font Color=#8000FF>请</Font><Font Color=#0000FF>欣</Font><Font Color=#0060FF>赏</Font><Font Color=#00C0FF>《</Font><Font Color=#00C080>一</Font><Font Color=#00C000>千</Font><Font Color=#7FC000>年</Font><Font Color=#FFC000>以</Font><Font Color=#FF6000>后</Font><Font Color=#FF0000>》</Font></I></Font>

<br><embed src='http://3mao./yingyin/yqnyh.wma' width='200' height='100'></embed>"> <br>

<br>

<br>

<P align="center"> <a href="http://www.sina.com.cn" style="font-size:24px;font-weight:bold" title="<Font Size=4 Face=微软简行楷><Font Color=#FF0080>水</Font><Font Color=#ED1289>至</Font><Font Color=#DB2492>清</Font><Font Color=#C9369B>则</Font><Font Color=#B748A4>无</Font><Font Color=#A45BAD>鱼</Font><Font Color=#926DB6>,</Font><Font Color=#807FBF>人</Font><Font Color=#6E91C8>至</Font><Font Color=#5CA3D1>贱</Font><Font Color=#49B6DA>则</Font><Font Color=#37C8E3>无</Font><Font Color=#25DAEC>敌</Font> <Font Color=#00FFFF>。</Font></Font>

">有时候想要低调却很难,因为我有某种不平凡。</a> <a href="http://www.sohu.com.cn" style="font-size:24px;font-weight:bold" title="<Font Size=4 Face=Whimsy TT><Font Color=#FF00FF>A</Font><Font Color=#B000FF>n</Font> <Font Color=#1000FF>I</Font><Font Color=#0030FF>n</Font><Font Color=#006CFF>t</Font><Font Color=#00A8FF>e</Font><Font Color=#00C0D0>r</Font><Font Color=#00C080>v</Font><Font Color=#00C030>i</Font><Font Color=#1FC000>e</Font><Font Color=#6FC000>w</Font> <Font Color=#FFB400>W</Font><Font Color=#FF7800>i</Font><Font Color=#FF3C00>t</Font><Font Color=#FF0000>h</Font> <Font Color=#FF7800>R</Font><Font Color=#FFB400>u</Font><Font Color=#C0C000>s</Font><Font Color=#70C000>s</Font><Font Color=#20C000>i</Font><Font Color=#00C02F>a</Font><Font Color=#00C07F>n</Font> <Font Color=#00A8FF>C</Font><Font Color=#006CFF>i</Font><Font Color=#0030FF>r</Font><Font Color=#0F00FF>c</Font><Font Color=#5F00FF>l</Font><Font Color=#AF00FF>e</Font><Font Color=#FF00FF>s</Font></Font>

">包子和面条打架之终极版</a> </p>

<script Language="JavaScript">

<!--

var tPopWait=50;        //停留tWait毫秒后显示提示。

var tPopShow=120000;    //显示tShow毫秒后关闭提示。

           //若有视频或音频,请设置最长时间并考虑缓冲时间。

var showPopStep=20;        //透明递进。

var popOpacity=99;        //最大非透明度。

var mouseoutkeep = 3000;    //鼠标移出区域mouseoutkeep毫秒后关闭提示。


/* 以下若不会,建议你不要修改 */

var sPop=null;

var curShow=null;

var tFadeOut=null;

var tFadeIn=null;

var tFadeWaiting=null;



/*    这里可以更改成你喜欢的样式    */

document.write("<style type='text/css'>");

document.write(".theText {  font-size:12px;background-color: #F8F8F5;color:#000000; border: 1px #000088 dashed;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)};");

document.write("</style>");

document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='theText'></div>");



function showPopup(){

   var o=event.srcElement;

   MouseX=event.x;

   MouseY=event.y;

   if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

   if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

   if(o.dypop!=sPop) {

           sPop=o.dypop;

           clearTimeout(curShow);

           clearTimeout(tFadeOut);

           clearTimeout(tFadeIn);

           clearTimeout(tFadeWaiting);

           clearTimeout(mouseout);

           if(sPop==null || sPop=="") {

               var mouseout = setTimeout(fadeIn,mouseoutkeep)

               }

           else {

               if(o.dyclass!=null) popStyle=o.dyclass

                   else popStyle="theText";

               curShow=setTimeout("showIt()",tPopWait);

           }

           

   }

}


function showIt(){

       dypopLayer.className=popStyle;

       dypopLayer.innerHTML=sPop;

       popWidth=dypopLayer.clientWidth;

       popHeight=dypopLayer.clientHeight;

       if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24

           else popLeftAdjust=0;

       if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24

           else popTopAdjust=0;

       dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;

       dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;

       dypopLayer.style.filter="Alpha(Opacity=0)";

       fadeOut();

}


function fadeOut(){

   if(dypopLayer.filters.Alpha.opacity<popOpacity) {

       dypopLayer.filters.Alpha.opacity+=showPopStep;

       tFadeOut=setTimeout("fadeOut()",150);

       }

       else {

           dypopLayer.filters.Alpha.opacity=popOpacity;

           tFadeWaiting=setTimeout("fadeIn()",tPopShow);

           }

}


function fadeIn(){

   if(dypopLayer.filters.Alpha.opacity>0) {

       dypopLayer.filters.Alpha.opacity-=1;

       tFadeIn=setTimeout("fadeIn()",1);

       }

   if(dypopLayer.filters.Alpha.opacity<=0){

       dypopLayer.innerHTML='';

   }

}

document.onmouseover=showPopup;

//-->

</script>

</body>

</html>


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多