In this case CSS is applicable. In example, use the following page:

<div id="thumbs">
            <a href="#img1"><img src="http://cdn.qhub.com/img/thumbs/design-1.jpg">< /a>
            <a href="#img2"><img src="http://cdn.qhub.com/img/thumbs/design-2.jpg"></a>
            <a href="#img3"><img src="http://cdn.qhub.com/img/thumbs/design-3.jpg"></a>
        </div>
        <div id="viewer">
            <div id="slide">
                <img id="img1" src="http://cdn.qhub.com/img/large/design-1.jpg">
                <img id="img2" src="http://cdn.qhub.com/img/large/design-2.jpg">
                <img id="img3" src="http://cdn.qhub.com/img/large/design-3.jpg">
            </div>

And the CSS:

#thumbs { width:110px; float:left; margin-right:31px; }
#thumbs a { margin-bottom:31px; display:block; }
#thumbs a img { border:none; }
#viewer { width:400px; height:400px; float:left; overflow:hidden; position:relative; border:1px solid #000; }
#slide { position:absolute; top:0; height:400px; width:1200px; }
#slide img {float:left; display:inline; }

The outer container (#viewer) is the width and height of a single image while the inner container (#slide) is the height of a single image but the width of all of the images combined. All in all when you you click one of the thumbnails the corresponding large image is displayed.