Practical JS2
The first exercises familiarises you with using the image rollover technique.
Further exercises will use this technique as the basis for the scripts and develop
it further into more useful scripts. When you complete this tutorial please
spend your time experimenting with developing further scripts using images.
- Use the code for the Rollover example and amend it to implement
the rollover of two buttons. The images can be found here.
- Using this method of creating button rollovers, create a navigation bar
using multiple buttons. You may wish to find other buttons to do this. The
navigation should go down the left hand side of the screen. How would you
amend this if the navigation were to be along the right?
- We have now created rollovers using the onMouseover method. Now create
a rollover that is initiated from a textual link. This script should cause
an image to change when the mouse is moved over the text.
- Re-write the above script to display some text when the mouse is moved
over the image.
- Add to the script above so that you can have multiple images that will
display text in the same place on the screen. Note that the text displayed
must disappear when the mouse is removed from the image.
- Create a script that displays a cycling banner. Use the guideline in the
notes to help you. Once you have the code running add links to the images.
This is will make the banners more dynamic and when used in advertising will
bring the customer to you in a click of a mouse button.
- A slide show lets the user control the display of the images. The control
is via next and previous buttons. Develop a script using functions to create
the navigation - previous and next. Amend the code so that once the navigation
reaches the end of the images, it restarts the sequence from the beginning.
- Have a look at the image map script on p. 82 in Negrino and Smith. It combines
the use of image maps and rollovers. If you haven’t got the book yet
look at www.javascriptworld.com
