So, I'm designing a site for the city of Denton for a green business conference, the entire site is one page that is simply a picture. They wanted different elements of the picture to link to other pages around the www. So that's what I did, and now they would like bio info on authors to pop up on a few of the links, I could do this with a normal <a> link however the coding is different when it's a link in an image map. Does anyone know if this is still possible to do?


Below is some example of the code I am trying to work with

<div id="content"><img src="gbc.gif" alt="2011 Green Business Conference - City of Denton" usemap="#GreenBusinessConference" border="0"
  <map name="GreenBusinessConference" id="GreenBusinessConference">
    <area shape="rect" coords="30,97,303,155" href="" alt="Regiter Now" />
    <area shape="rect" coords="1052,719,1259,755" href="" alt="Cupboard Natural Foods" />
	<area shape="rect" coords="945,492,1157,517" href="" alt="Register Now" />
  	<area shape="rect" coords="911,642,1007,699" href="" alt="City of Denton" />
  	<area shape="rect" coords="1031,642,1102,704" href="" alt="Denton Chamber of Commerce" />
  	<area shape="rect" coords="1118,643,1228,703" href="" alt="The University of North Texas" />
 	<area shape="rect" coords="900,108,1209,169" href="#" alt="Evaluating Products: Sustainable or GreenWashed?"/>
  	<area shape="rect" coords="901,202,1147,240" href="#" alt="the Efficient Workplace" />
 	<area shape="rect" coords="902,267,1147,347" href="#" alt="Keynote: Straegies for Reaching the Green Consumer" />
 	<area shape="rect" coords="900,378,1147,440" href="#" alt="Government Resources for Business" />

And my CSS (The css is for how I originally planned on making the image hover appear, however it is now void since I'm not using regular <a> links.

<STYLE type="text/css">
#content {
  width: 1275px;
  margin-left: auto;
  margin-right: auto;
.pic {
.pic:hover {
	background-color: transparent;
	z-index: 50;
.pic span {
	position: absolute;
	background-color: white;
	padding: 5px;
	left: -1000px;
	border: 1px solid black;
	visibility: hidden;
	color: black;
	text-decoration: none;
.pic spam img {
	border-width: 0;
	padding: 2px;
.pic:hover span {
	position: absolute;
	visibility: visible;
	top: -50px;
	left: -400px;