JavaScript Tool Kit #3

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.

<div style="display:none">
<script type="text/javascript">
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
//--> </script>
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:

<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);

Web page:

Interactive Div

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

<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:

Plural Noun:
Part of body (plural):
<script language="JavaScript">
function create(form) {
var start="go";
if (start=="go") {

text = ("<head><title>Marc Antony's Address from Julius Caesar</title>");
text += ("<style type='text/css' media='screen'> body { padding:20px } </style> ");
text += ("<p style='font: bold 14px/18px sans-serif; '> Marc Antony's Address from Act III, Scene II of <e>Julius Caesar</em> </p>");
text += ("<p style='font: normal 14px/18px sans-serif; '> Friends, Romans, " +form.input1.value+ " lend me your " +form.input2.value+ "... </p>");
text += ("<br /><br /><input type='button' value='close window' onclick='top.window.close()'>");

msgWindow=window.open("","displayWindow","toolbar=no,width=250, height=200,directories=no,status=no,scrollbars=no,resize=no,menubar=no")
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)">

Click here for a more complex example.

Previous | Webwork Table of Contents | Next >

Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
Along the Mississippi River
The Work of Antoni Gaudí

Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

Graphics, sounds, and other ancient
items from the dawn of the Web.


Jay Boersma