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>

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;
}

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!!
deucalion0Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

sjklein42Commented:
Different approach - pass the name of the imagemap as the second argument to showPic instead of as an attribute in the HREF tag.  Seems to work. 

<script>


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

function showPic(link, mymap)
{
	var mainImg = document.getElementById('placeholder');
	mainImg.src = link.href;
	mainImg.title = link.title;
	mainImg.useMap = mymap;
}
</script>
<ul> 
				<li><a href="Images/pantera.jpg" title="Pantera" width ="640" height ="42" alt="Pantera" onclick="showPic(this, '#panteramap1'); return false">Pantera</a></li>
				<li><a href="Images/dime.jpg"  title="Pantera2" width ="640" height ="427" alt="Pantera" onclick="showPic(this, '#panteramap2'); return false">Pantera2</a></li>
			</ul>

			<img id="placeholder" src="Images/pp.png" title="Map" usemap="#blank" />

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
deucalion0Author Commented:
Thank you so very much! I really appreciate your help with that, that was perfect and seemed so simple, I just need to learn from this! Thanks again for helping me finally get this done!!

Thanks!!!
deucalion0Author Commented:
Completely solved my issues, helped me put to rest the hassle I had accomplishing this, as a beginner using javascript!
sjklein42Commented:
Here's an interesting aside.

Your original code works on IE but not on Firefox.

Firefox must be ignoring the non-standard attribute useMap on the href tag.  

Glad you got it working.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.