Javascript - change img src elsewhere when hovering?

DaveOwl

DaveOwl

DaveOwl

Associate
Joined
3 Nov 2005
Posts
611
To explain, I'm trying to change an image elsewhere on the page when I hover over a smaller version of it.

The code below is for the big image box and the smaller boxes which have the thumbnails.

Code: 
<div id="imagelarge"><img id="large" src="default.jpg" alt="" /></div>

<div id="imagebox" class="small">
<img class="thumb" src="test.jpg" alt="Test" onMouseOver="changeimage('test.jpg');" onMouseOut="changeimage('default.jpg');" />
</div>

The JS I was hoping would change the large image to match the thumbnail when the mouse is over the thumbnail box and when moved away it would change back to the default image which was there originally.

Code: 
<script type="text/javascript">
function changeimage(image)
{
document.getElementById(large).src = 'image';
}
</script>

Clearly I am doing something wrong and it doesn't surprise me as I'm not getting to grips with Javascript as quickly as I thought I might. Any help is welcome! :)
 
Try this:

Code: 
<script type="text/javascript">
  function changeimage(image)
  {
    document.getElementById([B][COLOR="Red"]'large'[/COLOR][/B]).src = [B][COLOR="Red"]image[/COLOR][/B];
  }
</script>

You are getting the element in the document with the id of 'large'. The function getElementById expects a String literal as a parameter, in your case you were passing a variable called large which would have been evaluated to undefined.

Similar with the second error, you are setting the elements attribute src to the String literal 'image'. In this case you are actually updating the src attribute with the word 'image' which would result in: <img src="image">. If you were to use Firebug you would see this happening in real time as you hover over the image.

I highly recommend downloading Firebug for Firefox, it will save you hours of frustration in going back and forth between your source trying to figure out why something isn't working. It also features a 'console' which is essentially a JavaScript command line where you can write a piece of JavaScript and press run to see what it does.

Also if you're planning to use JavaScript for anything other than trivial things then I'd recommend using a JavaScript library such as jQuery purely because it has been written around the quirks of the various browsers and will save you a lot of pain. There are several others but jQuery is my personal favourite. It is still important to get a grasp of 'raw' JavaScript though as it it helps you understand what's going on underneath even when using libraries such as jQuery that operate at a more abstract level.

To do the same in jQuery this would be the code (you would need to put in into a function if you wish to parameterise it):

PHP: 
$("#imagebox").hover(
  function () {
    $('#large').attr('src', 'test.jpg');
  }, 
  function () {
    $('#large').attr('src', 'default.jpg');
  }
);
 
Appreciate it Rob thanks. I will try it this evening to see how I get on.

Hopefully it is as simple as that :) Do I need to put jQuery libraries on the webserver I have hosting on to use that or is it like C++ with included 'header' files these functions reference?
 
You need to include the jQuery library in the page you want to use it on, it's only 1 file and you can either host it locally or use one from a CDN (content delivery network) such as Google.

To include a local copy (change path appropriately) use:
PHP: 
<script type="text/javascript" src="/js/jquery.min.js"></script>

To include a copy from Google CDN use:
PHP: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
You're misunderstanding something.

As an example of what he's trying to do...

User hovers over my signature image, and the signature image of RobH (3 posts up) changes.
 
You must log in or register to reply here.
Back
Top Bottom