Using image maps with text somehow (jquery?)

Question

First of all, I know image maps are kind of outdated, but they're not deprecated yet, and neat enough! I'm upgrading an existing and really cluttered image map, which is being used to show the work of different labs around the world in an area of chemistry research, and really just trying to tackle a coding/design problem for myself.

I'm wondering how I might go about coupling a rollover image fade (e.g. for individual countries) with text (i.e. captions rather than a URL with text tip). The map is rendered and setting coordinates is a simple enough matter, but I need some way to produce links on rollover, such as for [Researcher 1 | lab website],[Researcher 2 | lab website], etc. in particular for when they reside in the same place on the map.

All I can seem to see being done to make these interactive from other examples is alerts and single links for a region of an image map, but I'm sure it could be more versatile and I'm wondering if anyone knows how I could present text in this way?

Something that acts like this (all the labs expand out when you want to look more closely) would be great.

I'm sorry I can't be more constructive but the code is too dense for me to work out how that's done, and I get the feeling I might be missing some basic solution...?

Thanks

Answer 1

Group image maps to a div and then set it to hidden by default on hover to certain part set the group to visible by JavaScript