Preview images in the page

[kruxty]

I'm using dreamweaver MX, and i want a page with little pictures (thumbnails) and when the user passes with the mouse over them they will be previewed in any place larger!
What do you think about this?!
I tried to used different layers for every large image and then use the behaviors "show-hide" but there is no behavior onmouseout or something like this... so i can't hide the layers when the mouse exits the thumbnails.
Any ideia?

 

[Julianne]

This sounds like a disjointed rollover to me. You can create them in Fireworks, if you have that program. There's mention of them here:

http://www.macromedia.com/support/fireworks/ts/documents/disjoint_swapimage.htm

Otherwise, all you need to do is search for "disjointed rollover" on Google.

Having said that, if you're talking about showing larger images when someone rolls their mouse over a thumbnail that might be defeating the point of the thumbnail as you're still forcing the browser to load the larger image. I'd say it's better to display the thumbnail but have a regular link to the larger image - even as a pop-up window if you don't want the loser to leave the current page.

http://www.leevalleylions.co.uk

 

[kruxty]

I don't think that disjointed stuff is the thing that i'm looking for...
I have a table with some photos inside and i created the same number of labels as the number of photos.
This layers have the larger image.
What i did was a behavior such as "onmouseover" the thumbnail to show the respective layer.
The problem is that when i want to hide the layer i don't have a way to do it, since the only objects with behaviors are images...
How can i do this?

 

[TheConeHead]

How about forgetting about the layers... Just build a table with the thumbnails and the one large image... then when you rollover a thumbnal, simply set the source of the large image to the correct picture... for example the large image would be
<img name=&quot;largeImage&quot; src=clear.gif&quot;>

then a thumbnail would be:
<a href=&quot;#&quot; onmouseover=&quot;largeImage.src='picture1.jpg'&quot; onmouseout=&quot;largeImage.src='clear.gif'&quot;><img....></a>

would that work?

 

[kruxty]

But rollover images aren't just for the picture i.e., i have one image and when i pass the mouse over it the picture change?

 

[TheConeHead]

you can roll over one image and have another image change... what you need to do is name the image you want to change - <img name=&quot;largeImage&quot; src=clear.gif&quot;> here the image is named largeImage

then- around your thumbnail- put an <a> with the mouseover command onmouseover=&quot;largeImage.src='picture1.jpg'&quot; - if you look at this you will see that you are changing the source of largeImage - the give the command that when you rollout to reset largeImage to its original source onmouseout=&quot;largeImage.src='clear.gif'&quot;>

so it would all look like this:
<img name=&quot;largeImage&quot; src=clear.gif&quot;>

<a href=&quot;#&quot; onmouseover=&quot;largeImage.src='picture1.jpg'&quot; onmouseout=&quot;largeImage.src='clear.gif'&quot;><img....></a>

you would have one &quot;largeImage&quot; but multiple thumbnails all changing largeImage.src