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.
The complete Magic Buttons tutorial-ette is available for download to members in zip format. (isn't that nice!)
This free online version contains one lesson page that covers a basic mouseover. For more in-depth material, along with quite a few neat effects demonstrated & explained, I encourage you to become a member today!
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".
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...
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
http://www.pagetutor.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
http://www.pagetutor.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
http://www.pagetutor.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.
Part 2, along with other parts is available to members only. In these later lessons we get much more in depth explaing exactly what the code is doing. You'll learn more than just a basic mouseover... you'll learn the mechanics behind the "image object" and you'll learn how to put all sorts of interesting effects in your pages. if you're not a member yet, I encourage you to join. You can get a lifetime membership and there's lots here to keep you busy!