PLEASE help: Need to make div appear when hovering over image

If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS.


I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute.



It must be so simple, but I'm waaay too stressed to get this to work. :[

Making changes to one element when you hover over another is not possible in CSS.

You need a client side scripting language like javascript.

It is possible using to get similar results using CSS sprites or (as I recently discovered when helping another poster here) spans.

Check out this thread and see if that might be what your after.
http://forums.devshed.com/css-help-...its-526833.html

Re-reading through your post I think javascript might be your only/best option.

Yeah.. I realized shortly after posting that I'm gunna have to end up using java, but that's okay with me. whatever will make this work, lol.

There was some helpful code on that thread, but it was discussing how to make an image appear - I need to have a hidden div that appears when an image is hovered over. Is it a similar code?

hey man thats my thread ur using essee..
i never approved learning rights!! lol jk!

im lurking in here still..
and hey i got that hover image load-delay sorted..
i simply made the link and hover images sit side by side in the one image.. ad did this..

i googled it obviously


hey echos.. im noob so don't hold me at gunpoint if im not right..
but maybe what this guy has done is what you are referring to..

You can easily get elements (a paragraph, or a div, for example) to appear when you hover over an image using css.

For example, place an image inside a relatively positioned div, then follow it with a paragraph. Set the paragraph to position: absolute (and position it just to the side of the image somewhere--eg, left: 96px; top: 15px). Also, set its display to none.

Then add this bit of css-- div: hover p, p:hover {display: block;}

That way, the paragraph will only display when you hover over the image (and it keeps displaying if you hover over the paragraph, too).

Only one problem: it don't work in IE6 (of course). For that, you need a JavaScript file such as csshover.htc.

Hope this is useful. I must add that I got this from Wyke-Smith's excellent css book "Stylin' for the Web" (pp128-132). I highly recommend this book for anyone wanting to get up to speed with css. Worth every cent.