Simple and Fun

Abstract: A few simple, fun, and occasionally useful things to do with JavaScript.

Describing Your Links

Often, the text that you use for your links is not sufficient to describe the page that you've linked to. Many web designers find it useful to include an extra comment in the status bar when someone moves the cursor over the link. This is easy to do in JavaScript (and is pretty close to what we just described). In your a href tags, include an additional onMouseClick event handler that updates the status bar, as in

<a href="http://www.math.grin.edu/~rebelsky/"
  onMouseOver='window.status="Dreadfully boring"'>
  SamR's Front Door
</a>

An example.

Updating Images

Surprisingly, you can even update images on the page as long as you include a name parameter in your img tags. To change an image, set it's src to a different image. Here's a sample in which the image begins as a fish, changes to a different fish while we're over the link, and then changes back to the first fish when we leave the link.

<img name="changme" src="Images/fish1.gif">
<a href="http://www.slagoon.com"
   onMouseOver='document.changeme.src="Images/fish2.gif"'
   onMouseOut='document.changeme.src="Images/fish1.gif"'>
  Something's fishy</a>.

I've used a similar technique in an example.

Customizing Your Pages

Finally, as we've seen before, you can customize your pages by asking for information when the page opens and then putting that information at appropriate places on the page. In a future session, we will learn ways that you can remember that information when going from page to page.

For example, you might check for particular user names. Here's some code I might use to provide a slightly different custom page for myself.

<script language="javascript1.1">
var person = prompt("What is your name?", "");
document.write("<h1>Custom page for " + person + "</h1>");
if (person == "SamR") {
  document.write('<p><');
  document.write('a href="http://www.math.grin.edu/">');
  document.write('Visit the dept.');
  document.write('</a></p>');
}
</script>

You can also view an example that uses this code.