If you're comfortable with HTML, you may take a look at:

• JavaScript examples,
• Dynamic HTML examples,
• References on JavaScript and DynamicHTML.

JavaScript examples

With JavaScript you can program and control the content and behavior of a HTML page. All the program runs on the client computer, with no connection to the server where the page is stored.

The most popular bits of JavaScript are visual effects, such as rollovers, but there is so much more than that to JavaScript...

How to make an Advent Calendar with JavaScript

With an Advent Calendar, families prepare for Christmas, representing each day from December, 1st to December, 24th with a numbered window (or door, drawer, etc.). Every day, the corresponding window is open, revealing a surprise.

More than presenting a Calendar, this is an exercise to show the methodology to build an application with JavaScript, with step by step instructions.

Published in February 2005.

E-mail coding

A simple method to hinder the capture of e-mail addresses by software robots specialised in e-mail gathering for spam and virus spreading purposes.

First published in May 2003.

Slideshow

Adapted from a classical example; you can use to show a slow animation, but I believe it is best used as slide projector. Step-by-step guide in English.

First published in the Spring 1998.

See also the JavaScript applications.
 

DynamicHTML examples

With HTML stabilised on release 4.0, the development of new Web presentation and layout techniques opened new tracks instead of pursuing the old ones.

One of the new tracks was Dynamic HTML, which is simply layers defined with Cascading Style Sheets whose position and behaviour is controlled with JavaScript. I concede that theoretically is much more than that, it is a language based on a new Document Object Model, but for practical terms, this definition suffices.

Unfortunately, the two leading designers of Internet "fashion", Netscape and Microsoft, could not reach an agreement and they chose different programming protocols to reach, in most cases, similar results.

During the transient period until a unified Document Object Model is accepted, the Dynamic HTML programmers had to duplicate the code to suit both browsers. A standard was proposed by the W3C, and both browsers converged towards it from Internet Explorer 6.0 and Netscape Navigator 6.0 (and 7.0, released a little later). However, it is wise to maintain the browser-dependent versions for a while to suit older browsers.

I present some examples of HTML, with an emphasis on show/hide and displace layers. As a consequence of the new DOM, some of these examples may not run on some newer browsers. The browsers they were designed for are indicated.
 

Dynmenu, tutorial on Dynamic menus with DHTML

A step-by-step tutorial on how to implement dynamic menus - such as the ones used in this page. The tutorial embeds an example of the subject.

This is the first tutorial/application to be based on the new W3C DOM mentioned above, while maintaining compatibility with earlier browsers. Web design and additional features are also discussed.

Netscape Navigator 4.0 and later, Internet Explorer 4.0 and later.
First published in October 2003.

Aquarium

A pure DynamicHTML example: it has no purpose than to please the eyes. It is a window where different types of fish swim smoothly.

Each fish or school of little fishes is stored on its own layer and the script just shows/hides the layers and moves them around. Since the layers are transparent it is possible to stack them, suggesting a 3D aquarium.

Netscape Navigator 4.0 and Internet Explorer 4.0 and 5.0.
First published in 1998.
 

Magnifier Lens

This is a script to present an enlarged version of a photo.

The working principle is as follows:

1. Over the original image, a layer with the enlarged image is added.
2. The position of this layer is associted to the cursor's position. The visible area is constrained to a rectangular window, simulating the magnifier lens.
3. When the user moves the cursor, the layer with the enlarged image moves accordingly and the offset coordinates are adjusted to match the original image below.

Netscape Navigator 4.0 and Internet Explorer 4.0 and 5.0.
First published in July 2000.
 

Pocket lamp

An example similar to the previous one. A different area on a dark underground room is revealed by moving the cursor as someone moving a pocket lamp (also known as a flashlight).

This example is explained thoroughly, including the code for two different versions.

Netscape Navigator 4.0 and Internet Explorer 4.0 and 5.0.
First published in May 2000.

In addition to these tutorial examples, you're invited to visit my Dynamic HTML applications.
 

References of JavaScript and DynamicHTML

Netscape's JavaScript Developer Central. A fundamental reference on JavaScript: specifications, tutorials, examples, foruns, etc..

Voodoo JS Guide: A manual on JavaScript. A concise and clear manual, requiring very little programming expertise.

The JavaScript Source: archive scripts, explained step-by-step. The visitor is encouraged to try the scripts and copy them to its own pages.
 

Danny Goodman's Javascript pages: author of books and on-line courses, with emphasis on functionalities and not on the visual effects. Good historical reference on browser compatibility. This is the support site of the well-known book "The JavaScript Bible" by Danny Goodman
 

Essential JavaScript for Web professionals by Dan Barret, Dan Livingston & Micah (book) - An comprehensive course that leads the beginner from its first scripts to some of the most common sophisticated scripts.

Dynamic HTML - The Definitive Reference by Danny Goodman (book). A reference book that was quot;definitive" in 1999. Today, it has been superseded by the new DOM [Document Object Model] proposed by the W3C and implemented in Internet Explorer 6.0, Netscape Navigator 6.0 and later releases.
 

Essential CSS & DHTML for Web professionals by Dan Livingston & Micah Brown (book) - Similar to the JavaScript book by the same authors, It may be somehow frustrating in case the reader is interested on different applications than the ones explained.
 

Mozilla.org: a browser developed by the open-source paradigm, designed to meet multiple platforms and operative systems, and embedding the W3C recomendations. Includes a vast documentation on XML, Document Object Model, JavaScript, Style Sheets, etc..
 

HTML Guru - an fascinating site associated to a book (which I don't know). The eye pleasure is guaranteed and you will also find pointers to other art pieces.

DHTML Lab - A site to learn and share knowledge.