Mouse-over with 2 different images changing?

**robertsaunders** · 04-20-2005, 09:20 PM

Is it possible to change two diffent images when I move my mouse over a third image? For examle, I want to be able to move the mouse over an image of a thumbnail of a Russian flag with the result that 2 (or possibly more) images on the same page change to garphics with Russian text.

**ddadmin** · 04-20-2005, 10:47 PM

Yes, the main thing to understand is how to change an image using JavaScript, which is via the syntax:

Code:

document.images["myimage"].src="new.gif"

where "myimage" is the name of the image you're changing. So a function like:

Code:

<script>
function changeimage(imgname, imgsrc){
document.images[imgname].src=imgsrc
}
</script>

can be used to generically change any image. Regarding your question, you would call the above function this way:

Code:

<a href="#" onMouseover="changeimage('dog', 'new.gif'); changeimage('cat', 'new2.gif');"><img src="what.gif"></a>

**robertsaunders** · 04-23-2005, 03:15 PM

Thanks very much for your reply. Unfortunatrly, I didn't seem to be able to implement it.

If the image that I want to move the mouse over is called 3.gif, and the 2 images that I want to change when I move the mouse over 3.gif are 1.gif and 2.gif, please can you specify the exact code that I need to paste?

Sorry to be so dim, but java is all still a bit of a mystery to me.

**mwinter** · 04-23-2005, 03:58 PM

Originally Posted by robertsaunders

If the image that I want to move the mouse over is called 3.gif, [...]

The original filename of any of the images is not important. What is, is the id or name attribute values of the two img elements you want to alter.

Let's assume you have the following three img elements. They're precise location in the document isn't a concern, nor are the attribute values. The first element is your control element, whilst the second and third are the ones to be manipulated.

HTML Code:

<img alt="" src="a.png">
<img id="img1" alt="" src="b1.png">
<img id="img2" alt="" src="c1.png">

In order to alter the images, we need to execute some code in response to the mouseover event. The function we will call, setSource is shown below:

Code:

function setSource() {
  for(var j = 0, n = (arguments.length & ~1); j < n; j += 2) {
    document.images[j].src = arguments[j + 1];
  }
}

This function takes pairs of strings. The first string in each pair is the id or name of the img element, and the second string is a URL (relative or absolute) to the new image resource.

For example (using the markup snippet above):

HTML Code:

<img alt="" src="a.png"
 onmouseover="setSource('img1', 'b2.png', 'img2', 'c2.png');">
<img id="img1" alt="" src="b1.png">
<img id="img2" alt="" src="c1.png">

hovering the cursor over the control element would instruct the second image (img1) to display b2.png, and the third image (img2) to display c2.png.

Sorry to be so dim, but java is all still a bit of a mystery to me.

Indeed, as Java and ECMAScript[1] are two completely different languages. Please don't get them confused. We are currently dealing with ECMAScript and the Document Object Model (DOM).

Hope that helps,
Mike

[1] The standardised version of Microsoft's JScript, and Netscape's JavaScript.

**robertsaunders** · 04-23-2005, 08:02 PM

The function we will call, setSource is shown below:

Code:

function setSource() {
  for(var j = 0, n = (arguments.length & ~1); j < n; j += 2) {
    document.images[j].src = arguments[j + 1];
  }
}

Thanks mike, that was v helpful. However, I was a little unsure exactly where I would insert the code above. Would this go within the <head> tabs, or does it not matter where it goes? Does it need to be inserted within <script> tabs, or just as it is?

**mwinter** · 04-23-2005, 08:51 PM

Originally Posted by robertsaunders

Thanks mike, that was v helpful.

Hmm. Except for the mistake in the code.

I've corrected it below. I changed some of the code and must have deleted something I didn't mean to.

[...] I was a little unsure exactly where I would insert the code [...]. Would this go within the <head> tabs, or does it not matter where it goes?

Technically, it doesn't really matter. As long as the code is parsed before someone does something to require it (that is, before it's called), the code will work fine. The best way though is to place it in the head element.

Does it need to be inserted within <script> tabs [...]

Yes:

HTML Code:

<script type="text/javascript">
  function setSource() {
    for(var j = 0, n = (arguments.length & ~1); j < n; j += 2) {
      document.images[arguments[j]].src = arguments[j + 1];
    }
  }
</script>

Mike

Thread: Mouse-over with 2 different images changing?

Thread Tools

Search Thread

Mouse-over with 2 different images changing?

Bookmarks

Bookmarks

Posting Permissions