Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

Yet another collection of short, simple JavaScripts that do various useful things.

Pre-Load Images

If your page uses a lot of image rollovers, you will want to pre-load the "rolled-over" images so there will be no time lag between the first image being changed to the second image.

Source:

Web page:

Nothing will be displayed on the web page because the images are pre-loaded into a div that is set to display:none.

This script can be placed anywhere in the body of your HTML doc.

Write Today's Date:

Source:

<div style="font: normal 14px/18px 'trebuchet ms', sans-serif">

<script language="JavaScript">
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(month + "/" + day + "/" + year);
</script>

</div>

Web page:

Interactive Div

This one is useful for creating buttons or providing a larger target area for the user's cursor.

Source:

<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#fed';" onclick="alert('Thanks for clicking.');" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #fed; margin: 20px 20px 20px 20px; ">Click anywhere in this div to pop up an alert.</div>

<div onmouseover="style.backgroundColor='#fff';" onmouseout="style.backgroundColor='#def';" onclick="top.location.href='http://www.re-vision.com/webwork';" style="cursor:pointer; border: #789 solid 1px; padding: 30px; background: #def; margin: 20px 20px 20px 20px; ">Click anywhere in this div to load the Webwork Table of Contents.</div>

Web page:

Click anywhere in this div to pop up an alert.

Click anywhere in this div to load the Webwork Table of Contents.

"Mad-Libs" JavaScript Games

The Mad-Libs party game is one where words are collected to fill in the blanks in a pre-written story which is then read aloud. The results are (with luck) funny. Originally done with paper and pencil, Mad-Libs are well-suited to Javascript because of its ability to gather data from a form and present it back in whatever format the script-writer wants.

Here's a simple example based on Marc Antony's famous speech:

Head:

Body:

<form>
Plural Noun: <input type="text" name="input1" size=20>
Part of body (plural): <input type="text" name="input2" size=20>
<input type="button" value="Generate story" onclick="create(this.form)">
</form>

Click here for a more complex example.