A Small Step into JavaScript: Image Rollovers

Overview: You will create two custom button graphics online and download them to your computer. You will then create a web page that uses the button graphics. After adding a little JavaScript, you will see one button image change to the other when you move the mouse over it. OPTIONAL: You may want to make a folder on the desktop for all the files.

Step 1 – Visit a website (with Explorer or Netscape) that will allow you create custom buttons and download them to your disk.
Try  http://www.coolarchive.com/buttonmaker.php or search for clip art button maker
NOTE: Websites like these will be full of advertisements and popups. If you can ignore them and scroll until you find what you want, they can be very useful.

Step 2 – Make choices about the design of the two buttons.
Make them the same size and shape, but different in some other aspect. Save each button image after you complete it (control-click on the completed button and Save Image As in Netscape or Download Image in Explorer). Call them BUTTON1.GIF and BUTTON2.GIF. After BUTTON1.GIF is saved, make BUTTON2.GIF and save it.

Here is the display from http://www.coolarchive.com/buttonmaker.php (you will do this twice - once for each button):
cool button display

Choose shape/design of button (click on the small menu with numbers)

Choose button colors.

Enter text to be shown on the button. Choose a text color (click in the rainbow) and alignment (e.g. center). Leave H Shift and V shift at 0.

Choose a font and a size for the text on the button.

Leave the Resize set to No and click Submit.

Step 3 – Open a new web page using Netscape (File->New->Composer Page).
Save it as ROLLOVER.HTML in the same location as the button graphics.

Step 4 – Insert the image BUTTON1.GIF on the new web page and make it (the button graphic) link to the TBE 540 class website page at http://www.csudh.edu/fisher/tbe540/
Step 5 – Edit the HTML Source as shown below.
<img alt="link to TBE 540" src="BUTTON1.GIF" style="border: 0px solid ; width: 210px; height: 61px;">
    NOTE: The “alt” and “style” sections may be different for your BUTTON1.GIF
<img alt="link to TBE 540" src="BUTTON1.GIF" NAME=”button” style="border: 0px solid ; width: 210px; height: 61px;">
<a href="http://www.csudh.edu/fisher/tbe540">
<a href=”http://www.csudh.edu/fisher/tbe540”  onMouseOver="button.src='BUTTON2.GIF" onMouseOut="button.src='BUTTON1.GIF>

Step 6 – Try out (Save and Browse) the page by moving the mouse over the button
The button image should first show BUTTON1.GIF, then change to BUTTON2.GIF when you move the mouse over it. When you move the mouse away, it should change back to BUTTON1.GIF