will this work as a button with three images?

Hey i have this html for my website. I just used button.gif, buttonover.gif, etc. for examples. I want to make a button with three images that when gone over with mouse a different image displays and a different image displays when clicked. I used mysite.html as an example link.

<a href="http//www.mysite.html"><img ="button.gif" onclick="buttonover.gif" onmouseover="buttonclick.gif" height="36" width="100"></a>


thanks

Quote:

---

Originally Posted by Repatilian

Hey i have this html for my website. I just used button.gif, buttonover.gif, etc. for examples. I want to make a button with three images that when gone over with mouse a different image displays and a different image displays when clicked. I used mysite.html as an example link.

<a href="http//www.mysite.html"><img ="button.gif" onclick="buttonover.gif" onmouseover="buttonclick.gif" height="36" width="100"></a>


thanks

---

woops i meant onclick="buttonclick.gif" and onmouseover="buttonover.gif"

Quote:

---

Originally Posted by Repatilian

woops i meant onclick="buttonclick.gif" and onmouseover="buttonover.gif"

---

should i take the height and width off?

No, that won't work. onclick and the other events are for Javascript code which can change the image, but not directly like that. It would be nice if it were that easy, but it's not, so you'll need to learn Javascript or use one of the many existing scripts available for free, including some on this site.

you can put javascript directly into the image tag, but it's not very efficient, and it limits what/how much you can do. And, since it's a fairly outdated technique (and generally frowned upon now), I don't know what browser support will be like. You need to make some adjustments to the way you're writing your code (highlighted):

<a href="http//www.mysite.html">
<img src="button.gif" onclick="src='buttonclick.gif'" onmouseover="src='buttonover.gif'" height="36" width="100">
</a>

As long as all three buttons are the same size, don't remove the height and width attributes.

Also note the single quotes ( ' ) used inside the double quotes ( " ). You'll confuse things if you don't do it that way.

You should note, however, that the button image will never revert to the original button.gif. You'd need to add a mouseout event to handle that:

onmouseout="src='button.gif'"

As I said, this will work, but it's limiting and messy. much better to put it all into an external javascript file (or at least a <script> tag).

Wouldn't it need to be this.src rather than just "src"? Or is that a local scope variable I've never known about...

dunno. Like I said, it's a way outdated technique, and not the best way to do things. I first came across it in a site that was written in html 3.

But try it out, it works

I couldn't resist trying. It does appear to work in the big 5.
Demo

Interesting, and very convenient. It seems there's no real reason not to use this except that if you add functions instead, it's possible to modify this later and have more control.