Magic Buttons.
Hello! My name is Cayne 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.
This is a basic mouseover...
Clicking on it takes you to an another page. 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.
<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
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!