Solved

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

Posted on 2011-03-09
4
401 Views
Last Modified: 2013-11-11
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!!
0
Comment
Question by:deucalion0
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
sjklein42 earned 500 total points
ID: 35089379
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

0
 

Author Comment

by:deucalion0
ID: 35089416
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!!!
0
 

Author Closing Comment

by:deucalion0
ID: 35089429
Completely solved my issues, helped me put to rest the hassle I had accomplishing this, as a beginner using javascript!
0
 
LVL 16

Expert Comment

by:sjklein42
ID: 35089471
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.

0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question