zoukankan      html  css  js  c++  java
  • Dhtml:实现鼠标经过超链时的提示图层的收集

    <script>
    var oPopup = window.createPopup();
    function rdl_doClick(){
    var oMessage=document.all("oMessage");
    with (oPopup.document.body) {
    style.backgroundColor="lightyellow";
    style.border="solid black 1px";
    innerHTML=oMessage.value;
    }
    oPopup.show(70, 70, 180, 60);
    }
    </script>


    <input id=oMessage type=text size=40 value="点击弹出窗口外面的区域关闭它。">
    <br><br>
    <a href="#"  onmouseover="rdl_doClick()" onmouseout="oPopup.hide();">显示弹出窗口 </a>

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <STYLE type=text/css>BODY {
     MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
    }
    A {
     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
    }
    A:hover {
     FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
    }
    A:active {
     FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
    }
    </style>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

    </head>

    <body>
    <script>

    function show(tips,flag,url){
    var my_tips=document.all.mytips;
    if(flag){
        my_tips.style.display="";
        if (url!=null){my_tips.innerHTML="<img src='"+url+"'align=left>"+tips;}
        else{ my_tips.innerHTML=tips;}
        my_tips.style.left=event.clientX+10;
        my_tips.style.top=event.clientY+10;
       }
    else
      {
       my_tips.style.display="none";
       }
    }
    </script>

    <a href="#" tips="自定义提示" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>测试链接</a>
    <a href="#" tips="又一个自定义提示" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif') onmouseout=show(this.tips,0)>测试链接</a>  
    <a href="#" tips="中华人民共和国中华人民共和国自定义提示" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif') onmouseout=show(this.tips,0)>测试链接</a>  

    <div id=mytips style="position:absolute;150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">
    </div>
    </body>
    </html>



     

    <SCRIPT language=JavaScript1.2>
    <!--
    tPopWait=50;
    tPopShow=50000;
    showPopStep=10;
    popOpacity=100;

    sPop=null;
    curShow=null;
    tFadeOut=null;
    tFadeIn=null;
    tFadeWaiting=null;

    document.write("<style type='text/css'id='defaultPopStyle'>");
    document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; 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='cPopText'></div>");

    function showPopupText(){
    var o=event.srcElement;
    MouseX=event.x;
    MouseY=event.y;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.dypop!=sPop) {
    sPop=o.dypop;
    clearTimeout(curShow);
    clearTimeout(tFadeOut);
    clearTimeout(tFadeIn);
    clearTimeout(tFadeWaiting);
    if(sPop==null || sPop=="") {
    dypopLayer.innerHTML="";
    dypopLayer.style.filter="Alpha()";
    dypopLayer.filters.Alpha.opacity=0;
    }
    else {
    if(o.dyclass!=null) popStyle=o.dyclass
    else popStyle="cPopText";
    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()",1);
    }
    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);
    }
    }
    document.onmouseover=showPopupText;
    //-->
    </script>
    <img src="http://www.blueidea.com/img/common/logo.gif" alt="blue!dea welcome you">




    <html>
    <head>
    <script Language="JavaScript">
    //***********默认设置定义.*********************
    tPopWait=50;//停留tWait豪秒后显示提示。
    tPopShow=5000;//显示tShow豪秒后关闭提示
    showPopStep=20;
    popOpacity=99;

    //***************内部变量定义*****************
    sPop=null;
    curShow=null;
    tFadeOut=null;
    tFadeIn=null;
    tFadeWaiting=null;

    document.write("<style type='text/css'id='defaultPopStyle'>");
    document.write(".cPopText {  background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;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='cPopText'></div>");


    function showPopupText(){
    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); 
       if(sPop==null || sPop=="") {
        dypopLayer.innerHTML="";
        dypopLayer.style.filter="Alpha()";
        dypopLayer.filters.Alpha.opacity=0; 
        }
       else {
        if(o.dyclass!=null) popStyle=o.dyclass
         else popStyle="cPopText";
        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()",1);
      }
      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);
      }
    }
    document.onmouseover=showPopupText;
    </script>
    </head>
    <BODY>
    <a href="#" title="我想请问斑竹?<br>作者:农民<br>发表于2002-6-3 20:17:16<br>最后跟贴:呵呵,是住我们......">我想请问斑竹?</a>

    接着前面的     
    </body>

    </html>




    附:硬回车字符串 
    &#13;

     

  • 相关阅读:
    c#语法基础(2)——运算符重载
    c#语法基础(1):关键字
    halcon与C#混合编程(一)打开一张图片
    vc中判断excel、word文件是否存在,删除excel文件
    officeView.obj : error LNK2001: unresolved external symbol __imp__PathFileExistsA@4
    VC单选按钮控件(Radio Button)用法
    FNN模糊神经网络——信息系统客户服务感知评价
    《MATLAB数据分析与挖掘实战》赠书活动
    RBF径向基神经网络——乳腺癌医学诊断建模
    基于关联规则的电子商务智能推荐服务--实例讲解
  • 原文地址:https://www.cnblogs.com/zhangsir/p/977785.html
Copyright © 2011-2022 走看看