How to access different image maps per image loaded, any help appreciated!

JavaScript
1

Hey guys, I am building a page where I will have five links and each one will open a different image inside a div, but i need this image to be an image map, I created the image maps and the links, but I am having great difficulty in getting the images to load their own map. I have tried a combination of javascript and moving the code around the html but i am completely stuck, any help here would be appreciated!

Here is the html code I have:

<div id="mainleft">	
		
			<ul> 
				<li><a href="Images/pantera.jpg" title="Pantera" width ="640" height ="427" alt="Pantera" usemap="#panteramap1" onclick="showPic(this); return false">Pantera</a></li>
				<li><a href="Images/pantera.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" usemap=""  alt="Map" />
			<a href="Images/pp.png" title="Map"  onclick="showPic(this);  return false">Map</a>

					<map id ="panteramap" name="panteramap">
					<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>

Here is the javascript that is doing the work:

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

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

So basically all I want is a way to change the map that is being used in the placeholder, I feel i am almost there, please if you can give me a clue! :slight_smile:

Thanks for your help!!

2

As i see, you are only setting “src” and “alt” properties to “mainImg” and leaving all other properties blanck, including the important “usemap=XXXX” that will specify which areas to use.

try the following

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

In my opinion you could “copy” the “link” object into the “mainImg” object.

Hope that helps.

See you :cool:

3

Hi there I have since originally posting this thread changed some of the code and what I have now is five links that open an image map, a div with thumbnails that when clicked on open in a div next to it. My problem is that I use visibility hidden for all the thumbnail divs and place them all on top of each other, then when clicking a link it sets the div to visible, and must be clicked again to toggle it to invisible, this is of course no use.

I want a way of having all the divs set to visibility hidden, and when one of the five links is clicked on then its set of thumbnails becomes visible and when another link is clicked its sets of thumbnails become visible but the previous set is automatically reset to visibility hidden again! I am racking my brains trying to get his done, any help is appreciated!

