?
Solved

change image.usemap on click?

Posted on 2003-03-30
4
Medium Priority
?
3,663 Views
Last Modified: 2007-12-19
I have two images, and two image maps.  I want an onClick event to change the image.src and the image.usemap but it seems that simply changing the .usemap property isn't possible.  Anyone know of a way to do this?

Below is my JavaScript as it stands:

<SCRIPT language="JavaScript" type="text/javascript">
     <!--
     function newImage(image) {
          if (document.images) {
               res = new Image();
               res.src = image;
               return res;
          }
     }
     function loadAll() {
          img_menu_open = newImage("images/menu_open.jpg");
          img_menu_close = newImage("images/menu_close.jpg");
          menuState = true;
     }

     function toggleMenu() {
          if (menuState) {
               document.menu.src=img_menu_close.src;
               document.menu.usemap="#menu_close";
               menuState = false;
          } else {
               document.menu.src=img_menu_open.src;
               document.menu.usemap="#menu_open";
               menuState = true;
          }
               
     }
     -->
</SCRIPT>

And below is my image and map code:

<IMG src="images/menu_open.jpg" name="map">
<MAP name="menu_open">
     <AREA SHAPE="circle" ALT="Hide the menu" COORDS="323,49,12" HREF="javascript:toggleMenu();">
     <AREA SHAPE="poly" ALT="Compose a new submission" COORDS="219,59, 299,59, 299,77, 219,77, 219,96, 174,96, 174,36, 219,36" HREF="#">
     <AREA SHAPE="poly" ALT="My Account" COORDS="14,36, 59,36, 59,59, 159,59, 159,77, 59,77, 59,96, 14,96" HREF="#">
</MAP>
<MAP NAME="menu_close">
     <AREA SHAPE="circle" ALT="Show the menu" COORDS="25,49,12" HREF="javascript:toggleMenu();">
</MAP>


Any help?
0
Comment
Question by:inxil
[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
  • 2
  • 2
4 Comments
 
LVL 10

Expert Comment

by:kollegov
ID: 8236237
You can do something like this, but take care to change WIDTH and HEIGHT
of images to real ones you have

<SCRIPT language="JavaScript" type="text/javascript">
                 <!--
                 function newImage(image) {
                      if (document.images) {
                           res = new Image();
                           res.src = image;
                           return res;
                      }
                 }

                 var img_menu_open;
                 var img_menu_close;
                 function loadAll() {
                      img_menu_open = newImage("images/menu_open.jpg");
                      img_menu_close = newImage("images/menu_close.jpg");
                      menuState = true;
                 }

                 var menuState = false;
                 function toggleMenu() {
                      if (menuState) {
                           document.menu.src=img_menu_close.src;
                           document.menu.outerHTML='<IMG src="images/menu_open.jpg" '
                                  + ' name="menu"  usemap="#menu_close" width="300" height="200">'
                           menuState = false;
                      } else {
                           document.menu.src=img_menu_open.src;
                           document.menu.outerHTML='<IMG src="images/menu_open.jpg"
                                 + ' name="menu"  usemap="#menu_open" width="300" height="200">'
                           menuState = true;
                      }
                           
                 }
                 
                 loadAll();
                 -->
             </SCRIPT>

             And below is my image and map code:


             <MAP name="menu_open">
                 <AREA SHAPE="circle" ALT="Hide the menu" COORDS="323,49,12" HREF="javascript:toggleMenu();">
                 <AREA SHAPE="poly" ALT="Compose a new submission" COORDS="219,59, 299,59, 299,77, 219,77, 219,96, 174,96, 174,36, 219,36" HREF="#">
                 <AREA SHAPE="poly" ALT="My Account" COORDS="14,36, 59,36, 59,59, 159,59, 159,77, 59,77, 59,96, 14,96" HREF="#">
             </MAP>
             <MAP NAME="menu_close">
                 <AREA SHAPE="circle" ALT="Show the menu" COORDS="25,49,12" HREF="javascript:toggleMenu();">
             </MAP>
             <IMG src="images/menu_open.jpg" name="menu" width="400" height=300 usemap="#menu_close">
0
 
LVL 7

Author Comment

by:inxil
ID: 8236304
Doesn't seem to be doing anything... any ideas?
0
 
LVL 10

Accepted Solution

by:
kollegov earned 300 total points
ID: 8236483
OOoopppssss
Had unclosed string  (I split long strings to prevent wrapping and missed quote)
Now fixed
Just replace image sizes with one you really have and try


<SCRIPT language="JavaScript" type="text/javascript">
<!--
function newImage(image) {
     if (document.images) {
          res = new Image();
          res.src = image;
          return res;
     }
}

var img_menu_open;
var img_menu_close;
function loadAll() {
     img_menu_open = newImage("images/menu_open.jpg");
     img_menu_close = newImage("images/menu_close.jpg");
     menuState = true;
}

var menuState = false;
function toggleMenu() {
     if (menuState) {
          document.menu.src=img_menu_close.src;
          document.menu.outerHTML='<IMG src="images/menu_open.jpg" '
// --- change size here
                 + ' name="menu"  usemap="#menu_close" width="400" height="200">'
          menuState = false;
     } else {
          document.menu.src=img_menu_open.src;
          document.menu.outerHTML='<IMG src="images/menu_open.jpg" '
// --- change size here
                + ' name="menu"  usemap="#menu_open" width="400" height="200">'
          menuState = true;
     }
         
}

loadAll();
-->
</SCRIPT>
And below is my image and map code:


<MAP name="menu_open">
<AREA SHAPE="circle" ALT="Hide the menu" COORDS="323,49,12" HREF="javascript:toggleMenu();">
<AREA SHAPE="poly" ALT="Compose a new submission" COORDS="219,59, 299,59, 299,77, 219,77, 219,96, 174,96, 174,36, 219,36" HREF="#">
<AREA SHAPE="poly" ALT="My Account" COORDS="14,36, 59,36, 59,59, 159,59, 159,77, 59,77, 59,96, 14,96" HREF="#">
</MAP>
<MAP NAME="menu_close">
<AREA SHAPE="circle" ALT="Show the menu" COORDS="25,49,12" HREF="javascript:toggleMenu();">
</MAP>
<!-- change size here -->
<IMG src="images/menu_open.jpg" name="menu" width="400" height=200 usemap="#menu_close">
0
 
LVL 7

Author Comment

by:inxil
ID: 8236574
Beautiful, thank you!
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

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…
Suggested Courses

765 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