The a href = "http://www.webspan.net/~herbs/jcheetah/htmljavascript.html" part of the fragment of code tells the computer that there will be a link. The onMouseOver = "on()" tells the computer that the computer should do the function called on() when the visitor places his mouse over the link. The MouseOver is actually a JavaScript code, but can be placed in the HTML language. A function is a command in JavaScript that tells the computer to do a command or series of commands when it is accessed. All functions must end in (). The onMouseOut = "off()" tells the computer to do the function named off() when the user takes his mouse cursor off the link. The MouseOut is also a JavaScript code which can be placed in the HTML language. Img src = "changeimage_off.gif" name = "image_on" tells the computer to load the image called changeimage_off.gif and name it image_on. The border = 0 tells the computer to get rid of the border that it would normally put on and the </a> tells the computer to end the link. When you put the entire HTML code together, you get the image called changeimage_off.gif to load as a link without a border to http://www.webspan.net/~herbs/jcheetah/htmljavascript.html. You also get the image to be called image_on. Lastly, when your visitor puts his/her mouse cursor on the link, the computer should do the function called on() and when he/she takes it off, the computer should do the function named off().
The JavaScript CodeAll this does is tells the computer the language that is going to be used. This must be included to make the image morph or any other JavaScript work.
<!-- Begin hiding here --Since some browsers can't read JavaScript, they just read over the JavaScript code as text and show it to the user as text. This fragment of code begins the commenting out of this text if their browser cannot read JavaScript.
// these scripts by Jason Schanker (jcheetah@orion.webspan.net)These are a bunch of comments which must be left in here if you use this script. The // means comment out. When the computer gets to this part, it skips over it. This is not exactly how it was written in the document source, but it looked ugly with the asteriks on the page so I left all of them out except for the first. The // is used for one line comments.
function on()This function on(){ part tells the computer that the function, on is going to be defined. All functions must have () at the end. The document.image_src = "changeimage_on.gif" tells the computer that the image, changeimage_on.gif should replace the image with the name of image_on. Since the image, changeimage_off.gif is named image_on, it will be replaced with changeimage_on.gif. The reason the image does not change immediately is because this source is written in a function and functions only get activated when called. To call a function, you just call it by the name. In this case it is called by on(). In the link tag in the HTML code, there is something called MouseOver = "on()" which means when the mouse cursor goes over the link, the computer should activate the function on(). Since the function on() tells the computer to change the image to changeimage_on.gif, the image will change to changeimage_on.gif when the user puts his mouse cursor over the link, which in this case, is the image itself. The } ends the function.
function off()The function off(){ part tells the computer that the function, off is going to be defined. The document.image_on.src = "changeimage_off.gif" tells the computer that image_on should be replaced with changeimage_off.gif. In the code I made, this function is activated by the MouseOut command. Since I put MouseOut = "off()" in the link, the image will change back to changeimage_off.gif when the mouse cursor is taken off the link. Do you see how it works now? When your user puts his/her mouse cursor over the link, it does the function, on() which changes the image to changeimage_on.gif and when the user takes his/her mouse cursor off, the function, off() is done which changes the image back to changeimage_off.gif. The } ends the function.
// -- End hiding here -->This ends the commenting out for browsers unable to read JavaScript.
</script>This command tells the computer that the end of the JavaScript source has been reached. If you do not include this in your document source, the rest of your HTML document will be considered as JavaScript and the computer will not be able to comprehend the rest of the document. Also, the computer will give you Error Alerts.
You do not have to use functions for image morphs. In fact, you really shouldn't since these functions only work on one image morph. Functions should work on a couple of items. The reason I have it the way I do is because I wanted to make explaining it as easy as I could. If you want to make the code without functions, replace the on() in the MouseOver and off() in the MouseOut with their actual function (the indented lines) and change all the double quotation marks in the function to single quotation marks. You do this for the same reason you wouldn't put double quotation marks in a quote. Also, if you want to use different images then I did, just replace the images with the one you would like, if you would like to change the name of the image, just change the name, and if you would like to use a different link then I did, change the link address (pretty obvious, right?).
JCL's HTML & JavaScript Tutorial