image swap/ javascript

i'll try and explain this the best i can.
on a given site there is a rollover image. if you click on that image it will change to a new image that lets you know you are on that page. (say the image is red, you mouse over it and it turns blue, you click it and that page loads and the image now turns yellow)
when you go to another page, that pages image will be yellow.

the simple way to do this is to reload a new page with the yellow image as a static(not a link) image.

is there a way to do this in javascript so that the page doesn't have to be reloaded?

i belive it would be something like

Code:

---

<a href="javascript:onMouseover(image_blue), onMouseOut(image_red),onClick(image_yellow);"

---

I know the syntax is not correct but before i try and code this, is this possible to do?

if none of this makes sense, please let me know and i'll try and re-ask the question.

thanks!

Try playing with links in style sheets. There is a hover and visited state.

here is the easiest way:

Code:

---

<a href="javaScript:void(0);" onClick="document.imageName.src='yellow.gif';" onMouseOver="document.imageName.src='blue.gif';" onMouseOut="document.imageName.src='red.gif';"><img src="red.gif"></a>

---

i don't think style sheets will help here.....because they are images not text.

one big problem is, the rollovers have already been written by some wysiwyg editor and its far to complex for me.

thanks

Style is not limited to text.

CP, your example is nice and all, but... after I click on it, I will mouse out. Besides which, I still can't find document.imageName as part of the standards.

<a href="java script:void(0);" onClick="document.imageName.src='yellow.gif';" onMouseOver="document.imageName.src='blue.gif';" onMouseOut="document.imageName.src='red.gif';"><img src="red.gif" name="imageName"></a>

This is what I meant by imageName

-Matt

Quote:

---

Originally posted by CiberTHuG
Style is not limited to text.

CP, your example is nice and all, but... after I click on it, I will mouse out. Besides which, I still can't find document.imageName as part of the standards.

---

btw, the url() style sheet is not supported by all browsers yet.

-Matt

Matt,

In the DOM 1 I find the following ways to access a img tag with a name attribute set to "foo":

• document.getElementsByTagName("img").item(index)
• document.getElementsByTagName("img")[index]
• document.images.namedItem("foo")
• document.images["foo"]

You could also drill through the DOM, grabbing the body, traversing it's children, and each child of each child, etc.

I found all of these ways again in DOM 2, but I didn't find any new ways. I didn't look at the DOM 3 since it isn't out, yet. Is that where document.foo is?

The :hover and :visited parts of the style sheets have been in the CSS standard since Level 1. They still exist in the current standard (since May of 1998). You can read up on them here. If it isn't supported by your browser, then YBMS.

You still haven't solved the order of events. OnMouseOut will happen after the onClick, so the img will return to red.

Okay, listen carefully.

If you would just test my way you will see how I do the mouseover and mouseout works!! TEST IT and stop complaining.

Secondly to quit it from changing back to red just do this following:

Code:

---

<script language="JavaScript">
 var out = false;
 function imageChanger (image) {
  if (image == 'red.gif' && !out) {
    document.imageName.src = image;
    out = true;
  } else if (image == 'red.gif' && out)
      ;
  else
    document.imageName.src = image;
 }
</script>

---

This will only allow you to mouseout untill the image is clicked.

Quote:

---

Originally posted by cpradio
If you would just test my way you will see how I do the mouseover and mouseout works!!

---

Yes, the mouseover and mouseout work. So does the mouseclick. And you have nothing to disable the mouseout so it will work again.

Quote:

---

Secondly to quit it from changing back to red just do this following:

Code:

---

<script language="JavaScript">
 var out = false;
 function imageChanger (image) {
  if (image == 'red.gif' && !out)
    document.imageName.src = image;
  else if (image == 'red.gif' && out)
      ;
  else
    document.imageName.src = image;
 }
</script>

---

This will only allow you to mouseout untill the image is clicked.

---

There you go. You finally fxed the problem. I didn't say it couldn't be done, I was just pointing out that the way you did it wouldn't have the desired affect. Since you finally got it in three tries. I won't hold it against you.

But I will hold this against you. The highlighted parts of your code should be changed. The parts in blue are depricated. The parts in red are, in so far as anyone has been able to show me, completely wrong. In other words, "imageName" is not a recognized property or method of the object "document".

ARE YOU BLIND!!!

imageName is the name value of the image. DUH! Check my EXAMPLES!!

Again if you test the code it works, now with the recent function you have to change the onMouseOver code info so it goes to the function but other than that it will work.

IF you are SUCH A GENIUS then why havent you come up with a work-a-round?? STOP critizing me for producing code that works if you cant even produce a shread of code related to this problem.

-Matt

You are such an idiot. You probably have no idea what the W3C is. You probably have no idea that standards exist, and you probably didn't realize that everything I list a few posts ago (relisted here for your convienance), are proper ways of addressing an image.

Your way may work in browsers that do not fully support the standards. But your way is not garunteed to work, and as such, is not advisable. If you simply use one of the method below....

Quote:

---

Originally posted by CiberTHuG

• document.getElementsByTagName("img").item(index)
• document.getElementsByTagName("img")[index]
• document.images.namedItem("foo")
• document.images.item(index)
• document.images["foo"]

---

As to me actually writing a solution, I'm not going to waste my time doing the research (it isn't my problem to solve). I pointed to the manual, now RTFM.

is there to do this with a main picture?

like say you had a gallery of 10 pics thumbnailsized down below on the page
and one bigger pic on the middle of the page
and you mouseover one of them
and the big pic changes to a big version of the moused over pic.....

u get what im saying????