PDA

Click to See Complete Forum and Search --> : Changing JS variables on mouse over

robowhizardscom
03-16-2004, 10:10 PM
I want to know how to change a var on mouseover.

Example
<body>
<img src="img1.img" onmouseover="var="1">
<img src="img2.img" onmouseover="var="2">
<img src="img3.img" onmouseover="var="3">
Later on in body..

if (code="1") {
document.write("code 1 blah");
}
else if (code="2") {
document.write("code 2 blah");
}
else if (code="3") {
document.write("code 3 blah");
}

In other words, when you roll over an image, it changes a description based on the image

I hope someone can answer my question
robowhizardscom
03-16-2004, 10:12 PM
Ignore my first post, this is what I meant to post

"I want to know how to change a var on mouseover.

Example
<body>
<img src="img1.img" onmouseover="var="1">
<img src="img2.img" onmouseover="var="2">
<img src="img3.img" onmouseover="var="3">
Later on in body..

if (var="1") {
document.write("var 1 blah");
}
else if (var="2") {
document.write("var 2 blah");
}
else if (var="3") {
document.write("var 3 blah");
}

In other words, when you roll over an image, it changes a description based on the image

I hope someone can answer my question"
Paul Jr
03-16-2004, 10:31 PM
<script type="text/javascript">
function display(num) {
var box = document.getElementById("box");
var descriptions = new Array();
descriptions[0] = "Blah blah blah...";
descriptions[1] = "Bleh bleh bleh...";
descriptions[2] = "Foo foo foo...";

box.innerHTML = descriptions[num];
}
</script>
... ... ...
<img src="image1.jpg" height="100" width="100" onmouseover="display('0');" />
<img src="image2.jpg" height="100" width="100" onmouseover="display('1');" />
<img src="image3.jpg" height="100" width="100" onmouseover="display('2');" />

<div id="box"></div>

There are other ways to do this; such as having the descriptions hard coded into the page, hidden, and then just showing the appropriate one when the user mouses over an image.

You can't do it with document.write(), since the function is called when the user mouses over the image, which is after the page loads, and the document.write() is parsed as the page is loading.


Hope this helps at least a tiny bit. ;)
robowhizardscom
03-16-2004, 10:34 PM
Do I put the <script> part in the head or where i want the wording to appear
Paul Jr
03-16-2004, 10:43 PM
The <script> part goes in the head.

When invoking the function, you pass one argument, which is the index of the array element whose value you want displayed in the <div> specified.

So display('0'); displays the first array element's value, since the 0 refers to the first element of the arrray.

Hope that made sense...
robowhizardscom
03-16-2004, 10:47 PM
I put the div in the body, and everything just like you had it but it doesn't seem to work. I do have the 'display()' as one of several commands onmouseover

Would this cause a conflict??
Paul Jr
03-16-2004, 11:49 PM
Originally posted by robowhizardscom
I put the div in the body, and everything just like you had it but it doesn't seem to work. I do have the 'display()' as one of several commands onmouseover

Would this cause a conflict??
It shouldn't as far as I know. Could you post your code?
robowhizardscom
03-17-2004, 11:04 AM
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="css/main.css">
<title>
Our Robots - ROBOWhizards Official Online Home
</title>
<script type="text/javascript">
function display(num) {
var box = document.getElementById("box");
var descriptions = new Array();
descriptions[0] = "1";
descriptions[1] = "2";
descriptions[2] = "3;
descriptions[3] = "4;
descriptions[4] = "5;

box.innerHTML = descriptions[num];
}
</script>
</head>
<body>
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="70" height="138" background="images/robot/VET/02/3rd_motor.JPG" onmouseover="background='images/robot/VET/02/3rd_motor2.JPG';return true;display('1')" onmouseout="background='images/robot/VET/02/3rd_motor.JPG';return true;display('0')">
&nbsp;
</td>
<td width="265" height="138" background="images/robot/90/02/bracing.JPG" onmouseover="background='images/robot/VET/02/bracing2.JPG';return true;display('2')" onmouseout="background='images/robot/VET/02/bracing.JPG';return true;display('0')">
&nbsp;
</td>
</tr>
<tr>
<td width="70" height="105" background="images/robot/90/02/stable_wheel.JPG" onmouseover="background='images/robot/VET/02/stable_wheel2.JPG';return true;display('3')" onmouseout="background='images/robot/VET/02/stable_wheel.JPG';return true;display('0')">
&nbsp;
</td>
<td width="265" height="105" background="images/robot/90/02/gears.JPG" onmouseover="background='images/robot/VET/02/gears2.JPG';return true;display('4')"
onmouseout="background='images/robot/VET/02/gears.JPG';return true;display('0')">
&nbsp;
</td>
</tr>
</table>
________________________

<div id="box"></div>
</body>
Paul Jr
03-17-2004, 07:06 PM
Missing a few ending quotes:
descriptions[0] = "1";
descriptions[1] = "2";
descriptions[2] = "3";
descriptions[3] = "4";
descriptions[4] = "5";

Remove the "return true;" from the onmouseover/onmouseout code and it should be peachy.

;)
robowhizardscom
03-17-2004, 09:58 PM
Thanx Paul jr for so much help, it finally works, and I would never have gotten it w/o your help!! thanx so much!!
Paul Jr
03-17-2004, 10:15 PM
Originally posted by robowhizardscom
Thanx Paul jr for so much help, it finally works, and I would never have gotten it w/o your help!! thanx so much!!
Awesome! Glad to be of help. :D