PDA

Click to See Complete Forum and Search --> : Multiple "onMouse" event handelers

belotte
05-25-2003, 09:37 AM
Let me start out by saying thank you! I have a JavaScript moron so any help is very much appreciated.

I'm trying to writing a script that utilizes multiple instances of the " mouse over " and " mouse out " event handlers. For some reason I just can't seem to get it to work. What I want is when someone rolls over one of the buttons in the upper navigation , 2 things happen; a simple roll over effect and an image to load in a designated space underneath the navigation ( this image would contain information on what the link is).

It took me a long time just to figure how to do the 2 scripts individuall, but together, forget it!

can anybody help me with this please?

Thank you again,

Richard

Here's the code I'm using:

<html>

<head>

<title>Untitled Document</title>


<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from old browsers

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

if (document.images) {

homeText = new Image

bgText = newImage



homeText.src = "pix/texth.gif"

bgText.src = "pix/textbg.gif"

}

else {

homeText = ""

bgText.src = ""

document.textField = ""

}

// End hiding scriptfrom old browsers -->

</SCRIPT>


<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from old browsers

if (document.images) {

homeText = new Image

bgText = new Image


homeText.src = "pix/texth.gif"

bgText.src = "pix/textbg.gif"

}

else {

homeText = ""

bgText.src = ""

document.textField = ""

}

// End hiding scriptfrom old browsers -->

</SCRIPT>

</head>

<body TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" onLoad="preloadImages();">

<A HREF="indexbb.html"

onMouseover="changeImages('home', 'pix/hr.jpg')",
onMouseover="document.textField.src=homeText.src"

onMouseout="changeImages('home', 'pix/h.jpg')",
onMouseout="document.textField.src=bgText.src";>

<img src="pix/h.jpg" WIDTH=41 HEIGHT=64 BORDER=0 ALT="Home"></A><p>

<img src="pix/textbg.gif" NAME="textField" >

</body>
</html>




And the roll over script:

<html>

<head>

<title>Untitled Document</title>


<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

<!-- Hide script from old browsers

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

if (document.images) {

homeText = new Image

bgText = newImage



homeText.src = "pix/texth.gif"

bgText.src = "pix/textbg.gif"

}

else {

homeText = ""

bgText.src = ""

document.textField = ""

}

// End hiding scriptfrom old browsers -->

</SCRIPT>

</head>

<body TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" onLoad="preloadImages();">

<A HREF="indexbb.html"

onMouseOver="changeImages('home', 'pix/hr.jpg')";

onMouseOut="changeImages('home', 'pix/h.jpg')";>

<IMG NAME="home" SRC="pix/h.jpg" WIDTH=41 HEIGHT=64 BORDER=0 ALT="Home"></A>

</body>
</html>
khalidali63
05-25-2003, 10:04 AM
I am sure you can get help from the following script

ImageSwapMultipleActions.html (http://www.webapplikations.com/pages/html_js/image_examples/ImageSwapMultipleActions.html)
belotte
05-30-2003, 01:09 AM
I wanted to say thank you for your response, and so quick.

Now my question is: is there a way to have the text go back to blank (image switch back) on roll out? Dose that make sense?

Thanks again.

Richard
:D
belotte
05-31-2003, 04:21 PM
Ok the "textField" is used in the following manner:

else {

document.textField = ""


and


<td width="41" valign="top"><a HREF="indexbb.html"

onMouseOver="changeImages('home', 'pix/hr.jpg');

document.textField.src=homeText.src; return true;"

onMouseOut="changeImages('home', 'pix/h.jpg');

document.textField.src=bgText.src; return true;">

<img src="pix/h.jpg" name="home" width=41 height=64 border=0 alt="Home"></a></td>


and


<td height="38"><img src="pix/textbg.gif" NAME="textField">
belotte
06-01-2003, 06:00 PM
Thank you so much!

Rich