javascript - 画像の src と href onclick を置き換えます

Question

画像を別の画像と交換し、新しい画像をライトボックスに表示したいこの小さなプロジェクトがあります。

以下のコードは次のように機能します。小さな画像の 1 つをクリックすると、大きな画像の画像 src が小さな画像の src に置き換えられます。ただし、大きな画像をクリックすると、ライトボックスにデフォルトの大きな画像が表示されます。

画像の src が交換されるのと同じ方法で、ハイパーリンクの href を交換する方法はありますか? それらは同じ値を取得する必要があります。

ジャバスクリプト：

<script type="text/javascript">
    function switch1(div) {
        if (document.getElementById('one')) {
            var option=['one','two','three'];
            for(var i=0; i<option.length; i++) {
                obj=document.getElementById(option[i]);
                obj.style.display=(option[i]==div)? "block" : "none";
            }
        }
    }
    function switchImg(i){
        document.images["main-image"].src = i;
    }
</script>

HTML/PHP:

<?php
    $image = 'main-image.jpg';
    $small_1 = 'small-image-1.jpg';
    $small_2 = 'small-image-2.jpg';
?>
<div id="holder">
<div class="large">
    <a href="<?php echo $image; ?>" rel="lightbox">
        <img id="main-image" src="<?php echo $image; ?>" />
    </a>
    <a class="original" onclick="switchImg('<?php echo $image; ?>')">Back to original image</a>
</div>
<div class="small">
    <a onclick="switchImg('<?php echo $small_1; ?>')">
        <img src="<?php echo $small_1; ?>" />
    </a>
    <a onclick="switchImg('<?php echo $small_2; ?>')">
        <img src="<?php echo $small_2; ?>" />
    </a>
</div>
</div>