Image Swapping on splash page

[ggmoss]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: I want my splash page to work like this one...

http://jonesandfarthing.com/pictures.html

My page is: www.amphi.com/~gmoss

I am an amateur web site developer (I teach 5th grade) who needs some help with my splash page. Obviously, my code is not complete, or correct.

Can you help me so that when you mouse over the small pics on the right side, you replace the image on the left, with a big version of the small image you are mousing over?

Is this a "div" or "loadarea" issue? I don't really understand these tags.

My code works fine on my computer, but when I upload it to the server, it doesn't run across the internet (from a server).

Can you tell me what is missing, or in the wrong place???

Thank you,

Gary

[auntnini]

Using so many <img src="images/pixel.gif" width="00" height="14"> spacers inTable cells makes it hard to spot your real images. And target="_top" is used in <frameset>s.

Might your problem be here?



<script type="text/javascript" src="thumbnailviewer2.js" defer="defer"> /*Is this right path to JS file?*/ </script>
or here

<td colspan=5>
<div id="loadarea" style="width: 455px">
<img src="images/09004.jpg" width="450" height="338">
</div>
<h2 />
<div id="loadarea2" style="width: 462px"></div>
</td>

The DD script at http://www.dynamicdrive.com/dynamicindex4/thumbnailviewer2.js has nice features, but looked very complicated to me.

Basically, for a simple version of this effect (e.g., http://www.auntnini.com/sketch/index.htm), what you could do is give your big image a name (such as "holder" or "sue") so you can talk to it. Then in link calling JavaScript
<a href="#nogo" onMouseOver="imgOn('img2')" onClick="document.images['holder'].src = gif2.src; return false">
surrounding clickable thumbnail or text</a>
change image source of big "holder" picture. In the mouseOver instance here, a <script> defined variables and pre-loaded images —
img1 = new Image(); img1.src = 'pic01.jpg'; img2 = new Image(); img2.src = 'pic02.jpg'; — and created the
function imgOn(imgName) {
if (document.images) {
document["holder"].src = eval(imgName + ".src"); }

[auntnini]

It does not seem you downloaded the JavaScript file that makes this work

The code references an external .js file, which you should download below: * thumbnailviewer2.js