JQuery onMouseOver изменить SRC в конкретный идентификатор

Имейте эту разметку для продуктов на странице категории моего интернет-магазина...

Product A
<div id="lateral-thumbnails" class="product-col-left">
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/001.jpg" alt="" />
    </a>
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/002.jpg" alt="" />
    </a>
     ...
</div>

<div id="product-img-box" class="product-img-box">
    <a id="mainframeimage-AAA" href="AAA url">
        <img src="/images/AAA.jpg" alt="" />
    </a>
</div>

Product B
<div id="lateral-thumbnails" class="product-col-left">
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/901.jpg" alt="" />
    </a>
    <a class="fancybox lateral-gallery" onMouseOver="return showPic(this);">
        <img src="/images/902.jpg" alt="" />
    </a>
     ...
</div>

<div id="product-img-box" class="product-img-box">
    <a id="mainframeimage-BBB" href="BBB url">
        <img src="/images/BBB.jpg" alt="" />
    </a>
</div>  

<script type="text/javascript">
    function showPic (thumbs) {
        if (document.getElementById) {

            jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeOut(250);

            setTimeout(function() {
                document.getElementById('mainframeimage<?php echo $_product->getId();?>').src = thumbs.href; 
                jQuery('#mainframeimage<?php echo $_product->getId();?>').fadeIn(250);
            }, 250);

            return false; 

        } else {
            return true;
        }
    }
</script>

С помощью этого кода javascript я могу изменить превью src с эффектом затухания, чтобы обработать LAST mainframeimage ID.

Как я могу сказать на языке javascript, что изображения 001.jpg и 002.jpg будут помещены в mainframeimage-AAA и изображения 901.jpg и 902.jpg в mainframeimage-BBB?

С уважением