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

Ryan Chong

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>

Ryan Chong

A web example here:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

third

>>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.

Omer Maor

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

Omer Maor

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.

Ryan Chong

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

Ryan Chong

>>or else all "ChangeText" to be lower case.
oops, i mean:

or else change all "ChangeText" to be lower case.

Omer Maor

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

Ryan Chong

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Omer Maor

ASKER

Perfect. Thanks very much for your help.

Replace &lt;div&gt; content on mouseclick

Replace <div> content on mouseclick