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?

Thanks.

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

Code:
<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="http://www.denton-chamber.org" alt="Regiter Now" />
    <area shape="rect" coords="1052,719,1259,755" href="http://www.cupboardnaturalfoods.com" alt="Cupboard Natural Foods" />
	<area shape="rect" coords="945,492,1157,517" href="http://www.denton-chamber.org" alt="Register Now" />
  	<area shape="rect" coords="911,642,1007,699" href="http://www.cityofdenton.com/" alt="City of Denton" />
  	<area shape="rect" coords="1031,642,1102,704" href="http://www.denton-chamber.org/" alt="Denton Chamber of Commerce" />
  	<area shape="rect" coords="1118,643,1228,703" href="http://www.unt.edu/" 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" />
  </map>
</div>

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.

Code:
<STYLE type="text/css">
#content {
  width: 1275px;
  margin-left: auto;
  margin-right: auto;
}
.pic {
	position:relative;
	z-index:0;
}
.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;
}

	
</STYLE>