By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,638 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

element.src=variable?

martypants
P: 2
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:

Expand|Select|Wrap|Line Numbers
  1. function mouseOver(imgName)
  2. {
  3. //alert(imgName + "_cr.jpg");
  4. document.imgName.src = imgName + "_cr.jpg";
  5. alert(document.imgName.src);
  6. }
  7. function mouseOut(imgName)
  8. {
  9.  
  10. //alert(imgName + "_bw.jpg");
  11. document.imgName.src = imgName + "_bw.jpg";
  12. alert(document.imgName.src);
  13. }
the html side looks like this for an image:

Expand|Select|Wrap|Line Numbers
  1. <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
Mar 12 '09 #1
Share this Question
Share on Google+
4 Replies


Frinavale
Expert Mod 5K+
P: 9,731
The parameter "imgName" is text.

Therefore the following won't work:
Expand|Select|Wrap|Line Numbers
  1. 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:
Expand|Select|Wrap|Line Numbers
  1. function mouseOver(imgName)
  2.   var imageElement = document.getElementById(imgName);
  3.   imageElement.src = imgName + "_cr.jpg";
  4. alert(document.imgName.src);
  5. }
  6. function mouseOut(imgName)
  7.   var imageElement = document.getElementById(imgName);
  8.   imageElement.src = imgName + "_bw.jpg";
  9.   alert(document.imgName.src);
  10. }
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:
Expand|Select|Wrap|Line Numbers
  1. function mouseOver(imageElement, imgName)
  2.   imageElement.src = imgName + "_cr.jpg";
  3.  alert(document.imgName.src);
  4. }
  5. function mouseOut(imageElement, imgName)
  6.   imageElement.src = imgName + "_bw.jpg";
  7.   alert(document.imgName.src);
  8. }

You would have to change your image button to pass the image element into the method. Yo use the "this" keyword to do so:
Expand|Select|Wrap|Line Numbers
  1. <img src="bfast_bw.jpg" name="bfast" width="399" height="600" alt="Breakfast" onmouseOver="mouseOver('bfast')" onmouseOut="mouseOut(this, 'bfast')" /></a>
Mar 12 '09 #2

Dormilich
Expert Mod 5K+
P: 8,639
@Frinavale
you can also use the "this" keyword.
Expand|Select|Wrap|Line Numbers
  1. function mouseOver(imgName)
  2.   this.src = imgName + "_cr.jpg";
  3. }
it works even with Event Handlers
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("your_image_id").addEventListener("mouseover", mouseOver, false);
  2. // use addEvent() (=> google) for cross browser support
Mar 12 '09 #3

Frinavale
Expert Mod 5K+
P: 9,731
Nice Dormilich :)

The solution is certainly cleaner than mine!
Mar 12 '09 #4

martypants
P: 2
Works like a charm! Many thanks to you both!
Mar 12 '09 #5

Post your reply

Sign in to post your reply or Sign up for a free account.