element.src=variable?

[martypants]

What am I doing wrong here?

I'm trying to make a simple rollover that changes image from black/white to color. The images are displayed in b/w and all end in "_bw.jpg" and on mouseOver I want to change to color - thoses images all end in "_cr.jpg"

My javascript is:

function mouseOver(imgName)
{
//alert(imgName + "_cr.jpg");
document.imgName.src = imgName + "_cr.jpg";
alert(document.imgName.src);
}
function mouseOut(imgName)
{
 
//alert(imgName + "_bw.jpg");
document.imgName.src = imgName + "_bw.jpg";
alert(document.imgName.src);
}

the html side looks like this for an image:

<div align="center"><a href="Breakfast Menu.html"><img src="bfast_bw.jpg" name="bfast" width="399" height="600" alt="Breakfast" onmouseOver="mouseOver('bfast')" onmouseOut="mouseOut('bfast')" /></a>

The first alert, which I commented out, works fine. The second, which I would have expected to be identical, never shows up, which means its null
and the images never change.

Any clue as to how lame I am?

Thanks,
Marty

[Frinavale]

The parameter "imgName" is text.

Therefore the following won't work:

document.imgName.src = imgName + "_cr.jpg";

The reason is because document.imgName does not refer to an element.
Use the document.getElementByID() method to retrieve the img element, once you have this you can set the src of the img element.

For example:

function mouseOver(imgName)
  var imageElement = document.getElementById(imgName);
  imageElement.src = imgName + "_cr.jpg";
alert(document.imgName.src);
}
function mouseOut(imgName)
{ 
  var imageElement = document.getElementById(imgName);
  imageElement.src = imgName + "_bw.jpg";
  alert(document.imgName.src);
}

Another way to do it is to pass the element directly into the method.
Then you don't have to use the getElementByID method.

For example:

function mouseOver(imageElement, imgName)
  imageElement.src = imgName + "_cr.jpg";
 alert(document.imgName.src);
}
function mouseOut(imageElement, imgName)
{ 
  imageElement.src = imgName + "_bw.jpg";
  alert(document.imgName.src);
}

You would have to change your image button to pass the image element into the method. Yo use the "this" keyword to do so:

<img src="bfast_bw.jpg" name="bfast" width="399" height="600" alt="Breakfast" onmouseOver="mouseOver('bfast')" onmouseOut="mouseOut(this, 'bfast')" /></a>

[Dormilich]

@Frinavale
you can also use the "this" keyword.

function mouseOver(imgName)
  this.src = imgName + "_cr.jpg";
}

it works even with Event Handlers

document.getElementById("your_image_id").addEventListener("mouseover", mouseOver, false);
// use addEvent() (=> google) for cross browser support

[Frinavale]

Nice Dormilich :)

The solution is certainly cleaner than mine!

[martypants]

Works like a charm! Many thanks to you both!