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
395 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
  • 2
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
sjklein42 earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now