using CSS hover to display an image

[dandyliondancer]

hola

i figured out how to make an image appear next to a link when hovering by displaying it as a block and then using background:url

div.menu a{
display:block;
}


div.menu a:hover{
background:url( images/menuhover.gif) left no-repeat;
}

(ps here is a link if you want to see it in action . . . )

http://ferncreekdesign.spiritserver.org

now what i would like to do is to have a series of thumbnails on the edge of the page and use the hover property to display an image in the center of the page, which will change as i hover over the various thumbnails.

i said i would LIKE . . . is this possible??

[eWish]

This will require the use of JavaScript, HTML/CSS alone will not be able to handle this. Moving post to JavaScript Forum.

--Kevin

[Markus]

Create a function that takes the new images url. Then change the src attribute of the main image.

[drhowarddrfine]

Actually, CSS can do this quite well.

[dandyliondancer]

Actually, CSS can do this quite well.

please do elaborate!

[drhowarddrfine]

I didn't have an example handy and I can't get my head into it right now. You pretty much do what you already did with the butterfly. Just make it appear where you want on the page. If it needs to overlap existing elements, use z-index. It's easy and will work in all the modern browsers which, of course, leaves IE out of it. I don't recall IE being too much of a struggle though.

[dandyliondancer]

a little progress, but not quite there

this is as close as i've gotten so far.

http://spiritserver.org/rochestersustainablelandscaping/page01.html

obviously it isn't working quite right.

i know i can do this with javascript, but i would like to see if its possible with CSS. any pointers would be very welcome!

notes:
* i wanted to do the hover tags inline, but it seems that that is not acceptable
* as soon as the second thumbnail loads, it seems to change the hover properties for the first one.
* displaying the image as a background block pushes all following elements to the bottom. is there a way to avoid this?
(apparently position must be set as "fixed" to function in Firefox (??))

ps - mod - can we move this back to HTML/CSS forum?

[gits]

since you don't want to use javascript i think it's ok to move it back to the HTML/CSS forum ... :)

good luck and kind regards,
MOD

[drhowarddrfine]

Look here to see if this is what you want.

[dandyliondancer]

yeah, thanks doc, that is exactly what i had in mind. i thought it was possible, just couldnt quite figure the implementation.

i am not really a javascript guy, as you can see from the javascript solution i came up with here.

http://spiritserver.org/rochestersustainablelandscaping/gallery01.html?001

i thought it was cool because it used so little code, and i had never seen that solution before, but then its implementation is really choppy and retarded (now i know why i had never seen it . . . )

i will study the css and make a new page, and maybe brush on my javascript too. thanks to everyone for their help.

[dandyliondancer]

thought you might like to see the finished product (I'll still be adding another image list to the right side of the page)

http://spiritserver.org/rochestersustainablelandscaping/cssgallery01.html

sooo much better than my other attempts, and no script!
thanks again

ps. if anyone has browser issues with the page, please let me know . . .