Copyright Michael Karbo, Denmark, Europe.


  • Next chapter.
  • Previous chapter.


    Chapter 26. Rollovers with JavaScript

    Now I think that you are ready to make your own home pages. If you have done all the exercises in the first two parts of this book, you have learned a number of the most important HTML codes that you need to know. You have seen how you can design a web site, that can include different HTML documents where are links from one to another. It is all tied together in a frameset.

    On the following pages you can read about a number of more particular subjects. Those are small and larger tricks and tips that you might be able to use on your own pages.

    Many like to see action and life on their home pages. The result is often disturbance and confusion on the page. However this does not mean that it is not fun to experiment with new types of design on the home pages. With JavaScript it is relatively easy to create animation on the page.

    What is JavaScript?

    JavaScript is a kind of programming language, like you can insert in HTML code. Those are not HTML, they are (just like CSS) an extension of HTML.

    Previously there were often problems with JavaScript on the Internet. The very old versions of the browsers cannot interpret JavaScript; It is simply not shown on the screen. That is not a major problem today, since by far the most Internet users have modern browsers (from version 4 and on) on their PC.

    So JavaScript works and it can be used for anything; you can find lots of web sites, which can provide code examples and other help for JavaScript. Here we use it for a smart little task: The script replaces a picture automatically with another as you move your cursor across it.

    Graphic switches

    You have previously made a small home page with a picture of a zebra. Actually you have two versions of the zebra picture on your pc; the one is trans­pa­rent, and the other one is not (see page 59).

    Now you are going to change the home page so both zebra pictures are opened alternately – depending on the mouse cursor movement.

    1.   Open the HTML document zebra.htm in NoteTab (that is in the page1 folder).

    2.   On the home page for this book you find a link to the code that you need. Click on the link Code and buttons for Rollover effects:

    Then you get to a page where you can retrieve the code.

    3.   The code is in two parts. Select the first part (code to the HEAD-section):

    4.   Make a copy. Shift to the document zebra.htm in NoteTab and place the cursor above the end code /HEAD. Then insert a blank line:

    5.   Then insert the copy with Control+v.

    6.   Now 6 lines with code area added, which include the two file names (zebra.gif and zebra_t.gif):

    That was the first code portion.

    7.   Now you are going to delete the existing line of IMG code in the HTML document’s BODY section:

    8.   You have deleted the IMG code, so now there is no code for any picture. In stead a new line appears.

    9.   Select the second code portion (Code for the BODY section) in the home page for this book:

    10. Make another copy and shift back to NoteTab. It needs to be placed in the BODY sectio­n instead of the IMG code that you just deleted. Then it will look like this:

    11. Save the document, and test it in the browser.

    On the surface the home page looks the same with the transparent zebra picture, where you see the yellow background color. But try to move the mouse cursor in over the picture. Then you see the other (non transparent) version!

    In the next chapter we will use a similar JavaScript to make a menu with graphic links.


  • Next chapter.
  • Previous chapter.


  • HTML Tutorial Overview.

  • Get the files for this tutorial (opens in a new window)