Run your cursor over the image that make up the words "MAGIC BUTTONS!" above.
If you're running a 4+ version of NN or IE then you can click on them too.
This tutorial-ette is available for download in zip format. (isn't that nice!)
Hello! My name is Joe 
and I'm going to teach you how to make Magic Buttons! We've all seen those images that change when the mouse is over them. Well, they're not very difficult at all to make.
I've seen lately that there are some special software tools that can help you insert these mouseover effects and apparently some web editors are adding a button for that too.
So, if there are "automated" tools that do this, why should I mess around with inserting the code by hand?
Same reason you should learn to author HTML by hand... flexibility, power and confidence. The flexibility to always be able to do what you want to do without having to wrestle with some editor. The power to add, change and manipulate the script in ways the helpful tool would never be able to do. And the confidence that comes with knowing that not only can you out-manuever any editor, but if something goes wrong, you have enough of an understanding to be able to fix the glitch and be on your way while others are standing there holding their "editor".
This is a basic mouseover...
Clicking on it takes you to a another page. Here is the button on a page all by itself.
The idea behind the mouseover is very simple...
When the page first loads, it displays the following image:
When the cursor passes over the image, a second image gets swapped in its place:
When the cursor moves off the image, the first image is swapped back:
Let's build this example from scratch. First we'll make the target page. Copy the following and save it as another.html.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#0000CC"> <H1 ALIGN=center>Another page!</H1> </BODY> </HTML> |
And save this as mysample1.html.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> |
Insert the default image...
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img01"> </BODY> </HTML> |
At this point in time, it's not overly important that you understand exactly what's going on here. Just build the thing one piece at a time.
Insert <SCRIPT> tags...
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- //--></SCRIPT> </HEAD> <BODY> <IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img01"> </BODY> </HTML> |
Insert the image preloading statements. These cause the image files to download and get into the browser's cache so the mouseover works smoothly. This should be done for every image you use in the effect...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22"
BORDER="0" ALT="" NAME="img01">
</BODY>
</HTML>
|
Next add the function. This is the "engine" if you will. Tell it which image to swap with what, and it does it.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22"
BORDER="0" ALT="" NAME="img01">
</BODY>
</HTML>
|
And lastly add the credit. (Optional of course)
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
/*********************************************************
M A G I C B U T T O N S v3.1
https://www.htmliseasy.com/buttons/
Permission is granted to freely use this script.
**********************************************************/
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22"
BORDER="0" ALT="" NAME="img01">
</BODY>
</HTML>
|
Now add a standard link...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
/*********************************************************
M A G I C B U T T O N S v3.1
https://www.htmliseasy.com/buttons/
Permission is granted to freely use this script.
**********************************************************/
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="another.html"><IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22"
BORDER="0" ALT="" NAME="img01"></A>
</BODY>
</HTML>
|
Then add the javascript commands to the link...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
/*********************************************************
M A G I C B U T T O N S v3.1
https://www.htmliseasy.com/buttons/
Permission is granted to freely use this script.
**********************************************************/
// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}
function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="another.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG
SRC="clickme1.gif" WIDTH="75" HEIGHT="22"
BORDER="0" ALT="" NAME="img01"></A>
</BODY>
</HTML>
|
And that's it!
Get this working and in part 2 we'll examine a little more closely what's going on.
| Magic Buttons - Javascript MouseOver Tutorial |
| Part 1 · Part 2 · Part 3 · Part 4 · Part 5 · Images · Index of examples |
| HTML 4.0 Reference Barebones HTML Guide |
|