PDA

View Full Version : Image Thumbnail Viewer II Issue



rogercruz
08-14-2008, 04:45 PM
Hello everybody, Im trying to build a image viewer for my page, I found this one on this page:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

this is exactly what I need but please I also need to know how to add a second image, I mean when the user do the mouse on over, the script show a second image in other div in the same page not just one image like now, Im new with javascript so any help will be appreciated.

Thank you in advance

Roger

Dirt_Diver
08-14-2008, 05:16 PM
Do you have a website that we can see with your code?

Dirt_Diver
08-14-2008, 05:18 PM
Also you may want to check out this thread and see if her page can help you any...


http://www.dynamicdrive.com/forums/showthread.php?t=35518

rogercruz
08-14-2008, 05:46 PM
Thank you Dirt_Diver for answer, im going to post the code that Im using for this proyect.

This is my main html Befofeafter.html:

<td rowspan="2"><a href="images/x/yy.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="This is an example">Thumbnail Example 1</a>
<a href="images/x/xy.jpg" rel="enlargeimage::mouseover" rev="loadarea2" title="This is an example">Thumbnail Example 1</a>
</td>
<td><div id="loadarea" style="width: 500px; height: 300px;"></div></td>
</tr>
<tr>
<td><div id="loadarea2" style="width: 500px; height: 300px;"></div></td>
</tr>

the idea is when the user mouse on over the link Thumbnail Example 1 it will show the image yy.jpg in the div with id: loadarea but also show the image xy.jpg in the div tag with id: loadarea2, right now I have two a tags but I need to now how to do it with just one a tag.

Again thank you for your answer and any help that you can offer will be appreciated.

I checked the page that you send but that is no my problem

Thanks
Roger

Dirt_Diver
08-15-2008, 12:25 AM
Thank you Dirt_Diver for answer, im going to post the code that Im using for this proyect.

This is my main html Befofeafter.html:

<td rowspan="2"><a href="images/x/yy.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="This is an example">Thumbnail Example 1</a>
<a href="images/x/xy.jpg" rel="enlargeimage::mouseover" rev="loadarea2" title="This is an example">Thumbnail Example 1</a>
</td>
<td><div id="loadarea" style="width: 500px; height: 300px;"></div></td>
</tr>
<tr>
<td><div id="loadarea2" style="width: 500px; height: 300px;"></div></td>
</tr>

the idea is when the user mouse on over the link Thumbnail Example 1 it will show the image yy.jpg in the div with id: loadarea but also show the image xy.jpg in the div tag with id: loadarea2, right now I have two a tags but I need to now how to do it with just one a tag.

Again thank you for your answer and any help that you can offer will be appreciated.

I checked the page that you send but that is no my problem

Thanks
Roger


You should just be able to change this:

<td><div id="loadarea2" style="width: 500px; height: 300px;"></div></td>

to this:

<td><div id="loadarea" style="width: 500px; height: 300px;"></div></td>

If you want 2 different images to come up in the same <div>. That is what you are trying to do right?

rogercruz
08-15-2008, 03:17 PM
Thank you Dirt_Diver for answer.

Well what Im trying to do is load two different images in 2 diffentes DIV but using just one mouse onver or link.

do you have any idea of how to do it??

jscheuer1
08-15-2008, 04:56 PM
There is an older version of this script which I had modified to do a few extra things (some of which were incorporated into the newer version, but via completely different coding). This older version code is actually much easier to modify for your purposes:

http://home.comcast.net/~jscheuer1/side/files/thumb2.htm

Use your browser's 'view source' to get the code.

Now, on this version, a simple call would be:


<a href="#" onmouseover="modifyimage('dynloadarea', 1)">

where 'dynloadarea' refers to the target div and 1 to an array of images to draw from. To do two at once:


<a href="#" onmouseover="modifyimage('dynloadarea', 1);modifyimage('dynloadarea2', 2);">

rogercruz
08-15-2008, 06:02 PM
Thank you very much John for the code

Im going to implemented right now and I will let you know if it works

Roger

jscheuer1
08-15-2008, 08:48 PM
Looking over that old code, it could use some upgrades if it is really to be used with two target areas and two caption areas. So I went ahead and did it. The link is still the same.

rogercruz
08-19-2008, 02:47 PM
Thank you very much John for your help.. The script works perfectly..

PD: Sorry for take a long time in my reply, I has some problems with my internet conection.