HTML and CSS Reference
In-Depth Information
Exercises
1. Create an array of different sports images so that each time the page loads, a
random image is displayed. Center the image on the page, and specify width
and height. Choose a background color.
2. Create a document entitled “Our Universe.” The page will consist of three
frames. The top frame will be a horizontal frame to contain the title, “Our Uni-
verse,” The left frame will contain a form with radio buttons representing the
names of planets and a textbox. The background image in the second frame will
be a sky filled with stars. When the user clicks a radio button, a picture of the
selected planet will appear in the second frame. A description of the planet will
appear in a textbox under the form in the left frame.
3. Create a JavaScript program that will produce a slideshow. It will contain an
array of four images. Preload the images. A timer will be set so that a new image
replaces another image every 10 seconds. If the user clicks a button labeled
Start
, the timer starts the image replacement. If the user clicks a button labeled
Stop
, the timer stops it.
4. When the page is loaded, call a function that will preload two images, each
associated with a link. When the mouse rolls over an image, replace the first
image with the second image. When the mouse moves away from the image,
the first image appears.
5. Create the illusion of a car driving across the screen using animation. Move the
car to the right a certain number of pixels using a timer. Create two buttons to
start and stop the car.
6. Use a program such as Windows Paint to draw three traffic lights. Preload the
three images. Every 30 seconds change the light. When the light turns green, say
“Go” in a little box under the light, for yellow “Slow down,” and for red, “Stop.”
7. Find a picture of the major planets in our solar system. Create an imagemap so
that when the user clicks one of the planets, a popup window is opened
describing that planet.
