Link to home
Start Free TrialLog in
Avatar of awalters
awalters

asked on

Change Image *and* Imagemap onClick

I want to build a page which shows an image of the earth. Clicking a button or link below the image changes it to one of two other images (for what it's worth, the three perspectives are: Americas; Asia/Australia; and Europe/Africa).

When a particular image is showing, an image map specific to that particular image should be in effect (so that clicking on different landmasses leads to different target URLs).

In other words, if image #2 is showing, the imagemap corresponding to images #1 and #3 should not be in effect.

This behavior must be accomplished with local Javascript, without any round trips to the server associated with changing the image. It also needs to work in both IE and Netscape browsers.

Full points go to working code!  
Thank you in advance!!
Avatar of a.marsh
a.marsh
Here you go:

<html>
<head>
<script language="javascript">
<!--

function showLayer(lName){
  if(document.all){
    document.all.layer1.style.visibility = "hidden";
    document.all.layer2.style.visibility = "hidden";
    document.all.layer3.style.visibility = "hidden";

    eval("document.all." + lName + ".style.visibility = 'visible';");
  }
  else if (document.layers){
    document.layer1.visibility = "hide";
    document.layer2.visibility = "hide";
    document.layer3.visibility = "hide";

    eval("document." + lName + ".visibility = 'show';");
  }
}

//-->
</script>
</head>
<body>

<map name="map1">
<area shape="rect" coords="0,0,40,40" href="#">
<area shape="rect" coords="90,90,100,100" href="#">
</map>

<map name="map2">
<area shape="rect" coords="0,50,50,100" href="#">
<area shape="rect" coords="75,0,100,25" href="#">
</map>

<map name="map3">
<area shape="rect" coords="40,40,100,100" href="#">
</map>

<div id="layer1" style="visibility: visible; position: absolute; top: 2px; left: 2px;">
<img src="img1.jpg" name="imgMap" border="0" usemap="#map1">
</div>
<div id="layer2" style="visibility: hidden; position: absolute; top: 2px; left: 2px;">
<img src="img2.jpg" name="imgMap" border="0" usemap="#map2">
</div>
<div id="layer3" style="visibility: hidden; position: absolute; top: 2px; left: 2px;">
<img src="img3.jpg" name="imgMap" border="0" usemap="#map3">
</div>
<div style="position: absolute; top: 150px; left: 2px;">
<a href="javascript: showLayer('layer1');">View One</a><br>
<a href="javascript: showLayer('layer2');">View Two</a><br>
<a href="javascript: showLayer('layer3');">View Three</a>
</div>
</body>
</html>


Works in IE and Netscape 4.x

For a working example (above but with actual images) check out:

http://www.btinternet.com/~ant.marsh/ee/imagemaptest.html

Ant
Avatar of awalters
awalters

ASKER

Ant:

Your code is clean, elegant, and works well ... on IE.

It appears you tried to support netscape with the dual approaches to hiding/showing layers in your showLayer function. However I'm not having success on Netscape. Any recommendations?

Thank you,
Avatar of awalters
awalters

ASKER

Ant:

Your code is clean, elegant, and works well ... on IE.

It appears you tried to support netscape with the dual approaches to hiding/showing layers in your showLayer function. However I'm not having success on Netscape. Any recommendations?

Thank you,
Avatar of awalters
awalters

ASKER

Here's a working example of what I want, but it only works in IE: www.xmission.com/~dgoddard/temp2.html

Any recommendations on Netscape-compabible approaches?

For what it's worth, you can replace every instance of 'visibility' with 'display' and every instance of 'hidden' with 'none' and it also works. Any opinions on the relative merits of these terms?


--------------------------------------------------------
<html>
<head>

<script language="javascript"><!--
     function showLayer(lName){
               if (document.all.layer1.style.visibility != "hidden") {
                       document.all.layer1.style.visibility = "hidden";
                       document.all.layer2.style.visibility = "";
               }
               else if (document.all.layer2.style.visibility != "hidden") {
                       document.all.layer2.style.visibility = "hidden";
                       document.all.layer3.style.visibility = "";
               }
               else if (document.all.layer3.style.visibility != "hidden") {
                       document.all.layer3.style.visibility = "hidden";
                       document.all.layer1.style.visibility = "";
               }
     }
//--></script>

</head><body>

<map name="map1">
     <area shape="rect" coords="0,0,40,40" href="#a">
     <area shape="rect" coords="90,90,100,100" href="#b">
</map>

<map name="map2">
     <area shape="rect" coords="0,50,50,100" href="#c">
     <area shape="rect" coords="75,0,100,25" href="#d">
</map>

<map name="map3">
     <area shape="rect" coords="40,40,100,100" href="#e">
</map>

<div id="layer1" style="display: ; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-w.jpg" name="imgMap" border="0" usemap="#map1"></div>

<div id="layer2" style="visibility:hidden; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-c.jpg" name="imgMap" border="0" usemap="#map2"></div>

<div id="layer3" style="visibility:hidden; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-e.jpg" name="imgMap" border="0" usemap="#map3"></div>


<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<a href="javascript: showLayer('layer1');"><b>>>></b></a></a>

</body>
</html>
Avatar of a.marsh
a.marsh
mmm...well my code worked in Netscape 4.7 on Windows....what version of Netscape are you using?

I know what to do to fix it, but I won't be able to adjust the code until I get home tonight - can you wait until then?

Basically you need to use the <layer> tag for Netscape - if you are talking about Netscape 6 then we need to use getElementByID

:o)

