By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,350 Members | 1,490 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,350 IT Pros & Developers. It's quick & easy.

using CSS hover to display an image

P: 12

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 a{
} a:hover{
background:url(images/menuhover.gif) left no-repeat;

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

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??
Jun 8 '08 #1
Share this Question
Share on Google+
10 Replies

Expert 100+
P: 971
This will require the use of JavaScript, HTML/CSS alone will not be able to handle this. Moving post to JavaScript Forum.

Jun 8 '08 #2

Expert 5K+
P: 6,050
Create a function that takes the new images url. Then change the src attribute of the main image.
Jun 8 '08 #3

Expert 5K+
P: 7,435
Actually, CSS can do this quite well.
Jun 9 '08 #4

P: 12
Actually, CSS can do this quite well.
please do elaborate!
Jun 9 '08 #5

Expert 5K+
P: 7,435
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.
Jun 9 '08 #6

P: 12
this is as close as i've gotten so far.

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!

* 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?
Jun 9 '08 #7

Expert Mod 5K+
P: 5,390
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,
Jun 10 '08 #8

Expert 5K+
P: 7,435
Look here to see if this is what you want.
Jun 10 '08 #9

P: 12
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.

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.
Jun 11 '08 #10

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

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 . . .
Jun 11 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.