Want to Hover over part of an image and text appears next to image

Hi I want to be able to hover over parts of an image that will show a different description (depending on where you hover) in the same place on the web page and also allow the user to then go and click on the text for more info. Can this be done and if anyone could point me to a tutorial or explain it, i would be most happy.


You can do the first part with pure CSS here:

The second part, actually being able to click on the text that appears, you’d need Javascript.

You won’t necessarily need Javascript for the clicking-- the area can be an anchor. In fact, anchors are preferred simply because then even IE6 can make something happen on :hover.

I use popup texts in my forms a lot. The problem is actually that sometimes people accidentally click on the text-- without browser caching or a session, getting back to the form could make them lose everything they’d filled in so far. I temporarily solved it with target=“_blank” which did force me to use a crap doctype.

The code is more complicated than it needs to be, but this one here is very cool: http://green-beast.com/experiments/css_map_pop.php