Jump to content

Problem With Rollover Script


therschbach
 Share

Recommended Posts

Hi all, I have an index page at www.dirtjournal.com that has a menu bar with button images with id's button0 through button9. Next to the buttons I have corresponding images with id's coin0 through coin9, one for each button, that I want to change to an animated image when I rollover the corresponding button. Well, it doesn't work. I've narrowed down the problem but I'm just learning so I'm sure it's a simple fix. The index.php page links to this javascript file....

window.onload = initAll;function initAll() {  for (i=0; i < 10; i++) {	setupRollover(i);  }} function setupRollover(i) {  document.getElementById('button' + i).onmouseover = coinStart(i);  document.getElementById('button' + i).onmouseout = coinStop(i);}function coinStart(i) {  document.getElementById('coin' + i).src = "./pictures/rotatingcoin.gif";}function coinStop(i) {  document.getElementById('coin' + i).src = "./pictures/coin.gif";}

The variable "i" passes to the setupRollover function and plugs itself into ('button' + i), but it won't pass itself to the coinStart or coinStop functions. I can manually set the coin ID in those functions and delete the (i) from the function calls and it will work for whatever image I specify so I know the coinStart and coinStop functions work. The problem seems to be with how I'm passing (i) to coinStart and coinStop in the setupRollover function.Thanks for your help! :)

Link to comment
Share on other sites

Your code is passing the result of the "coinStart" and "coinStop" functions (which is void) to the onmouseover and onmouseout events. Instead, you'll need to pass a reference to a function. Something like this might work for you:

function setupRollover(i) {  document.getElementById('button' + i).onmouseover = function() { coinStart(i); }  document.getElementById('button' + i).onmouseout = function() { coinStop(i); }}

Link to comment
Share on other sites

Ok, that makes sense. I figured it was something like that. I'll give the change a shot when I get home from work. Thanks!

Your code is passing the result of the "coinStart" and "coinStop" functions (which is void) to the onmouseover and onmouseout events. Instead, you'll need to pass a reference to a function. Something like this might work for you:
function setupRollover(i) {  document.getElementById('button' + i).onmouseover = function() { coinStart(i); }  document.getElementById('button' + i).onmouseout = function() { coinStop(i); }}

Link to comment
Share on other sites

You're going to get burned on this, like most of us have. In function() { coinStart(i); } , i doesn't mean what you think it does. Try it. If it's broken, you'll need to use the this keyword inside the anonymous function. It will refer to the button element. Access its id and extract the index from that, using substr or something. Pass that value to coinStart().

Link to comment
Share on other sites

You're going to get burned on this, like most of us have.
True, this is all a bit confusing at first and I've been burned by it a number of times, but, in this case, it's not really a problem.This will not act like most people would expect it to (i.e. do it this way and you get burned):
<script type="text/javascript">for (var i = 0; i < 10; i++){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>

This way, however, works just fine:

<script type="text/javascript">for (var i = 0; i < 10; i++){	buildButton(i);}function buildButton(i){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>

Link to comment
Share on other sites

It works!!!! Yeah! Thanks a bunch jesh. I'm sure I'll be back as I continue to add some more functionality to the site.

This way, however, works just fine:
<script type="text/javascript">for (var i = 0; i < 10; i++){	buildButton(i);}function buildButton(i){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...