HTML Help Online

Getting Started
Editors
Design Tips
Home

HTML:

The Basics
Adding Color
Adding Images
Backgrounds
Links
Text Format
Page Format
Tables
Frames
Forms

More Than HTML:

Audio
Meta Tags
>>JavaScript
Cut & Paste JScripts
Style Sheets
IE with Style
IE Form Colors
MS Trans. Effects
Special Character Set

Help Desk:
Quick Reference

Free Stuff:

Graphic Designs
Fonts
Midis

JavaScript

This tutorial is for enhancing HTML commands with JavaScript. There are no actual JavaScripts here; for scripts click here.

There are many ways to enhance HTML and FORM commands with JavaScript. I will go through a few basic enhancement scripts here. Some commands will not work with all browsers so I have indicated either NS for Netscape, IE for Internet Explorer, or Cross for both.

When editing javascript, turn off the wordwrap of your application. The javascript commands MUST be all on ONE LINE. Otherwise, the commands will not work.

Fixed Background - IE only

Thank you Scott.

This is not actually a javascript, but I put it here anyway. To make your background fixed or 'unmoving' you will need to add an attribute to the <body> command:

onMouseOver/onMouseOut

Cross.The "onmouseover" and "onmosueout" commands are the most commonly used enhancement for links. Although both NS and IE recongnize the commands, some values are not. Confusing, I know. But bare with me.

Status Bar - Cross

Put customized text in the status bar at the bottom of the window.

<a href="page.html" onmouseover="window.status='Your text here';return true" onmouseout="window.status=' ';return true">Your link</a>
Reads:
Your link

Notice in the onmouseout command there is a space between the single quotes. This is so the text in the status bar will disappear when the mouse is removed from the link. If you want the text to remain in the status bar, omit the onmouseout command.

Image Flip - Cross

You will need two images in your directory. One for the normal image and one for the image that will be displayed when the mouse is passed over the link.

It is important to "name" your image EG. <img src="image-off.gif" name="iname">. This is to let the browser know which image is being changed.

Link Color Change - IE

This will change the color of the link without the use of images.

<a href="page.htm" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">Your Link</a>
Reads:
Your link

onClick

With one click windows will open and alert and confirmations will pop up! Here's how to do it:

Open Window - Cross

Opens a new window when a link is clicked.

<a href="page.htm" onClick="winodw.open('pageforwindow.htm','newwin','height=?,width=?')">The link</a>
Reads:
The Link

Take a look at the code, the "page.htm" should be the current page, the "pageforwindow" should be the page you want to open in the new window, 'newwin' is the name of the new window, and 'height=?,width=?' is the height and width of the new window. Notice that there are no spaces in the height and width specification, do not put spaces when configuring the window. Other attributes of the window are:

Buttons - Cross

Buttons can be made with the <form> command and the onClick to give the button an action.

The alert
<center><form>
<input type="button" value="Click Here" onClick="alert('Hello World')">
</form></center>
Reads:

Take a look at the code. The input type makes the actual button, the value is the text displayed on the button the onClick activates the alert box and the 'Hello World' is the text that will be displayed in the alert box. Pretty simple huh?

The confirm
<center><form>
<input type="button" value="Click Here" onClick="confirm('Hello Again')">
</form></center>
Reads:

As you can see there is not much difference in the actions of the alert and confirm box except for the confirm has an "OK" and "Cancel" buttons. Well, without another script, the actions are exactly the same. Here is a small script to help the confirm button work properly.

<SCRIPT LANGAUAGE="javascript">
function conFirm() {
if (confirm("Are you sure you want to enter?") )
{
parent.location='page.html';
alert("Good choice");
}

else
{
alert("Then you'll stay right here");
}

}
</SCRIPT>

The script will go in the head of the page and the onClick command in the above code will change to:
onClick="conFirm()".

Test it:

Enter/Exit

Give your visitors a choise of either entering your site or not.

The "history.go(-1) is the javascript function for making the browser go back one page in the history file. The location.href is the location of the "page.htm" is the entrance page of the site.

You can also use the onClick command with the <a href> command:

Goodbye
The code:
<a href="blank.htm" onClick="alert('Thank you for visiting my site')"> Goodbye</a>

More to come...