Question : One image, mapped to multiple links to show/hide text below

Hopefully this is pretty simple, but I've tried almost everything to make this work for my wedding website and get stumped each time.

I have one rectangular image divided into 12 squares that I have mapped (they go nowhere right now).  Each square as a member of my bridal party.  I have text below the square with instructions that the user can click on any of the 12 squares to reveal why we selected that bridal member.

I basically want to have the image with default text below.  If the user selects one of the 12 squares, the default text dissapears and the text for that particular square appears.  If the user selects another square then the previous text disappears to display the text for the selected image.

If someone could just point me in the right direction, I can certainly fill the rest out myself.  Thank you so much.

Answer : One image, mapped to multiple links to show/hide text below

If you wanted to go the javascript and CSS route, you'd be looking to absolutely set the position of 12 divs and change their visibility onmouseover/onmouseout or onclick.  I've always preferred the innerHTML route as it feels cleaner to me, but I know that everybody has their own style and preference.
Random Solutions  
 
programming4us programming4us