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.
Here is the javascript that is called when onclick happens:
I have spent two whole days trying to achieve this, if anyone can be of assistance, that would greatly appreciated!
Thank you!!
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>
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;
}
I have spent two whole days trying to achieve this, if anyone can be of assistance, that would greatly appreciated!
Thank you!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Completely solved my issues, helped me put to rest the hassle I had accomplishing this, as a beginner using javascript!
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.
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.
ASKER
Thanks!!!