Question

我需要将与5个不同图像相关联的链接动态传递给不同的图像。我已经创建了改变图像的功能，但这是我无法找到答案的最后一部分。到目前为止，这是我的代码：

<html>
<head><title>Revolving Pictures</title>
   <script type="text/javascript">          
        function changeBigPic(newPic){
            var big = document.getElementById("bigPic");
            big.src = newPic;
    //***How do I get the href of the 'album' images to 'bigPic'? I'm also trying to double the size of bigPic and using 200% makes the image enormous! Thanks in advance   
}
    </script>
</head>
    <body>
        <img name="bigPic" id="bigPic" src="album1.jpg" height="200%" width="200%"><br />

<A HREF="http://stevenseagal.com/"><img src="album1.jpg" id="segal" onmouseover="changeBigPic(document.getElementById('segal').src);">

&nbsp <A HREF="http://www.richardcheese.com/" target="_blank"><img src="album2.jpg" id="cheese" onmouseover="changeBigPic(document.getElementById('cheese').src);">

&nbsp <A HREF="http://www.myspace.com/etjusticepourtous" target="_blank"><img src="album3.jpg" id="justice" onmouseover="changeBigPic(document.getElementById('justice').src);">

&nbsp <A HREF="http://www.bestcoast.us/" target="_blank"><img src="album4.jpg" id="bestCoast" onmouseover="changeBigPic(document.getElementById('bestCoast').src);">

&nbsp <A HREF="http://www.van-halen.com/" target="_blank"><img src="album5.jpg"       id="vanHalen" onmouseover="changeBigPic(document.getElementById(this.id).src);">

 </body>
<html>

Answer 1

我认为最简单的方法是传递img对象而不仅仅是传递源。

将onmouseovers替换为onmouseover="changeBigPic(this);"，新的changeBigPic函数将类似于：

function changeBigPic(element){
    var big = document.getElementById("bigPic");
    big.src = element.src;

    // To get the href of the parent node:
    var href = element.parentNode.href;
}

传递与Image Onmouseover关联的链接

1 个答案: