Image Thumbnail Viewer II question

[rh-penguin]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:

In the example it shows the images and the text links. I inserted the code as it says and it works BUT it only shows the text links. How can i make the script to display the images without having to click on the text link?

Thanks!

[jscheuer1]

I think that you are missing something. The script doesn't automatically make images to hover over. Those are thumbnail images - smaller versions of the larger images that will display onmouseover. Say that in your dynimages array you have this:

dynimages[0]=["image_1.jpg", ""]

There are several ways to activate the display of this image in the target area. One of the ways to do that with a thumbnail is:

<img src="image_1_thumbnail.jpg" onmouseover="modifyimage('dynloadarea', 0)" style="cursor:pointer;">

But, you must have both the larger image_1.jpg and the smaller image_1_thumbnail.jpg available to the page.

[rh-penguin]

i inserted code like this:

<img src="image_1_thumbnail.jpg" onmouseover="modifyimage('dynloadarea', 0)" style="cursor:pointer;">

Now it shows the image but its not croped down(a thumbnail)
You said

But, you must have both the larger image_1.jpg and the smaller image_1_thumbnail.jpg available to the page.

What do you mean by that?

[jscheuer1]

i inserted code like this:

<img src="image_1_thumbnail.jpg" onmouseover="modifyimage('dynloadarea', 0)" style="cursor:pointer;">

Now it shows the image but its not croped down(a thumbnail)
You said

But, you must have both the larger image_1.jpg and the smaller image_1_thumbnail.jpg available to the page.

What do you mean by that?

I meant that you need to have two images:

image_1_thumbnail.jpg

and

image_1.jpg

These really can be any two images and named any two names (as long as you use those names in the appropriate places in your code). But, usually the thumbnail image is a copy of the larger image that you have made smaller in your image processing program (like photoshop, the gimp, or paintshop, etc.) by resizing it down and saving it with a different name.

In the case of this example, you would have saved a smaller version of:

image_1.jpg

as:

image_1_thumbnail.jpg

If you are still with me, another popular but less often way to make the thumbnail in your image program is to save a cropped version of the original image. As I say, these can really be any two images. If you put the name of one in the array and the name of the other in the call, then, as you hover over the one in the call, it will display the one in the array with which it is associated.

The one last bit is the part about 'available to the page'. This simply means that these images, whatever they are and whatever they are named, must be where you say that they are in the code. This is so that the page can find them when it needs them. If you were already seeing both images, you already have this part right.