Hi, I'm halfway through building a website. The page I'm trying to build is in essence a thumbnail gallery. I want a user to select a thumbnail and make a larger image off to the side change depending on which thumbnail has been selected. Doing disjointed rollovers is fine, but what I want is to make the currently clicked thumbnail to stay active and have a coloured image until a different thumbnail is clicked in which case the previous thumbnail reverts to a normal greyed out coloured image state and the recently clicked thumbnail becomes the currently coloured active one. Is it also possible to make the currently active thumbnail switch to a non link so that once you've clicked it once and it's active you can't click it again until you've clicked another thumbnail? Doing it in Flash used to be a doddle. I have a screenshot I can email so as to give an idea of what I'm doing. I'm new to web design, I'm not a coder and rely completely on Dreamweaver so I'm looking for a step by step tutorial if anyone knows of any? I thought I knew a way to do it but it turns out that I was completely wrong. Any help or point in the right direction would be much appreciated.

This is a surprisingly fiddly thing to do in HTML, and relies on the use of javascript and absolutely positioned elements.

Consider the following:

1. Put a thumbnail on the page.

2. Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

3. Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

4. With this image correctly positioned, set the CSS visibility of it to hidden.

5. Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown. Set the event for this behavior to "onclick".

Here's what happens:

* the thumbnail will do normal rollovers until it is clicked. At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring. This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

Now - if you have 6 of these thumbs, you will have to repeat this process 6 times. There is one final step:

Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

That sounds fantastic. So simple that ,I think, even I can understand it. Thanks very much indeed. If I get it working I'll send you the link to the finished site so you can see what you've helped create. Thanks again.

Thanks Murray! I tried this method too and it worked perfectly!! However there is just one flow and I am not sure if I missed something or not. So what I have done is I have used your method to create menu bars on the top of the site. And I wanted the rollover image once clicked to remain in the clicked position and also to direct to another page in the site. So it does remain clicked till I press another menu tab but I have to double click on the link before it directs me to another site. Can you tell me please what I have to do. I think i have pulled all my hair by now to figure this one out and it still doesn't work!

No, please don't. You can save the file with a test name, and upload it (with its dependent files) and then just take it down when the issue is resolved. That's really the very best way to get good help.

There's a commercial Dreamweaver Behavior that was designed to do this very thing. It's called FileTabs and you can try a demo at http://www.actionscafe.com/ft/. You can use any style of buttons, not just file tabs, and it works in a frameset or iFrame layout. Might be worth looking.

Note that the anchor tag is a null link. And the rollover is achieved not by swapping that image, but by revealing a previously hidden AP container that contains the rollover image AND the hyperlink. The first click reveals the rollover image and the second click actually goes to the hyperlink that is only present on the rollover. That's an incredibly awkward way of achieving what could otherwise by done by using a simple rollover with a link, e.g.,

You are moving from one page to another. What has happened on one page CANNOT affect what you see on the next page. If what you are wanting is this: when you click on a link to go to the next page, when that next page loads you see the button you clicked on as active, then your approach is not going to give you that.

Hi Murray, Your advice was spot on and worked a treat. The website I've designed is now live but still needs some work but it's mostly finished. Go to the fighters page to see exactly what you helped create (the sticky roll over thumbnail images).

Awsome! Great that it worked for you. Thats exactly what I wanted to do but still haven't figured out how. What did you do that the red shade remains on a tab until you click on another tab? I would still love to do that effect on my site but I still haven't been abple to. Murray was patient enough to help me out but I think because I am still new with the scripting I couldn't figure it out.

Then add the below css styles to your existing css styles: (BUT see all those %20 in the file names - they are spaces which you should remove from file names...I use underscores....Side_Tab_Permacharts.png

You make the rollovers persistent in exactly the way I have already described (replace the word "thumbnail" with "tab image"-

1. Put a thumbnail on the page.

2. Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

3. Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

4. With this image correctly positioned, set the CSS visibility of it to hidden.

5. Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown. Set the event for this behavior to "onclick".

Here's what happens:

* the thumbnail will do normal rollovers until it is clicked. At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring. This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

Now - if you have 6 of these thumbs, you will have to repeat this process 6 times. There is one final step:

Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

If there is something in there you don't understand or can't make work, then mention it specifically in a reply post, please.

You make the rollovers persistent in exactly the way I have already described (replace the word "thumbnail" with "tab image"-

1. Put a thumbnail on the page.

2. Apply a normal image swap to it - onmouseover swap in the rollover image, and onmouseout revert the image.

3. Place another instance of the thumbnail image on the page, and use CSS to give it position:absolute, with top/left offsets that exactly superimpose this image over its duplicate placed in #1 above.

4. With this image correctly positioned, set the CSS visibility of it to hidden.

5. Again select the original thumbnail and add another behavior to it - Show-Hide elements, and pick the absolutely positioned duplicate to be shown. Set the event for this behavior to "onclick".

Here's what happens:

* the thumbnail will do normal rollovers until it is clicked. At that point the duplicate, superimposed (non-linked) image becomes visible, masking the original thumb image thereby blocking the rollover from occurring. This new image will remail visible until it is finally hidden again, at which point the original thumb will again begin to show the rollover.

Now - if you have 6 of these thumbs, you will have to repeat this process 6 times. There is one final step:

Each onclick behavior must show the hidden duplicate image for this thumb AND IT MUST ALSO HIDE ALL OTHER DUPLICATES, so if there are 6 thumbs, each onclick behavior will have to show one image and hide 5 others.

If there is something in there you don't understand or can't make work, then mention it specifically in a reply post, please.

Aint that a bit overkill with the javascript......as I read it the OP only wants a persistant page marker when going from page to page?

Ok, so i tried doing it with the easier method, with the javascipt. But looks like I might not be putting the code in the wrong position. If you could check for me that would be great. Below it is with the javascript codes already inco-operated. I have made the scipt bold so you canknow exactly where I added it.