Logo
Overview of most HTML / JavaScript examples
Use them as you please, just keep the hidden notice
 

Netscape 4 user warning: Netscape 4 has a bug, ermmm lets call it a feature, which hides Dynamic JavaScript code and replaces it with the end result of that code. So use NS2/3 or IE3+ to get the source of the following examples.

= The really interesting items

  Table of Contents :
      Form related examples : jumpTo, eMail, Javascript verification, Time&Date
      Image related examples : image change, thumbnail viewer and banner link
      Sound related examples : MIDI playlist, RealAudio, WAV embed, random MIDI
      Table related examples : sliced image, nested tables, spawning tables
      Game related examples : little Quiz example, find the 'piggy' shell game
      Diverse related examples : browser detection, resolution trick and password

 

Form related examples
Have you always wanted to have a drop down box with links in them? Well here is an example with all the 3 ways possible to do it. Either via a Button, Text/Image or Direct after selecting an entry.

jumpTo example

An example E-Mail form can be used when you don't have access to ASP or CGI. It is directly supported by Netscape in combination with Netscape Mail. Internet Explorer in combination with Outlook Express (IE4) supports it also and IE3 will work if it's linked to a supportive Form-mailto: email client (The default Microsoft Mail for IE3 needs an update to work).

Form example with email ability

If you want to check what a user has filled in the form, so it will be passed correct, then you can use JavaScript to test for correct input. This example checks to see if the email address is correct and if the comment box contains some info.

JavaScript verified Form example

Show the current time and date the user has on there computer in a form. This is not the most exciting script to use, I mean most people do know the time already, but heck you might like it.

Show time & date example

Go back to Table of Contents

 

Image related examples
Example of onMouseOver image change with pre-loading of images. The script used is functional for ALL versions of Netscape 3 and Internet Explorer 4 and above. Non supportive browsers will still show the first image and work on the link, just not the image change.

onMouseOver image change example

Here is a method to show large quantities of graphical images. On the example text links are shown, but they can be replaced by small thumbnail versions of the image (use seperate image file).

Thumbnail viewer example

If you have no ASP or CGI access and still want to give some sort of a banner then this example contains how to have a different image with link appear when loading a page.

Banner link example

Go back to Table of Contents

 

Sound related examples
This example demonstrates how to combine a form jumpto script with a MIDI player. It allows you to select a song to play and change it real-time.

MIDI list example

To have RealAudio on your site, use the code as u please. It shows a working example on <a href> linking to play a http:// streamed RealAudio file and how to play it on a webpage via the Plug-in option so you see the actual player on the webpage.

RealAudio on webpage example

HTML example of an embedded WAVe file (can be changed to MIDi file also). The same embed line can be used for MOV/AVI files also, just change it into controls=all width=320 height=240 so it will show the movie.

WAV on webpage example

Playing a different Midi file when the page is reloaded is possible also. The JavaScript to do that is used in the next example.

Random MIDI example

Go back to Table of Contents

 

Table related examples
For faster loading, easier to control and other things, it is advised to use seperate small images instead of a large one. Especially for onMouseOver effect on large imagemaps.

Sliced image example

If you want to have the same way CNN.COM and CNET.COM use with a menu at the left, main contence at the right without usage of frames, then this example is what you need.

Nested Table example

Eventho I prefer nested tables, didn't wanted to let you miss the change of looking at a complex normal table. This example shows you how to use the colspan and rowspan tags for a table.

Spawning Table example

Go back to Table of Contents

 

Game related examples
Always wanted to be your own Quiz master? Well now you can with your own spicy JavaScript page derived from this example. In the example are five different ways used to get an answer. I think that covered them all, but I might be wrong. More explanation is inside the source.

Quiz example

Simple Shell game example, just click the globe and find the piggy :). Sounds stoopid and it actually is, but still fun to play and it's also the code behind the game that might be interested to some.

Shell Game example

Go back to Table of Contents

 

Diverse related examples
JavaScript methods to detect the browser being used and direct to the page meant for that type of browser. This example works more from the way, it checks if the browser supports something, rather then check the name and version.

Browser detection example

To have your browser in 640x480 mode while your screen is at higher say 1024x768 use the following trick page. It works on the principle that you can have a window set at maximum and at a normal state. Be sure the window isn't maximized, before u change it. (Every 3 second this page reloads itself to remove any frameset if present).

High/Low resolution trick

If you don't have access to .htaccess file, like on a GeoCities account, or simply because you aren't allowed such access, then you can still have a simple password protection. This is done via JavaScript. More explanation on this is in the example itself.

Password protection example

Go back to Table of Contents

Document last updated on :