|
|||||||
|
|
|
|||||
|
|
|||||||
On this page, I will explain the glory of MouseOvers. You know, like the one above this paragraph (it takes you to my links page if you click on it). When you put your mouse over top of a picture, you can make the picture change to another picture. That's a MouseOver... aren't they beautiful... MouseOvers add an elegant touch to any web page. And so I will show you how to do them, so that perhaps, you can try your hand at some.
There are many different ways to do MouseOvers and pretty much everyone I talk to seems to have their own personal style, but here's how I did mine:
As an example, I have used the exact code I used for my 'Links' link above:
<A HREF= "..\links\links.html" onMouseOver="top.document.links.src='over.jpg';" onMouseOut="top.document.links.src='out.jpg';"> <IMG SRC="out.jpg" name="links" HEIGHT="100" WIDTH="100" BORDER="0"></A>This code is basically saying:
Create a link to '..\links\links.html' [or wherever you're linking to]. NB: If you have created frames for your webpage, you must also add TARGET="name of frame" after this. Then comes the important bit.
When you put 'onMouseOver' into a link tag, the browser automatically recognizes it as JavaScript code - so you have to write it as such. That code pinpoints the SRC of a specific image, 'links', which is what we change when we want to switch images. Look in the image tag itself, after I wrote the SRC [in the image tag], I wrote 'name="links"', which tells the browser that that particular image is 'links'.
If those sentences are complicated, I apologize, but just continue to read them over and over again, very slowly, until they make sense... please. I just can't think of a way to write it more simply.
So, at any rate, we've now pointed to the SRC of 'links' in the 'onMouseOver' by saying that the SRC is a property of 'links' which is an object in the 'document', which is an object of the entire webpage (top). Essentially, all I did, was start from the 'top' and work my way down to the SRC I wanted to change. NB: Again, if you have frames, you will have to add the name of the frame between 'top' and 'document'.
After that, all I did was give the SRC a different value, 'over.jpg', the second image I want swapped in. The 'onMouseOut' code is for when the mouse moves off the image again, and I want the picture to revert to it's previous form. It is essentially the same, except I switch the SRC back to 'out.jpg'.
As a final note, I will stress that to perform this code without any nasty surprises or bugs, you should ALWAYS state the 'width' and 'height' of your pictures, and both pictures should be the same size. Sorry that took so long, for some reason I was really expecting it to be simpler... Oh well, I'm sure you'll get the hang of it real soon! ^_^*