使用Javascript在href中更改图像

I have the following code controlling the image gallery 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; ?>

The javascript works to switch the "maingallery" image when you click on the thumbnail, but does not work to switch the "zoomimage" href, which is what controls the image shown when you hover over the "maingallery" image. Therefore, whichever image you choose to hover over, the zoom only shows the first image. What's wrong with my javascript?