Apparating Image

This web page uses the rollover technique to implement the effect of an image appearing from nowhere, as the user rolls her mouse over a certain area of the page.

We will achieve this effect, by swapping two images, one of which is the same as the background of the page (or a transparent blank box, if you prefer). We will also use this chance to get a bit of practice with relative URLs.

You can quickly create a blank image in FireWorks, or you can download one from here.

The second image used in the example is available here (Note: This graphic is an original work by Your Kids' Turn Central Founder Wendy Hogan).

a white box

  • Start, by creating a folder named Lab8 on your desktop. Within Lab8 folder, create two subfolders, named Images and Documents.
  • Put the two images you need for your rollover into your Images folder.
  • Fire your favorite text editor, like TextWrangler, and create a simple web page. Save it into Documents subfolder.
  • Add a few lines of text, and an image.
  • Add the Event Handler for the Rollover.

Check your file in the main browsers, like Safari and Firefox, on the mac. What can you do to change its "jerky behavior", as one image replaces the other?