Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 371
  • Last Modified:

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!!
0
awalters
Asked:
awalters
  • 6
  • 5
1 Solution
 
a.marshCommented:
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
0
 
awaltersAuthor Commented:
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,
0
 
awaltersAuthor Commented:
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,
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
awaltersAuthor Commented:
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>
0
 
a.marshCommented:
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
0
 
awaltersAuthor Commented:
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>
0
 
awaltersAuthor Commented:
[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
0
 
a.marshCommented:
(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
0
 
a.marshCommented:
Here you go:

I have tested the code (successfully) on:

Netscape 4.61 on Linux
Netscape 6 on Linux
Opera 5 on Linux

Now if it works on them I generally find it will always work on IE and Netscape (on Windows).

<html>
<head>
<base href="http://www.btinternet.com/~ant.marsh/ee/">
<script language="javascript">
<!--

//Check browser supports layers
if(!document.layers && !document.all && !document.getElementById){
  window.location = "static-page.html";
}

function showLayer(lName){
  if(document.all){ // IE 4 +
    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.getElementById){ // Netscape 6 (and IE 5)
    document.getElementById("layer1").style.visibility = "hidden";
    document.getElementById("layer2").style.visibility = "hidden";
    document.getElementById("layer3").style.visibility = "hidden";
    eval("document.getElementById('" + lName + "').style.visibility = 'visible';");
  }
  else if (document.layers){ //Netscape 4.x
    document.layer1.visibility = "hide";
    document.layer2.visibility = "hide";
    document.layer3.visibility = "hide";
    eval("document.layers['" + 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>

<script language="javascript">
<!--
  if(document.layers){
    document.write("<layer name=\"layer1\" visibility=\"show\">");
  }
  else{
    document.write("<div id=\"layer1\" style=\"visibility: visible; position: absolute; top: 2px; left: 2px;\">");
  }
//-->
</script>

<img src="img1.jpg" name="imgMap" border="0" usemap="#map1">

<script language="javascript">
<!--
  if(document.layers){
    document.write("</layer>");
  }
  else{
    document.write("</div>");
  }
//-->
</script>

<script language="javascript">
<!--
  if(document.layers){
    document.write("<layer name=\"layer2\" visibility=\"hide\">");
  }
  else{
    document.write("<div id=\"layer2\" style=\"visibility: hidden; position: absolute; top: 2px; left: 2px;\">");
  }
//-->
</script>

<img src="img2.jpg" name="imgMap" border="0" usemap="#map2">

<script language="javascript">
<!--
  if(document.layers){
    document.write("</layer>");
  }
  else{
    document.write("</div>");
  }
//-->
</script>

<script language="javascript">
<!--
  if(document.layers){
    document.write("<layer name=\"layer3\" visibility=\"hide\">");
  }
  else{
    document.write("<div id=\"layer3\" style=\"visibility: hidden; position: absolute; top: 2px; left: 2px;\">");
  }
//-->
</script>

<img src="img3.jpg" name="imgMap" border="0" usemap="#map3">

<script language="javascript">
<!--
  if(document.layers){
    document.write("</layer>");
  }
  else{
    document.write("</div>");
  }
//-->
</script>

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

I've put the line:

<base href="http://www.btinternet.com/~ant.marsh/ee/">

in so that it pics up the test images from my development site - that's the only reason it is there.

:o)

Ant
0
 
awaltersAuthor Commented:
Thank you! Your script was very instructive to me!!

0
 
a.marshCommented:
Glad to help. :o)

Thanks for the A grade!

Ant
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now