problem with script for Image Thumbnail Viewer II

[Lovely813]

Hello there,

I am a beginner when it comes this, and I am having a problem just getting this code to work, as downloaded from your site.

I don't understand the "dynloadarea"'s as shown below:

<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:80px;height:225px"></div>
<div id="dynloadarea2" style="width:80px;height:200px"></div>

Is some of the code for use with the links, or is it ALL needed for just the photos that I want to use?, and it is just shown for reference?

I have tested it, and when I view it in iexplorer 6.0, on the right side of the page it shows links instead of the larger picture and says "image 1" and "image 2".

And what is the difference between " ="modifyimage('dynloadarea', 0)"> " and " ="modifyimage('dynloadarea', 1)"> "??

For the thumbnail on the left, will the code always be 'dynloadarea, 0'?

My other issue is that I can't tell if this section (as shown directly below) is for the LARGE image or the actual THUMBNAIL:

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["photo3.jpg", "http://www.google.com"]

Where in the code do you reference the large picture from the thumbnail?

I really need some help getting this to work .. I have 24 thumbnails that I would like to use on this page. Below is an example of how I'm trying to edit the code to work:

for the HEAD SECTION....

<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["W_TESTING_SITE/PJ1.jpg", ""]
dynimages[1]=["W_TESTING_SITE/PJ2.jpg", ""]</SCRIPT>
</HEAD>

for the BODY SECTION....

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%">
<a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="W_TESTING_SITE/PJ1T.jpg" width="78" height="66" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="W_TESTING_SITE/PJ2T.jpg" width="78" height="66" style="margin-bottom: 5px"></a><br>

Thanks very very much in advance for any help provided.

Have a great day!

[ddadmin]

Hi: To answer your questions:


Is some of the code for use with the links, or is it ALL needed for just the photos that I want to use?, and it is just shown for reference?

Well, the code:

<div id="dynloadarea" style="width:80px;height:225px"></div>
<div id="dynloadarea2" style="width:80px;height:200px"></div>

are the containers that will display the thumbnails within them, so they are required. Note that you can have only one container, by removing the second div.


And what is the difference between " ="modifyimage('dynloadarea', 0)"> " and " ="modifyimage('dynloadarea', 1)"> "?

The difference is that the first modifyimage('dynloadarea', 0) displays the image that's contained within the first array element, or in your case:

dynimages[0]=["W_TESTING_SITE/PJ1.jpg", ""]

whereby the second modifyimage('dynloadarea', 1)" will display the second array element:

dynimages[1]=["W_TESTING_SITE/PJ2.jpg", ""]

It seems you're very new to scripting in general. Please try studying the code until you see a pattern with how the numbers match up within the script. You don't need to understand coding to discern a pattern. :)

[Lovely813]

:D Thank you so much for the clarification on my previous posting. At least I understand what part of the code is doing what.

However, out of the previous questions I had, another popped up.

Can you place the div tag for dynloadarea anywhere on the page?

For instance, I have created a table 5 columns by 6 rows. I have 24 thumnails in the first 4 cols by 6 rows. There is a 5th column that is merged from row 1 through row 6. The first 4 pics in row 1 are the only ones that will show up in the dynloadarea at right. What actually is happening is that I've placed the div tag inside of a merged cell in the table (col5), but because it is after the the 4th reference to a thumbnail image in the actual code, somehow it's the reason the rest of the pics don't show in the right-hand column. They are AFTER the div tag.

I have an explanatory screenshot attached of what I'm trying to do, if it'll make more sense to you. I know what I want, but explaining how I got there is sometimes more confusing - and a picture is worth 1000 words, right? LOL

Thanks so much for your previous reply! Have a great evening!