使用Javascript在href中更改图像

Question

我有以下代码控制图片库here

<script type="text/javascript">
         function swap(image) {
             document.getElementById("maingallery").src = image.href;
             document.getElementById("zoomimage").href = image.href;
         }
</script>

<?php 

$images = get_field('gallery');

if( $images ):
   $image_1 = $images[0]; ?>
   <div class="zoomgallery">
   <a id="zoomimage" href="<?php echo $images[0]['sizes']['large']; ?>" class="MagicZoomPlus"><img id="maingallery" src="<?php echo $images[0]['sizes']['medium']; ?>"/></a>
   <div class="MagicScroll">
      <?php foreach( $images as $image ): ?>
                <a href="<?php echo $image['sizes']['medium']; ?>" onclick="swap(this); return false;">
                     <img src="<?php echo $image['sizes']['widgetthumb']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
        <?php endforeach; ?>
    </div>
    </div>
<?php endif; ?>

当您单击缩略图时，javascript可以切换“maingallery”图像，但无法切换“zoomimage”href，这是控制鼠标悬停在“maingallery”图像上时显示的图像。因此，无论您选择悬停在哪个图像上，缩放都只显示第一个图像。我的javascript出了什么问题？