Image rollover highlighted in relevant section

[wushudirect]

Hi Folks,
We are currently re-vamping our site and I cannot work out how to do the following:
We have a menu system consisting of images which when the user rolls over them an alternative image is displayed with a little coloured icon on it - all standard stuff I know - what I want to do is to have the alternative image visible on the page to highlight the page that the visitor is currently on.
For example:

A link to the store pages;
storebutton1.png is the default image in the menu for the store page
storebutton2.png is the image displayed on rollover

I want storebutton2.png to be displayed instead of storebutton1.png when the visitor is on the store pages.

I hope I have explained it OK.
Cheers

[leehack]

Have you looked in the AUG or the KB?

[wushudirect]

Yup,
Been through both but all I can find is plenty info related to css links in the site section pages which is easy to do with a couple of block if's but I cant really transfer this to my requirements.

What I am really struggling with here is getting the image to highlight in the brochure pages so that for every brochure page clicked on the relevant image is set to the alternative [ rollover ] image.

Any help would be cool - hit a bit of a block here

[leehack]

How many instances of this are we talking about? It's pretty easy to have something change on screen according to the page which you are on, using CSS, but the more instances of it, the more it takes to setup.

I suspect you need to start using background images for your links defined in CSS and have a different bg image defined for the link on the page. It would usually be prudent to have both bg images merged into one large one and use bg positioning to position it. This is a common practice used on tabs for example, where you have a normal state, an active state and a hover state all in one graphic on the site.

Here is an example of a site doing this - http://www.clubhousegolf.co.uk/

Here is the graphic being used - http://www.clubhousegolf.co.uk/acatalog/tabs.gif

[fergusw]

If you want an image or background image to display on one page, and another image to be displayed instead on another type of page e.g. image.jpg on home page and image2.jpg on store pages then there are a couple of ways to do this.

You could use a condition to check which page type you are on and display the relevant image accordingly, or you could create 2 separate layouts which are selected for the relevant pages e.g. layout 1 for home page and layout 2 for other pages.
You could define the image src as a user defined variable and edit the image name at the page/section level you require.

There are many ways to do this and choosing can simply be a case of deciding what is best for your situation.
If I've read your original post correctly then perhaps the condition approach would be best.