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

[deucalion0]

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! :)

Thanks for your help!!

[Taywin]

If your image has not been loaded to the view (HTML), changing your placeholder image src won't do anything. If you want, you could put all those images on to the HTML but hide them (display:none;visibility:hidden). Then the placeholder should display the image when its src is changed.

[deucalion0]

Hey Taywin, thanks for the advice, is there any chance you could give me an example as I tried this and it didn't work, I understand how it would work, but my coding is not right!

Many thanks!

[Taywin]

From your given code, a really quick fix is to put a hidden div containing all other images that are not being show anywhere inside your 'body' tag. This way, the image should be loaded and ready to be used (the way you are doing) after your page is loaded. Your code is not incorrect but may need improvement.

<!-- the style will make this div to be invisible -->
<div style="display:none;visibility:hidden">
 <img src="Images/pantera.jpg">
</div>