将鼠标悬停在链接的缩略图上以显示更大的链接版本

Question

任何帮助将不胜感激！现在，当我将鼠标移到小的twitter和yelp图像（每个都是链接的）上时，它会显示更大的版本。但是，较大的版本需要与其较小的版本具有相同的链接。我怎样才能做到这一点？这就是我到目前为止......

＆＃13;

＆＃13;

function changeImage(event) {
  var targetElement = event.target;
  document.getElementById("main-image").src = targetElement.getAttribute("src");
}

＆＃13;

<a href="http://www.facebook.com" id="main-link">
  <img height="400" width="400" src="images/facebook.png" alt="big-image" id="main-image" />
</a>
<br/>
<div id="thumbnails" onmouseover="changeImage(event)">
  <a href="http://www.twitter.com">
    <img class="imgStyle" src="images/twitter.png" alt="twitter" />
  </a>
  <a href="http://www.yelp.com">
    <img class="imgStyle" src="images/yelp.png" alt="yelp" />
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将大图片parentNode href的属性设置为href的{​​{1}}值：

＆＃13;

＆＃13;

targetElement

＆＃13;

function changeImage(event) {
  var targetElement = event.target;
  var bigimg = document.getElementById("main-image");
  bigimg.src = targetElement.getAttribute("src");
  bigimg.parentNode.setAttribute('href', targetElement.parentNode.getAttribute('href'));
};

＆＃13;

＆＃13;

＆＃13;