[Webinar] Streamline your web hosting managementRegister Today

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

change image.usemap on click?

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
inxil
Asked:
inxil
  • 2
  • 2
1 Solution
 
kollegovCommented:
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
 
inxilAuthor Commented:
Doesn't seem to be doing anything... any ideas?
0
 
kollegovCommented:
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
 
inxilAuthor Commented:
Beautiful, thank you!
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

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