熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

鼠標移動到圖片名上,顯示圖片的簡單實例

2013-11-15 12:00:57  來源: JSP教程 
鼠標移動到名(waitgif)上顯示圖片鼠標移開則不顯示圖片  

  鼠標移動到圖片名上,顯示圖片的簡單實例

  做法新建 ahtml 和 一個待顯示圖片 waitgif  放在同一目錄下
ahtml 代碼如下

復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN"
        "
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var path = /; //圖片相對路徑
        function show(obj) {
            var name = objinnerText;
            var sDiv = documentgetElementById(img_ + namesplit()[]);//文件名自己判斷
            if (!sDiv) {
                sDiv = documentcreateElement("DIV");
                sDivid = img_ + namesplit()[];
                sDivstyleposition = absolute;
                sDivstyletop = objoffsetTop + objoffsetWidth + px;
                sDivstyleleft = objoffsetLeft +objoffsetHeight + px;
                sDivstyleborder = px red solid;
                var img = documentcreateElement("img");
                imgsrc = path + name;
                sDivappendChild(img);
                documentbodyappendChild(sDiv);
            }
            sDivstyledisplay = block;
        }
        function f(obj) {
            var name = objinnerText;
            var sDiv = documentgetElementById(img_ + namesplit()[]);//文件名自己判斷
            if (sDiv) {
                sDivstyledisplay = none;
            }
        }
    </script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
    waitgif
</div>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20089.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.