Solved

Change Image *and* Imagemap onClick

Posted on 2001-07-02
11
356 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
  • 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now