HTML TUTORIAL

Contents

Hover Buttons
Images
Internal Links
Links

Hover Buttons

Hover buttons took me awhile to figure out but after I found a good example of some codes I got it. There are 2 kinds of hover buttons, the ones that have plain text and the ones with pictures.
Here's an example of the code of a basic (plain text) hover button:

<p>

<applet code="fphover.class" codebase="fpweb:///." width="120" height="24">

<param name="color" value="#000080">

<param name="hovercolor" value="#0000FF">

<param name="textcolor" value="#FFFFFF">

<param name="text" value="Hover">

<param name="effect" value="glow">

<param name="url" valuetype="ref" value="http://www.WOW.com">

</applet>

</p>

Below is what the above code looks like when put into a web page.

I will now show you what each of the lines of code does.

<applet code="fphover.class" codebase="fpweb:///." width="120" height="24">

This basically says the size of the button and where the control of the hover button is.

For your web page you can use the "fphover.class" I have uploaded, just link the code to http://www.geocities.com/enchantedforest/tower/2890/fphover.class

------------

<param name="color" value="#000080">

<param name="hovercolor" value="#0000FF">

<param name="textcolor" value="#FFFFFF">

These 3 are basically self-explanatory, the first one tells you the color of the button when you don't have you mouse over it. The second one tells you the color of the button when you hover your mouse over the button. The third tells you the color of the text inside the button.

------------

<param name="text" value="Hover">

This tells you the text that will show up on your button.

------------

<param name="effect" value="glow">

This tells you what will happen when you put your mouse over the button.

------------

<param name="url" valuetype="ref" value="http://www.WOW.com">

This tells you where the Button will link to.

CHAPTER 2: 

The picture hover button. Warning this is hard to do so don't get frustrated if you have to mess around with the code a little.

<META content="text/html; charset=windows-1252" http-equiv=Content-Type>

<SCRIPT language=Javascript>

if (document.images)

{

img1on=new Image();

img1on.src="http://www.geocities.com/enchantedforest/tower/2890/Hover/henson2.jpg";

img1off=new Image();

img1off.src="http://www.geocities.com/enchantedforest/tower/2890/Hover/henson.jpg";

}

function imgOn(imgName)

{

if (document.images)

{

document[imgName].src=eval(imgName + "on.src");

}

}

function imgOff(imgName)

{

if (document.images)

{

document[imgName].src=eval(imgName + "off.src");

}

}

</SCRIPT>

Confused? I sure am, I don't quite understand this yet but I'm providing the code for anyone who wants to figure out, so don't e-mail me about pictured hover buttons cause I'm still experimenting.

 

Back to Top

Images

The following is the code for an image or gif. Just put the location of the image into the quotation marks after you've uploaded it onto your online data base (an example is that mine is ftp.geocities.com

<IMG SRC="picture.jpg">

Back to Top

Links

This is the code for if you want to put a link from your page to someone else's page or somewhere inside of your page.

<A HREF="http://www.henson.com" >The Jim Henson Company</a><BR>

Just put the location of the page into the quotations and the name in between the >< symbols

Internal Links

Before I start explaining what internal links are let me tell you that this whole page is an example of internal links. Internal links are when you have a list of things on one page and you have a link that goes farther down the page. To make this link first you insert in this code where you want to the clickable link

<A HREF="html.htm#hover">Hover Buttons</a><BR>

Then further down the page where you want the link to link to you put this code

<H2><A NAME="hover">Hover Buttons</A></H2>

This will allow you to click on the link and go where the 2nd code is.