zoukankan      html  css  js  c++  java
  • 带图片的鼠标悬停提示

    • 鼠标放到图片后,会出现悬停提示,悬停提示内可以是图片,从代码实现思路上来说,本代码很有创意,代码很精简,如果原图你强制变为小图的话,那么当鼠标放上去以后,会放大出大图,实际上加载的是同一张图片,因此这决定了这款代码在加载速度上有些影响。

    <a href="http://www.codefans.net/jscss/code/959.shtml">http://www.codefans.net/jscss/code/959.shtml</a>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>带图片的悬停提示</title>
    <script language="javascript">
    function showPic(sUrl){
    var x,y;
    x = event.clientX;
    y = event.clientY;
    document.getElementById("Layer1").style.left = x;
    document.getElementById("Layer1").style.top = y;
    document.getElementById("Layer1").innerHTML = "<img src="" + sUrl + "">";
    document.getElementById("Layer1").style.display = "block";
    }
    function hiddenPic(){
    document.getElementById("Layer1").innerHTML = "";
    document.getElementById("Layer1").style.display = "none";
    }
    </script>
    </head>

    <body>
    <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div>
    <img src="/images/logo.gif" width="100" height="36" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" />
    <p></p>
    </body>
    </html>

  • 相关阅读:
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
    Learn Prolog Now 翻译
  • 原文地址:https://www.cnblogs.com/huideng/p/4505261.html
Copyright © 2011-2022 走看看