Ant
Avatar of awalters
awalters

ASKER

Here's a working example of what I want, but it only works in IE: www.xmission.com/~dgoddard/temp2.html

Any recommendations on Netscape-compabible approaches?

For what it's worth, you can replace every instance of 'visibility' with 'display' and every instance of 'hidden' with 'none' and it also works. Any opinions on the relative merits of these terms?


--------------------------------------------------------
<html>
<head>

<script language="javascript"><!--
     function showLayer(lName){
               if (document.all.layer1.style.visibility != "hidden") {
                       document.all.layer1.style.visibility = "hidden";
                       document.all.layer2.style.visibility = "";
               }
               else if (document.all.layer2.style.visibility != "hidden") {
                       document.all.layer2.style.visibility = "hidden";
                       document.all.layer3.style.visibility = "";
               }
               else if (document.all.layer3.style.visibility != "hidden") {
                       document.all.layer3.style.visibility = "hidden";
                       document.all.layer1.style.visibility = "";
               }
     }
//--></script>

</head><body>

<map name="map1">
     <area shape="rect" coords="0,0,40,40" href="#a">
     <area shape="rect" coords="90,90,100,100" href="#b">
</map>

<map name="map2">
     <area shape="rect" coords="0,50,50,100" href="#c">
     <area shape="rect" coords="75,0,100,25" href="#d">
</map>

<map name="map3">
     <area shape="rect" coords="40,40,100,100" href="#e">
</map>

<div id="layer1" style="display: ; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-w.jpg" name="imgMap" border="0" usemap="#map1"></div>

<div id="layer2" style="visibility:hidden; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-c.jpg" name="imgMap" border="0" usemap="#map2"></div>

<div id="layer3" style="visibility:hidden; position: absolute; top: 2px; left: 2px;">
     <img src="images/globe-e.jpg" name="imgMap" border="0" usemap="#map3"></div>


<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<a href="javascript: showLayer('layer1');"><b>>>></b></a></a>

</body>
</html>
Avatar of awalters
awalters

ASKER

[Jeez: sorry about the double comments from me. I hit refresh a few hours after submitting my comments to see if there were any responses, and my browser reposted my comment.]

I'm in the USA, so waiting until your night time isn't much of a wait for me! I really appreciate your help.

Basically, I need this to work on all IE4+ and Netscape 4+ browsers. In fact, ideally, I need to catch any case in which it doesn't work for a user (such as a version 3 browser user), and offer a static-page approach.

How many versions of the code would it require to support from version 3 browsers, up?

Thanks,

April
Avatar of a.marsh
a.marsh
(click the "reload question" link in the top right hand corner of the page instead of using your refresh button)

You would only need one copy of the page for all browsers that will support the layers - and if they don't you can simply redirect to a static HTML page.

I'll incorporate that requirement in to the code tonight.

:o)

Ant
ASKER CERTIFIED SOLUTION
Avatar of a.marsh
a.marsh
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of awalters
awalters

ASKER

Thank you! Your script was very instructive to me!!

Avatar of a.marsh
a.marsh
Glad to help. :o)

Thanks for the A grade!

Ant