Button Making

1
Button Making

• Creating Buttons with JavaScript

2
JavaScript Button Rollovers

• JavaScript button rollovers display different
  views of the button as you mouse over and click
  it.
• To create such a rollover, you begin by creating
  images that depict the different views of the
  button.
• Second, you use JavaScript to create the rollover
  effect.
• Third, you create the link.
• Finally, you test it and make sure it works.

3
Creating the Button Images

• Use a graphics package or a button maker utility
  to create the different views of your button.
• I used Fireworks to create these views of a UD
  button

Normal
Over
Down
Clicked
4
Scripting the Rollover

• Use JavaScript to create the rollover. The UD
  button code is

lta href"http//www.udel.edu" alt"UD Home Page"gt
ltimg src"UdButton.gif" border"none"
name"UdButton" id"UdButton"
onmouseover"UdButton.src'UdButtonOver.gif'"
onmousedown"UdButton.src'UdButtonDown.gif
'" onclick"UdButton.src'UdButtonClick.g
if'" onmouseout"UdButton.src'UdButton.g
if'"gt lt/agt