JavaScript Rollovers

JavaScript
1

Hi Guys,

Im new to JavaScript and I have been playing around with Rollovers.

I was wondering if I could have 2 or more rollovers on the one page using the same functions?

My code (works well for 1 rollover) is below:

<script type=‘text/javascript’>
function mouseOver()
{
document.Rollover.src=‘Japanese.gif’;
}
function mouseOut()
{
document.Rollover.src=‘English.gif’;
}
</script>
</head>
<body>
<table>
<tr><td><a href=‘’><img border=‘0’ alt=‘Home’ src=‘English.gif’ name=‘Rollover’ onmouseover=‘mouseOver()’ onmouseout=‘mouseOut()’ /></a></td>
</tr>
</table>

Any help would be great.

Kind Regards

Peta

2

Not with that code.

What you can do is rewrite it a bit into something like this:


function mouseOver() {
this.src = "Japanese.gif";
}

function mouseOut() {
this.src = "English.gif";
}

“this” refers to different things depending where you use it. In this case, “this” would refer to the image you are mousing over, so you can specify it’s source like that. If you wanted to use different images, you could make different images.

You could also specify a parameter in the functions, then pass the value in through your call:


function mouseOver(img) {
  this.src = img;
}

function mouseOut(img) {
  this.src = img;
}

<img border='0' alt='Home' src='English.gif' name='Rollover' onmouseover='mouseOver("Japanese.gif")' onmouseout='mouseOut("English.gif")' />
3

Thanks for that, will give that a shot :smiley:

Thanks

4

Here is another way to do it. I have attached the two images so that you can play with the script.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Two Mouseovers Same Page</title>
<script type=“text/javascript”>
<!–
function mOver(obj,numbr)
{ obj.src=(numbr==1)? “prev.jpg” : “next.jpg”; }
//
function mOut(obj,numbr)
{ obj.src=(numbr==2)? “prev.jpg” :“next.jpg”; }
//–>
</script>
<style type=“text/css”>
<!–
.cur { cursor:pointer; }
–>
</style>
</head>

<body>

<table border=“0” cellpadding=“0” cellspacing=“0” style=“border-collapse: collapse” width=“200”>
<tr>
<td>
<img class=“cur” border=“0” src=“next.jpg” alt=“Home” onmouseover=“mOver(this,1)” onmouseout=“mOut(this,1)” width=“32” height=“77”>
</td>
<td>
<img class=“cur” border=“0” src=“prev.jpg” alt=“Home” onmouseover=“mOver(this,2)” onmouseout=“mOut(this,2)” width=“32” height=“77”>
</td>
</tr>
</table>

</body>

</html>

5

I’m also a newbie looking at rollovers, and I had an example in the book I’m going thru, where the author has a rollover function setting up the mouseover and mouseout events. He showed an example where this function was called from the window.onload, and another where it was called from the body tag …<body onload=“rollover”>. He didn’t mention why he switched to the body onload, so I was wondering about the pros/cons of one way vs the other.

Thanks!,
Jeff S

6

The window.onload=rollover; and the body onload=“rollover()” do the same thing; they assign a handler fuction to the window or body elements so that function rollover() runs on mouseover. Note that the syntax is different in these two cases. The () is not used in the window.onload case as it is being assigned, not run.

Some people like to keep as much of the script out of their HTML as they can. They will usually prefer window.onload, which is usually in the scripts stored in the head of the document. Others like to see what is going on in their page so they make the call to the handler more visible by putting it in the body tag. I prefer the second option.

7

Got it…thanks Allan

8

You do realize this could also be done in a purely CSS fashion right?

Using the a:link and the a:hover you could do this:

a#home:link {
  width: 100px;
  height: 100px;
  background-image: url(someimage.jpg);
  }

a#home:hover {
  background-image: url(someotherimage.jpg);  
  }
9

Thanks DC…
yes, I believe the author mentioned it could be done in CSS; however, it’s a javascript book, so he was teaching how to do it in javascript.