Start Free TrialLog in
Avatar of Omer Maor
Omer MaorFlag for United States of America

asked on 

Replace <div> content on mouseclick

I am looking for a simple script that will change the contents of a <div> tag on a mouseclick of a graphic. I have several graphics in a menu and they have rollover graphics that need to be displayed on mouseover. When clicked, I want to replace the text in the central part of the page.

Using a hyperlink would be easy but causes the whole page to refresh. I am looking to simply replace the div tag content to avoid the refresh. Of course, I'll probably also need to preload the content when the page first loads.

Would appreciate anyone's suggestions or a link to any reference online.

Thanks
JavaScriptASP
Avatar of undefined
Last Comment
Omer Maor
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image
A simple example here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<script language="javascript">
      function changetext(i) {
            if (i == "1") {
                  document.getElementById("test").innerHTML = "This is image 1";
            } else {
                  document.getElementById("test").innerHTML = "This is image 2";      
            }
      }
</script>
<body>
<div id="test">Test here</div>

<a href="#" onClick="changetext('1');return false;"><img src="../images/yourimage.gif" width="109" height="24" border="0"></a> <a href="#" onClick="changetext('2');return false;"><img src="../images/yourimage.gif" width="109" height="24" border="0"></a>
</body>
</html>
Avatar of third
third
Flag of Philippines image
>>Using a hyperlink would be easy but causes the whole page to refresh

please post your current code and we'll try to help you fix it.
Avatar of Omer Maor
Omer Maor
Flag of United States of America image

ASKER

Thanks for the sample code. I'm a VB programmer but new to Javascript. How would I change the above code to do the following:

1. I have 5 menu items. Is there an equivalent to a Case statement in Javascript or would I use nested If statements (and if so, what is the syntax)?

2. What is the syntax for changing just the graphic on a mouseover?

Thanks again
Avatar of Omer Maor
Omer Maor
Flag of United States of America image

ASKER

Here is my test code:

<script language="javascript">
      function ChangeText(i) {
            if (i == "1")
                        {document.getElementById("BodyText").innerHTML = "This is the text for Gallery";}
            else if (i == "2")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Background";}
            else if (i == "3")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Framing";}
            else if (i == "4")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Parashot";}
            else  if (i == "5")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Preservation";}    
            }
</script>

<body>
<div id="BodyText">Test here</div>

<a href="#" onClick="changetext('1');return false;">
<img src="images/menus/Fragments/gallery_off.gif" border="0"></a>
<a href="#" onClick="changetext('2');return false;">
<img src="images/menus/Fragments/background_off.gif" border="0"></a>
<a href="#" onClick="changetext('3');return false;">
<img src="images/menus/Fragments/framing_off.gif" border="0"></a>
<a href="#" onClick="changetext('4');return false;">
<img src="images/menus/Fragments/parashot_off.gif" border="0"></a>
<a href="#" onClick="changetext('5');return false;">
<img src="images/menus/Fragments/preservation_off.gif" border="0"></a>
</body>

Again, I need to add/fix the following:

1. There must be a syntax error inthe nested if which I can't see - it generates an error
2. Each menu item has 2 graphics - one for the off state and one for the on state. I need to add a mouseover condition that changes the graphic to the "_on" graphic.
3. On a click, the graphic should remain the "_on" graphic until another menu item is clicked - then it reverts back to the _off graphic while the new selection changes to the _on graphic.

Thanks for your help.
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image
1st, javascript is case sensitive, for your above example:

you should use "ChangeText" for below scripts:

...
<a href="#" onClick="ChangeText('1');return false;">
<img src="images/menus/Fragments/gallery_off.gif" border="0"></a>
<a href="#" onClick="ChangeText('2');return false;">
<img src="images/menus/Fragments/background_off.gif" border="0"></a>
<a href="#" onClick="ChangeText('3');return false;">
<img src="images/menus/Fragments/framing_off.gif" border="0"></a>
<a href="#" onClick="ChangeText('4');return false;">
<img src="images/menus/Fragments/parashot_off.gif" border="0"></a>
<a href="#" onClick="ChangeText('5');return false;">
<img src="images/menus/Fragments/preservation_off.gif" border="0"></a>
...

or else all "ChangeText" to be lower case.

For the mouseover script, you can add scripts below:

<script language="javascript">
   function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>


and change your image like this:


<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img1','','images/menus/Fragments/gallery_on.gif',1)"><img src="images/menus/Fragments/gallery_off.gif" name="img1" border="0"></a>


hope this helps
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image
>>or else all "ChangeText" to be lower case.
oops, i mean:

or else change all "ChangeText" to be lower case.
Avatar of Omer Maor
Omer Maor
Flag of United States of America image

ASKER

Real close, thanks. The only thing it isn't doing is retaining the "_on" state for the menu item that is currently active. All menus revert to their off state after being clicked.

Here's the URL: http://www.spiritualartifacts.net/menutest.htm
Also, it seems as if there are some _ characters appearing in between the graphics...?

Here's the code:

<script language="javascript">
      function ChangeText(i) {
            if (i == "1")
                        {document.getElementById("BodyText").innerHTML = "This is the text for Gallery";}
            else if (i == "2")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Background";}
            else if (i == "3")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Framing";}
            else if (i == "4")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Parashot";}
            else  if (i == "5")
                  {document.getElementById("BodyText").innerHTML = "This is the text for Preservation";}    
            }
</script>

<script language="javascript">
   function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

</head>

<body>
<div id="BodyText">Test here</div>

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img1','','images/menus/Fragments/gallery_on.gif',1)"
      onClick="ChangeText('1');return false;">
        <img src="images/menus/Fragments/gallery_off.gif" name="img1" border="0">
      </a>
<a href="#"
      onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img2','','images/menus/Fragments/background_on.gif',1)"
      onClick="ChangeText('2');return false;">
        <img src="images/menus/Fragments/background_off.gif" name="img2" border="0">
      </a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img3','','images/menus/Fragments/framing_on.gif',1)"
      onClick="ChangeText('3');return false;">
        <img src="images/menus/Fragments/framing_off.gif" name="img3" border="0">
      </a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img4','','images/menus/Fragments/parashot_on.gif',1)"
      onClick="ChangeText('4');return false;">
        <img src="images/menus/Fragments/parashot_off.gif" name="img4" border="0">
      </a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img5','','images/menus/Fragments/preservation_on.gif',1)"
      onClick="ChangeText('5');return false;">
        <img src="images/menus/Fragments/preservation_off.gif" name="img5" border="0">
      </a>
</body>
ASKER CERTIFIED SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image
Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Omer Maor
Omer Maor
Flag of United States of America image

ASKER

Perfect. Thanks very much for your help.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts

  • "Invaluable tool for our organization"

    Josh Regalski

  • "Your help has saved me hundreds of hours of internet surfing."

    @fblack61

  • "Just a dang good service!"

    @golferski

  • "Worth every penny."

    Steve Hougom

  • "It’s been a life saver."

    Maria Halt

  • "Best support site I’ve seen!"

    Bob Schneider

  • "I would be lost without them."

    @fblack61

  • "Saved my job multiple times."

    Walt Forbes

  • "I love this site."

    Maria Duwe

  • "Friendly respectful help."

    Andrew Kowtalo

  • "Such top-notch experts."

    @magento

  • "The best money I have ever spent."

    @rwheeler23

  • "Beyond any comprehensible value"

    George Morris

  • "Invaluable tool for our organization"

    Josh Regalski

Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo
© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent