lukasx123 — 2010-05-25T06:34:03-04:00 — #1
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.
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!!!
lukasx123 — 2010-05-25T11:15:44-04:00 — #2
Thanks for your reply Stevie!
paulob — 2010-05-25T11:20:01-04:00 — #3
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
stevie_d — 2010-05-25T08:17:18-04:00 — #4
The best example I've seen of something like that is http://meyerweb.com/eric/css/edge/popups/demo2.html
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.