In this hour, you learn how to use scripting to make the images on your Web pages respond to mouse movements. You also see how similar JavaScript commands can be used to change multiple images at once, and to perform automatic calculations on form data. None of these tasks require much in the way of programming skills, though they may inspire you to learn the JavaScript language to give your pages more complex interactive features.
(View HTML tags covered in Hour 18.)
The Oliver Family (without image preloading)
The Oliver Family (with image preloading)
(Figures 18.1 - 18.5)
You can add JavaScript commands to any link on a Web page by including two special attributes called OnMouseOver and OnMouseOut. With OnMouseOver, you tell the Web browser what to do when the mouse passes over any text or images within that link. With OnMouseOut, you indicate what to do when the mouse moves out of the link area.
Parts Order Form(Figures 18.6 - 18.7)
A simple order form that uses JavaScript to automatically compute totals. You don't need to understand exactly how this and the previous examples work to copy the JavaScript into your own pages and experiment with modifying them to use your own forms and graphics.
Another example of how to make images respond to mouse movements using JavaScript. Notice that moving the mouse cursor over the text links changes the images, too!
Moving the mouse over any link on this example page causes multiple images to change. Animated GIFs are used in conjunction with regular still images for dynamic interaction.
If the JavaScript in the Parts Order Form example above is a bit too complex for you to wrap your brain around, have a look at this super-simple example first to get the basic idea of how to put JavaScript into a form.
The <BUTTON> tag allows you to create programmable form buttons. You can even make forms that don't send data to anyone except the user, like this Humane Society Test. (Note that the <BUTTON> tag only works in Microsoft Internet Explorer version 4.0 or higher. Netscape Navigator does not yet support this tag.)
"You may find some scripts online that can be incorporated into a Web page of your own with little or no modification... Generally, functions go in the <HEAD> area, preceded by <SCRIPT LANGUAGE=JavaScript>, and followed by </SCRIPT>. The parts of the script that actually carry out the actions when the page is loaded go in the <BODY> part of the page, but still need to be set aside with the <SCRIPT> tag. Sections of script that respond to specific form entries go in the <A> or <INPUT> tags, with special attributes such as ONMOUSEOVER or ONBLUR.You can also put JavaScript into a separate file by putting the name of that file in a SRC attribute within the <SCRIPT> tag... Some parts of the script, such as JavaScript attributes of form <INPUT> tags, may still have to go in your HTML document, however."
Prediction & Fiction
Prediction & Fiction II
Widget Order Form
JavaScript Button Example