HTML3
Sections
  Home
    Intro
    History
    FAQ

  Choices
  Side bar

  Styles
  Headers
  Footers
  Effects
  Chars
  Address
  Links
  Images
    Rollovers
  Tables
  Forms
  SSI
  Plugins
Resources
  Colour editing
  Image creation
  JS Tricks
  Servers
  Tokens
  Latin-1
|
|
HTML³: JavaScript Tricks |
-
-
|

JavaScript Tricks

Here are a few more tricks you might want to try in JavaScript; they're not available from any HTML³ window, but shouldn't take too much modification of existing code to get working.


Forms

Many sites have a drop-down list of sections - you choose a section from a menu, click on some kind of submit button, and you're whisked off to that section. It's a nice compact way of having links to many pages without having to show a huge list of textual links.

However, if you have to click on a submit button, that general means your selection is being handled by a program on a server somewhere; the transaction goes something like this:

  Browser: Hmmm, someone's selected an option;
           I'd better change the list display.
  Browser: Ah, now they've clicked on Submit;
           I'd better go ask the server what to do
  Server:  What?
  Browser: Here's some data from a form
  Server:  You don't want to be here; you should be over there.
  Browser: Okay, I'll go over there then.
Using JavaScript, you can shorten that to:
  Browser: Hmmm, someone's selected an option;
           I'm going there now!
Here's the code to do this:


<script language="JavaScript">
<!--
function formHandler(){
var URL = document.myform.myselections.options
  [document.myform.myselections.selectedIndex].value;
window.location.href = URL;
}
// -->

</script>

<form name="myform">
  <select name="myselections" onChange="formHandler()">
    <option value="">-- Please pick one --"</option>
    <option value="index.html">An index page</option>
    <option value="index.html">Another index page</option>
    <option value="index.html">Index page again</option>
  </select>
</form>

The first part, the script, sets up a function called formHandler; this defines a variable called URL on one long line (it's split in two in the above example because it's so long, but should all be on one line). URL is defined using the value taken from the selectedIndex of document.myform.myselections.options - the list of options in a selection called myselection, which is in a form called myform, which is in the current document.

Next you set up the form - named myform of course - and a list of selections - called myselection. The selection list has one extra attribute - onChange="formHandler()", which tells the browser that when this selection is changed, go use the function formHandler() we set up previously.

The options have URLs as their values - these can be anything that you would normally have as a text link, for instance:

  file.html
  ../file.html
  /file.html
  http://www.domain.tld/directory/file.html
and so on. I've got them all pointing at the same index page so that you can use the following example without having to go online:

Click here for the working example

You can of course combine both the traditional and JavaScript methods by adding in a submit button and the method and action attributes into the form.



Images

Here are two pieces of JavaScript you might want to use, which use the same ideas as the rollover code in HTML³ but take it a little further.

Both examples use a default image and four replacements, so they'll both need this chunk of code to both pre-cache the images and set up the correct variables:

<script language="JavaScript">
<!-- 
if (document.images){

var myimage=new Image()
myimage0.src="0.gif"

var myimage1=new Image()
myimage1.src="a.gif"

var myimage2=new Image()
myimage2.src="b.gif"

var myimage3=new Image()
myimage3.src="c.gif"

var myimage4=new Image()
myimage4.src="d.gif"
}
// -->
</script>
It's setting up an image with the name of myimage, which has the filename 0.gif associated with it and the javascript variable myimage0 set so that you can later jump back to this image; then we set up four new images called myimage1 to myimage4, with the filenames a.gif to d.gif. It's very similar to the rollover code, but instead of an image having an on and an off version, it now has five alternatives.

Switch

One example mentioned in the rollover documentation is code to change one central image when you move over different links, so that's where we'll start.

This is actually much easier than rollovers, as you don't need any controlling code - you have it built into the links themselves. Other than that it's much the same - you have the pre-caching code, an image which has been given a name (myimage in this case), and links which, when moved over, will change the image.

<!-- pre-cacheing code here -->

  <img src="0.gif" name="myimage" alt="Image">

  <a href="javascript:void(0)"
   onMouseOver="document.myimage.src = eval('myimage1.src');"
   onMouseOut="document.myimage.src = eval('myimage0.src');">
  1
  </a>

  <a href="javascript:void(0)"
   onMouseOver="document.myimage.src = eval('myimage2.src');"
   onMouseOut="document.myimage.src = eval('myimage0.src');">
  2
  </a>

  <a href="javascript:void(0)"
   onMouseOver="document.myimage.src = eval('myimage3.src');"
   onMouseOut="document.myimage.src = eval('myimage0.src');">
  3
  </a>

  <a href="javascript:void(0)"
   onMouseOver="document.myimage.src = eval('myimage4.src');"
   onMouseOut="document.myimage.src = eval('myimage0.src');">
  4
  </a>