Here is the code I have for the html now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="description" content="Index page of Top five bands website" />
		<meta name="keywords" content="top, five, bands, pantera, rammstein, in flames, children of bodom, 69 eyes" />
		<meta name="language" content="en"/>
		<meta name="viewport" content="width=480" />
		<title>Page One</title>	
		<link rel="stylesheet" href="style.css" type="text/css" />
		<!--[if IE]> <link rel="STYLESHEET" type="text/css" href="master.css" title="Normal browsers"/> <![endif]-->
		<script type="text/javascript"  src="script.js"></script>
	</head>

	<body> 
	
		<div id="wrapper">
				
			<div id="header2" title="Home page banner graphic" >
				<h1 class="hidden">The  Bands</h1>
			</div>
			
			<div id="jukeboxbar">
				<div id="jukebox">
			<!--[if !IE]>-->	<OBJECT id="Player"type="application/x-ms-wmp"width="300" height="60" >
					
						<PARAM NAME="URL" VALUE="playlist.asx">
						<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
						<PARAM NAME="AutoStart" VALUE="False">
						<PARAM name="uiMode" value="Full">
						<PARAM name="PlayCount" value="9999">
					</OBJECT> <!--<![endif]--> 
					
					
					
						<OBJECT id="Player"type="application/x-ms-wmp"width="300" bgcolor="darkblue" height="60" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
					
						<PARAM NAME="URL" VALUE="playlist.asx">
						<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
						<PARAM NAME="AutoStart" VALUE="False">
						<PARAM name="uiMode" value="Full">
						<PARAM name="PlayCount" value="9999">
					</OBJECT>
				</div>
			</div>	
		
			<div id="navigation">
				<ul id="nav">
					<li><a href="index.html"><img border="0" title="Home" alt="Home" src="Images/11.jpg" name="b1" onmouseover="mouseOver1()"  onmouseout="mouseOut1()" /></a></li>
					<li><a href="map.html"><img border="0" title="Map" alt="Map" src="Images/33.jpg" name="b3" onmouseover="mouseOver3()" onmouseout="mouseOut3()" /></a></li>
					<li><a href="links.html"><img border="0" title="Links" alt="Links" src="Images/44.jpg" name="b4" onmouseover="mouseOver4()" onmouseout="mouseOut4()" /></a></li>
					<li><a href="join.html"><img border="0" title="Join" alt="Join" src="Images/55.jpg" name="b5" onmouseover="mouseOver5()" onmouseout="mouseOut5()" /></a></li>
				</ul>
			</div>

			<div id="main">
			<br/>
				<p>The Top Five Metal Bands, Galllery page is where you will see photos of the bands!</p>
						
				<p>Clicking on a band emblem below will open an image of the band members for that band! Hover the mouse over the individual members and you will see the band members name appear under the image!
				If you want more information, click on the band member within the image and a web page will open in a new window taking you to that members web page, where you will find lots of interesting information!</p>
						
				<p>Below the band members image is a set of thumbnails, hover the mouse over one for it to appear in the box next to the thumbnails, or click on it! If you want to see this image bigger, then click on the larger image on the right and it will open in a new window at a higher
				resolution!</p>
			</div>
						
				<div id="maintf">	
		
			
					<ul id="nav2">
						<li><a href="Images/pantera.jpg" title="Pantera"  alt="Pantera" onclick="showPic(this, '#panteramap'); showHideDiv(); return false"><img src="Images/pl.jpg" border="0"></a></li>
                        <li><a href="Images/rammstein.jpg"  title="Rammstein"  alt="Rammstein" onclick="showPic(this, '#rammsteinmap'); showHideDiv2();  return false"><img src="Images/rl.jpg" border="0"></a></li>
						<li><a href="Images/children of bodom.jpg" title="Children of Bodom" alt="Children of Bodom" onclick="showPic(this, '#cobmap'); return false"><img src="Images/cl.jpg" border="0"></a></li>
                        <li><a href="Images/in flames.jpg"  title="In Flames" alt="In Flames" onclick="showPic(this, '#flamesmap'); return false"><img src="Images/il.jpg" border="0"></a></li>
                        <li><a href="Images/machine head.jpg"  title="Machine Head"  alt="Machine Head" onclick="showPic(this, '#mhmap'); return false"><img src="Images/ml.jpg" border="0"></a></li>
                    </ul>

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

					<map id ="panteramap" name="panteramap">
					<area shape ="rect" coords ="0,0,140,426"
					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,426"
					onMouseOver="writeText('This is Phil Anselmo')"
					href ="http://www.philanselmo.com/" target ="_blank" alt="Phil Anselmo" />

					<area shape ="rect" coords ="278,0,433,426"
					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,426"
					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 ="rammsteinmap" name="rammsteinmap">
					<area shape ="rect" coords ="0,0,110,426"
					onMouseOver="writeText('This is Till Lindemann')"
					href ="http://en.wikipedia.org/wiki/Till_Lindemann" target ="_blank" title="Till Lindemann" alt="Till Lindemann" />

					<area shape ="rect" coords ="111,0,240,426"
					onMouseOver="writeText('This is Richard Kruspe')"
					href ="http://en.wikipedia.org/wiki/Richard_Z._Kruspe" target ="_blank" title="Richard Kruspe" alt="Richard Kruspe" />

					<area shape ="rect" coords ="241,0,330,426"
					onMouseOver="writeText('This is Paul Landers')"
					href ="http://en.wikipedia.org/wiki/Paul_Landers" target ="_blank" Title="Paul Landers" alt="Paul Landers" />
					
					<area shape ="rect" coords ="331,0,444,426"
					onMouseOver="writeText('This is Christoph Schneider')"
					href ="http://en.wikipedia.org/wiki/Christoph_Schneider" target ="_blank" title="Christoph Schneider" alt="Christoph Schneider" />
					
					<area shape ="rect" coords ="445,0,520,426"
					onMouseOver="writeText('This is Oliver Riedel')"
					href ="http://en.wikipedia.org/wiki/Oliver_Riedel" target ="_blank" title="Oliver Riedel" alt="Oliver Riedel" />
					
					<area shape ="rect" coords ="521,0,639,426"
					onMouseOver="writeText('This is Flake')"
					href ="http://en.wikipedia.org/wiki/Christian_Lorenz" target ="_blank" title="flake" alt="Flake" />
					</map> 

					<p id="desc"></p>
					
					<map id ="cobmap" name="cobmap">
					<area shape ="rect" coords ="0,0,146,426"
					onMouseOver="writeText('This is Jaska Raatikainen')"
					href ="http://en.wikipedia.org/wiki/Jaska_Raatikainen" target ="_blank" title="Jaska Raatikainen" alt="Jaska Raatikainen" />

					<area shape ="rect" coords ="147,0,230,426"
					onMouseOver="writeText('This is Janne Wirman')"
					href ="http://en.wikipedia.org/wiki/Janne_Wirman" target ="_blank" title="Janne Wirman" alt="Janne Wirman" />

					<area shape ="rect" coords ="231,0,360,426"
					onMouseOver="writeText('This is Alexi Laiho')"
					href ="http://en.wikipedia.org/wiki/Alexi_Laiho" target ="_blank" title="Alexi Laiho" alt="Alexi Laiho" />
					
					<area shape ="rect" coords ="361,0,460,426"
					onMouseOver="writeText('This is Henkka Seppälä ')"
					href ="http://en.wikipedia.org/wiki/Henkka_Sepp%C3%A4l%C3%A4" target ="_blank" title="Henkka Seppälä " alt="Henkka Seppälä " />
					
					<area shape ="rect" coords ="461,0,639,426"
					onMouseOver="writeText('This is Roope Latvala')"
					href ="http://en.wikipedia.org/wiki/Roope_Latvala" target ="_blank" title="Roope Latvala" alt="Roope Latvala" />
					</map> 

					<p id="desc"></p>
					
					<map id ="flamesmap" name="flamesmap">
					<area shape ="rect" coords ="0,0,110,426"
					onMouseOver="writeText('This is Peter Iwers')"
					href ="http://en.wikipedia.org/wiki/Peter_Iwers" target ="_blank" title="Peter Iwers" alt="Peter Iwers" />

					<area shape ="rect" coords ="111,0,265,426"
					onMouseOver="writeText('This is Daniel Svensson')"
					href ="http://en.wikipedia.org/wiki/Daniel_Svensson" target ="_blank" title="Daniel Svensson" alt="Daniel Svensson" />

					<area shape ="rect" coords ="266,0,373,426"
					onMouseOver="writeText('This is Anders Fridén')"
					href ="http://en.wikipedia.org/wiki/Anders_Frid%C3%A9n" target ="_blank" title="Anders Fridén" alt="Anders Fridén" />
					
					<area shape ="rect" coords ="374,0,500,426"
					onMouseOver="writeText('This is Björn Gelotte')"
					href ="http://en.wikipedia.org/wiki/Bj%C3%B6rn_Gelotte" target ="_blank" title="Björn Gelotte" alt="Björn Gelotte" />
					
					<area shape ="rect" coords ="501,0,639,426"
					onMouseOver="writeText('This is Jesper Strömblad')"
					href ="http://en.wikipedia.org/wiki/Jesper_Str%C3%B6mblad" target ="_blank" title="Jesper Strömblad" alt="Jesper Strömblad" />
					</map> 

					<p id="desc"></p>
					
					<map id ="mhmap" name="mhmap">
					<area shape ="rect" coords ="0,0,192,426"
					onMouseOver="writeText('This is Adam Duce')"
					href ="http://en.wikipedia.org/wiki/Adam_Duce" target ="_blank" title="Adam Duce" alt="Adam Duce" />

					<area shape ="rect" coords ="193,0,373,426"
					onMouseOver="writeText('This is Robb Flynn')"
					href ="http://en.wikipedia.org/wiki/Robert_Flynn" target ="_blank" title="Robb Flynn" alt="Robb Flynn" />

					<area shape ="rect" coords ="374,0,472,426"
					onMouseOver="writeText('This is Dave McClain')"
					href ="http://en.wikipedia.org/wiki/Dave_McClain_%28drummer%29" target ="_blank" title="Dave McClain" alt="Dave McClain" />
					
					<area shape ="rect" coords ="473,0,639,426"
					onMouseOver="writeText('This is Phil Demmel')"
					href ="http://en.wikipedia.org/wiki/Phil_Demmel_%28musician%29" target ="_blank" title="Phil Demmel" alt="Phil Demmel" />
					</map> 

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

				
				
				</div>
				<div id="maingallery">	
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/plarge1.jpg"  width="100" height="100" alt="Pantera1" title="Pantera1" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf1.jpg" border="0"></a>
					<a href="Images/plarge2.jpg" width="100" height="100" alt="Pantera2" title="Pantera2" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf2.jpg" border="0"></a>
					<a href="Images/plarge3.jpg" width="100" height="100" alt="Pantera3" title="Pantera3" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf3.jpg" border="0"></a>
					<a href="Images/plarge4.jpg" width="100" height="100" alt="Pantera4" title="Pantera4" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf4.jpg" border="0"></a>
					<a href="Images/plarge5.jpg" width="100" height="100" alt="Pantera5" title="Pantera5" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf5.jpg" border="0"></a>
					<a href="Images/plarge6.jpg" width="100" height="100" alt="Pantera6" title="Pantera6" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf6.jpg" border="0"></a>
				</div>
				
				<div id="mainleft2" class="divstyle">				
					<a href="Images/rlarge1.jpg"  width="100" height="100" alt="Rammstein1" title="Rammstein1" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf1.jpg" border="0"></a>
					<a href="Images/rlarge2.jpg" width="100" height="100" alt="Rammstein2" title="Rammstein2" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf2.jpg" border="0"></a>
					<a href="Images/rlarge3.jpg" width="100" height="100" alt="Rammstein3" title="Rammstein3" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf3.jpg" border="0"></a>
					<a href="Images/rlarge4.jpg" width="100" height="100" alt="Rammstein4" title="Rammstein4" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf4.jpg" border="0"></a>
					<a href="Images/rlarge5.jpg" width="100" height="100" alt="Rammstein5" title="Rammstein5" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf5.jpg" border="0"></a>
					<a href="Images/rlarge6.jpg" width="100" height="100" alt="Rammstein6" title="Rammstein6" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf6.jpg" border="0"></a>
				</div>
				
				<div id="mainright">				
					 <img id="placeholder2" src="Images/pp.png"  title="im" width ="400" height ="400"  />
				</div>
						
			</div>	

			
				
			<div id="footer">
				<p class="hidden"> Conformance: XHTML 1.0 Strict | Copyright © 2010 R.Leadingham.</p>	
			</div>
			
		</div>
	</body>
</html>

And the javascript that toggles the thumbs:

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

function showPic2(title)
{
        var mainImg = document.getElementById('placeholder2');
        mainImg.src = title.href;
}

function showHideDiv()
    {
        var divstyle = new String();
        divstyle = document.getElementById("mainleft").style.visibility;
        if(divstyle.toLowerCase()=="hidden" || divstyle == "")
        {
            document.getElementById("mainleft").style.visibility = "visible";
        }
        else
        {
            document.getElementById("mainleft").style.visibility = "hidden";
        }
    }
	
	function showHideDiv2()
    {
        var divstyle = new String();
        divstyle = document.getElementById("mainleft2").style.visibility;
        if(divstyle.toLowerCase()=="hidden" || divstyle == "")
        {
            document.getElementById("mainleft2").style.visibility = "visible";
        }
        else
        {
            document.getElementById("mainleft2").style.visibility = "hidden";
        }
    }

Note I only have the first two divs coded and existing in the hTML for now as I want to get this all working before I create the next three divs etc…

Thanks for any input!!!