Solved

Change Image *and* Imagemap onClick

Posted on 2001-07-02
11
364 Views
Last Modified: 2008-03-10
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
Comment
Question by:awalters
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 15

Expert Comment

by:a.marsh
ID: 6246666
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
 

Author Comment

by:awalters
ID: 6247394
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
 

Author Comment

by:awalters
ID: 6247458
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:awalters
ID: 6247620
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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6247939
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
 

Author Comment

by:awalters
ID: 6249304
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
 

Author Comment

by:awalters
ID: 6249354
[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
 
LVL 15

Expert Comment

by:a.marsh
ID: 6249362
(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
 
LVL 15

Accepted Solution

by:
a.marsh earned 300 total points
ID: 6249556
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
 

Author Comment

by:awalters
ID: 6251451
Thank you! Your script was very instructive to me!!

0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6251563
Glad to help. :o)

Thanks for the A grade!

Ant
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Table doesn't show the lines! 3 34
Boolean 13 45
Call a VB.net function in Javascript 6 45
How to open a new browser tab after executing php script 20 43
This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question