And that should come out a little something like this...

Image
1 2 3 4

What you should see is a fuzzy animated GIF which changes to a coloured block with a white number in it when you move the mouse over a link, the same number as the link you've just moved over (the onMouseOver part). It should then change back to a fuzzy animation when you move off the link (the onMouseOut part).

You can also click here for a nicer example

Slideshow

Now we're going to try the same thing, but with only one link to change the image. It uses the same pre-cacheing code, but we also need a little more JavaScript to control things:

<script language="JavaScript">
<!--
var screencount=0;

function moveon(imgName) {
  screencount++;
  if (screencount > 4) {
    screencount = 1;
  }
document[imgName].src = eval(imgName + screencount + '.src');
}
// -->

</script>

What this is doing is setting a variable called screencount to 0, and then defining a function called moveon - similar to rollon in the rollover code, but without the matching rolloff. When called it will increment screencount (which means screencount will never be less than 1 by the time it's used), and then checks to see if it's above 4; if so it'll drop back down to 1, so we'll only get a result between 1 and 4.

It then changes the image passed in imgName - in our example myimage - to use the image associated with our number - myimage1.src to myimage4.src.

To call this function, you just need a link with an onClick event, and an image to change:

<img src="0.gif" name="myimage" alt="Image">

<a href="javascript:void(0)" onClick="moveon('myimage')">
Click here
</a>

Notice how the link is to "javascript:void(0)"? This is because you don't really want to go anywhere when you click on this link, you're just using it as a means to detect a mouse click. You can also use a simple a href="#", although this makes some browsers jump to the top of the page, and some versions of Fresco to complain about jumping to a non-existent label, so you can also set up a proper anchor (a name=...), although this might make the page jump a little when you click on it. I've also changed it from using myimage as a label to myimagebeta because it would clash with the Switch demo if they both had the same names.

Put this all together and you get something like this...

Image
Click here

You'll notice that it only goes through the four new images and then returns to the first new image, it never goes back to the fuzzy version - you can make this image 5 if you want, but don't forget you've got to change the maximum value for screencount, and you've got to add to the pre-cacheing code something like

var myimage5=new Image()
myimage5.src="0.gif"

You can click here for a nicer example. If you really want to play with this type of thing, click here for the automated slideshow which uses a timer to automatically change the slide. You could use animated GIFs of course, but this example can change the timer interval on the fly, and can also use JPEGs or PNGs instead of GIFs.


Time-based colour changes

The following is a snippet of Javascript (with a non-JavaScript fallback) that I used recently to create a website that changes colour depending on the time of day.

I've done this kind of thing before using server-generated pages to reflect the time in the UK (even fetching the correct sunrise and sunset times from a weather site for added geekness), but because Javascript is used here it depends on the viewer's local time, not the time at the server where the page was downloaded from. This is probably more useful when you think about it.

You can use DHTML/CSS commands to change background attributes, but using JavaScript to write the necessary data directly means that it works on more (i.e. older or RISC OS) browsers.

<script language="javascript">
<!--
var now = new Date();
var hour = now.getHours();
var backColor = "#990033"; //regular darkish pink
if (hour < 6) { backColor = "#000066";} //dark purple (night)
if (hour >= 6) { backColor = "#CC6699";} //light pink (morning)
if (hour >= 9) { backColor = "#990033";} //regular darkish pink (day)
if (hour >= 16) { backColor = "#990000";} //dusky orange (sunset)
if (hour >= 18) { backColor = "#000066";} //dark purple (night)
if (hour == 0) { backColor = "#9999CC";} //silver-blue (midnight)
document.write(backColor);
// -->
</script><noscript>#990033</noscript>

If you're wondering about some of the colours used, the site was for a woman specialising in makeup and hair so the colours are a bit girly; I'll leave it up to you to change the colours, and if you want to simplify things you can alter the times and cut a few of them out.

The example above just writes a colour definition; you could make it write the whole command, or a number of commands, depending on what you want it to do. The site I created this code for used tables to create coloured bars; black top and bottom, dark coloured bars just in from them, and a lighter main area in the middle for the text. If the background colours got too dark it also used style sheet commands to re-write the link colours to show up better. I've included a simplified example for you to play with.


HTML³: © Richard Goodwin 1997-2002

|