I’ve been scouring the forums for an instance where the following has been achieved through CSS, so far with no success…
What I’d like to set up is a navigation menu where each button changes a single remote image when hovered on.
I’ve seen examples that achieve results which are similar to what I want using multiple displaced images with absolute positioning set to hidden/visible, but these are not quite what I need.
*There should be a ‘default’ image in place that is visible at any time when the navigation isn’t being hovered over (this hasn’t been featured on any of the tutorials I found, all images have been hidden unless made visible by hovering the mouse over them).
*The image should reflect which of the navigation buttons is being hovered on, not a simple ‘on’ or ‘off’ state for each individual button.
*If there is any positioning used for the image, it shouldn’t be absolute as the webpage it’ll be implemented on is center aligned and its position on the page will vary if the screen resolution is altered, or if the browser window size is adjusted.
It’s all a bit of a tall order to satisfy criteria as exacting as this, I could probably achieve it using a multilayer code-driven Fireworks image (though I want to steer away from image-based navigation buttons) or Javascript (though I don’t want the navigation to be in any way dependant on Javascript).
If anyone out there know how this could be done and can let me know or point me to an example, I’d be very grateful!!!
As Stevie said if you want persistence and function then you need to add js to achieve this.
You can easily change an image as in this (very old) example and as Stevie also mentioned the image is placed absolutely in relation to a main parent and will therefore move with the page and stay in place.
It might help if you have a drawing of the kind of thing you are looking for so we can be more specific
Although there is no default image there, you could very easily put one in the right place and set z-index:-1, so that each of the ‘hover’ pictures goes over the top of it.
As for absolute positioning - that’s the only way you can get the images to appear in the right place. Remember that they’re absolutely positioned with respect to the parent element, rather than the page itself, so that may be of some help.
But all in all, it sounds like you might be better off using Javascript to swap the images. This doesn’t have to make the navigation inaccessible to people without JS - all it would mean is that they don’t get the hover, but as long as they can still click on the menu items it should be fine.
