DOM 基础（三）

来源：互联网发布：网络对于大学生的影响编辑：程序博客网时间：2024/06/02 20:41

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function initLogin() {
            var divLogin = document.getElementById("divLogin");
            divLogin.style.display = "";
        }
        function closeLogin() {
            var divLogin = document.getElementById("divLogin");
            divLogin.style.display ="none";
        }
    </script>
</head>
<body onload="initPhotos();initUL();">
    <input type="button" value="登录" onclick="initLogin()"/><br />
    <div id="divLogin" style="width:250px;display:none;position:absolute;border-style:solid;border-color:Blue;border-width:2px;color:Black">
    <img src="images/cc.jpg" alt="关闭" style="float:right" onclick="closeLogin()" />
    <table id="tableLogin">
        <tr><td><label for="username">用户名：</label></td><td><input type="text" id="username"/></td></tr>
        <tr><td><label for="password">密 码：</label></td><td><input type="password" id="password"/></td></tr>
    </table>
    </div>
    <br />
    <script type="text/javascript">
        function showDetails() {
            var details = document.getElementById("details");
            details.style.display = "";
        }
        function closeButton() {
            var details = document.getElementById("divDetails");
            details.style.display = "none";
        }
        function initPhotos() {
            var data = {
                "images/mm_small.jpg": ["images/MM.jpeg", "MM", "175cm"],
                "images/00_small.jpg": ["images/00.jpg", "小甜甜", "165cm"],
                "images/01_small.jpg": ["images/01.jpg", "小玉玉", "175cm"],
                "images/02_small.jpg": ["images/02.jpg", "小猫猫", "185cm"]
            };
            for (var smallPhotoPath in data) {
                var smallImg = document.createElement("img");
                smallImg.src = smallPhotoPath;
                var detailData = data[smallPhotoPath];
                smallImg.setAttribute("imageSrc", detailData[0]);
                smallImg.setAttribute("detailHeight", detailData[2]);
                smallImg.setAttribute("detailName", detailData[1]);
                smallImg.alt = "MM";
                smallImg.onmouseover = function () {
                    document.getElementById("imgID").src = this.getAttribute("imageSrc");
                    document.getElementById("detailHeight").innerHTML = this.getAttribute("detailHeight");
                    document.getElementById("detailName").innerHTML = this.getAttribute("detailName");