Avatar of deucalion0
deucalion0
 asked on

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!!
JavaScriptCSSHTML

Avatar of undefined
Last Comment
sjklein42

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
sjklein42

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
deucalion0

ASKER
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!!!
deucalion0

ASKER
Completely solved my issues, helped me put to rest the hassle I had accomplishing this, as a beginner using javascript!
sjklein42

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.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes