html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>image gallery</title>
    <link rel="Stylesheet" href="styles/layout.css" type="text/css"/>
    <script type="text/javascript">
        function showPic(whichpic)
        {
            imgSource = whichpic.getAttribute("href");
            placeholder = document.getElementById("placeholder");
            placeholder.setAttribute("src",imgSource);
            
            var text = whichpic.getAttribute("title");
            var description = document.getElementById("description");
            description.firstChild.nodeValue = text;
            //alert(description.childNodes[0].nodeValue);
        }
        function countBodyChildren()
        {
            var body_element = document.getElementsByTagName("body")[0];
            nodeLength = body_element.childNodes.length;
            alert(body_element.nodeType);
//            for(i=0;i<nodeLength;i++)
//            {
//                alert(body_element.childNodes[i].nodeType);
//            }
        }
        //window.onload = countBodyChildren;
    </script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="img/1.jpg" title="A fireworks display" onclick="return false;showPic(this);">Fireworks</a>
        </li>
        <li>
            <a href="img/2.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="img/3.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="img/4.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a>
        </li>
    </ul><br /><br />
    <img id="placeholder" src="img/1.jpg" alt="my image gallery" width="400px" height="300px" />
    <p id="description">Choose an image.</p>
    
</body>
</html>

解决方案 »

  1.   

    建议楼主不要用用a标签 这里浏览器是不同的楼主可以用别的标签 然后给个别的属性记录 图片地址
    同事为了能点击 用css控制指针样式就是
      

  2.   

    <head runat="server">
        <title>image gallery</title>
        <link rel="Stylesheet" href="styles/layout.css" type="text/css"/>
        <script type="text/javascript">
            function showPic(whichpic,e)
            {
                imgSource = whichpic.getAttribute("href");
                placeholder = document.getElementById("placeholder");
                placeholder.setAttribute("src",imgSource);
                
                var text = whichpic.getAttribute("title");
                var description = document.getElementById("description");
                description.firstChild.nodeValue = text;
    e = e || window.event;
    if (e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }
                //alert(description.childNodes[0].nodeValue);
            }
            function countBodyChildren()
            {
                var body_element = document.getElementsByTagName("body")[0];
                nodeLength = body_element.childNodes.length;
                alert(body_element.nodeType);
    //            for(i=0;i<nodeLength;i++)
    //            {
    //                alert(body_element.childNodes[i].nodeType);
    //            }
            }
            //window.onload = countBodyChildren;
        </script>
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul>
            <li>
                <a href="img/1.jpg" title="A fireworks display" onclick="return false;showPic(this);">Fireworks</a>
            </li>
            <li>
                <a href="img/2.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a>
            </li>
            <li>
                <a href="img/3.jpg" title="A red,red rose" onclick="showPic(this,event);return false;">Rose</a>
            </li>
            <li>
                <a href="img/4.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a>
            </li>
        </ul><br /><br />
        <img id="placeholder" src="img/1.jpg" alt="my image gallery" width="400px" height="300px" />
        <p id="description">Choose an image.</p>
        
    </body>
    </html>
    阻止默认事件? 楼主试试
      

  3.   

    2楼的朋友。我照你的方法试了没有用啊。e = e || window.event; 这句什么意思?。1楼说的还有什么标签举个例子好吗。谢谢二位!我主要想弄懂怎么回事。
      

  4.   

    e = e || window.event为了是兼容浏览器,window.event是IE的,其他的基本上都是e
      

  5.   

    return false 放到 showPic(this)后面 我看你第一个连接是放到前面了
      

  6.   

    试了看看的。我用IE自动的开发工具测试怎么会报错。“placeholder = document.getElementById("placeholder");”说这句对象不支持次属性或方法。但是FF中的firebug没有错误
      

  7.   

    本帖最后由 net_lover 于 2012-04-05 17:11:09 编辑
      

  8.   

    有些关键字不要使用为好,参见
    http://blog.csdn.net/net_lover/article/details/7162136
      

  9.   

    var placeholder = document.getElementById("placeholder");//加个var就可以了
      

  10.   

    对的。请问下为什么啊?【孟子E章】说了改关键字也可以。我把id="placeholders"然后获取对象的时候也改成placeholders 就对了。不知道为什么。非常感谢【孟子E章】大哥和(Whenerey)。我想知道为什么。