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

鼠標移動到名(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