DOM Examples

This page is a very simple example of how to produce valid DOM code and also having a fallback, when Scripting is disabled in the webbrowser: Turn JavaScript on or off and see what happens. The code of this page might look awful at first sight, but when you take a closer look, you'll see, that it is merely fooling around with comments (the fallback to non-JS browsers).

You can ignore the comments ,  and the text behind them; they are needed by my site creation script, which is now available for download

toggle text

This is the flag of Austria. The next image shows…

…that ist has a different size. And the next one

is nice, since this page is still valid XHTML 1.1.

The example is not perfect, since you have to play around a little bit with the dimensions of all objects. Just turn off JS to see a problem (images are overlapping a bit). The red box is only there to show how to make sure, that nothing gets printed over the images.

If you are overwhelmed by the multitude of comments and scripts and CSS, then let me point out the most important scripting element here: getElementById.

You can also take a look at the not so nicely styled simplified example, to get the idea.

changing images

To change the content of an image, when hovering, you need simple code:

function toggle(imgsrc) {
  document.getElementById("toggle1").src='../../../img/'+imgsrc;
}

This code fragment is called from the onmouseover and onmouseout handlers of the image:

<img src="../../../img/kStefan.png" height="40" width="39"
       id="toggle1" alt="picture of myself"
       onmouseover="javascript:toggle('kStefan_l.png');"
       onmouseout="javascript:toggle('kStefan.png')"
       />

And best of all, this is even DOM1, and thus very cross browser compatible.

[ top ]

Contact & Imprint — Kontakt & Impressum
Created: 2002-02-23 — last modified: 2002-03-19 — last update of web site: 2010-06-27
Follow me:

Stefan.Huberdoc.at

Exchange content (cross-browser)

DOM Examples

toggle text

changing images