Please help me figure out how to use multiple image maps, one for each image loaded by clicking a link. Thanks!

Hey guys how are you? I have been trying to build a web page where there will be five links, each will open an image in a container, one at a time. Each image will have its own image map and this must be loaded when the image is loaded. I am having difficulty setting the image map but I can set everything else per image i.e title, alt and size etc...

Here is the code I have in the HTML, I only have two images and image maps so far for testing, there will eventually be five, if I can get this to work.

<ul> 
				<li><a href="Images/pantera.jpg" title="Pantera" width ="640" height ="42" alt="Pantera" usemap="#panteramap1" onclick="showPic(this); return false">Pantera</a></li>
				<li><a href="Images/dime.jpg"  title="Pantera2" width ="640" height ="427" alt="Pantera" usemap="#panteramap2" onclick="showPic(this); return false">Pantera2</a></li>
			</ul>

			<img id="placeholder" src="Images/pp.png" title="Map" usemap="#blank" />
		
					<map id ="panteramap1" name="panteramap1">
					<area shape ="rect" coords ="0,0,140,423"
					onMouseOver="writeText('This is VInnie Paul')"
					href ="http://en.wikipedia.org/wiki/Vinnie_Paul" target ="_blank" alt="Vinnie Paul" />

					<area shape ="rect" coords ="141,0,277,423"
					onMouseOver="writeText('This is Phil Anselmo')"
					href ="http://www.philanselmo.com/" target ="_blank" alt="Phil Anselmo" />

					<area shape ="rect" coords ="278,0,433,423"
					onMouseOver="writeText('This Rex Brown')"
					href ="http://en.wikipedia.org/wiki/Rex_Brown" target ="_blank" alt="Rex Brown" />
					
					<area shape ="rect" coords ="434,0,630,423"
					onMouseOver="writeText('This is Dimebag Darrel')"
					href ="http://en.wikipedia.org/wiki/Dimebag_Darrell" target ="_blank" alt="Dimebag Darrel" />
					</map> 

					<p id="desc"></p>
					
					
					<map id ="Panteramap2" name="Panteramap2">
					<area shape ="rect" coords ="0,0,140,423"
					onMouseOver="writeText('This is map2')"
					href ="http://en.wikipedia.org/wiki/Vinnie_Paul" target ="_blank" alt="Vinnie Paul" />

					<area shape ="rect" coords ="141,0,277,423"
					onMouseOver="writeText('This is map2 again')"
					href ="http://www.philanselmo.com/" target ="_blank" alt="Phil Anselmo" />

					<area shape ="rect" coords ="278,0,433,423"
					onMouseOver="writeText('This is map2 still')"
					href ="http://en.wikipedia.org/wiki/Rex_Brown" target ="_blank" alt="Rex Brown" />
					
					<area shape ="rect" coords ="434,0,630,423"
					onMouseOver="writeText('This is map2 forever')"
					href ="http://en.wikipedia.org/wiki/Dimebag_Darrell" target ="_blank" alt="Dimebag Darrel" />
					</map> 

					<p id="desc"></p>

Select all Open in new window

Here is the javascript that is called when onclick happens:

function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}

function showPic(link)
{
	var mainImg = document.getElementById('placeholder');
	mainImg.src = link.href;
	mainImg.title = link.title;
	mainImg.usemap = link.usemap;
}

Select all Open in new window

I have spent two whole days trying to achieve this, if anyone can be of assistance, that would greatly appreciated!

Thank you!!