Create the Buttons

• 1). Open an image editor and create a new file. Name the file "before rollover."
  
  
• 2). Use the ellipse or rectangle tools to draw a button shape.
  
  
• 3). Apply bevel effects to make the shape look like a button. Add text to the button if you want the button to have a text label.
  
  
• 4). Save the image as GIF file. Web designers usually use the GIF format when creating small images.
  
  
• 5). Copy the image and paste it into a new file. Name this file "rollover_button2." The browser will display this image when you move the mouse over the button.
  
  
• 6). Select the button and change its color by adjusting the image's hue and saturation. See the documentation that comes with your image editor for details.
  
  
• 7). Apply a shadow effect to the button if want to enhance the 3D effect.
  
  
• 8). Change the button's text if you want the button to display different text when the mouse rolls over the image.
  
  
• 9). Save this image as a GIF file.
  
  
• 10
  
  Save copies of both images in a format native to the image-editing program. Photoshop, for example, has a native format of .psd. Paint.Net has a native format of pdn. Check the help file that comes with your program to determine its native image format. By creating copies using this format, you will find it easier to make changes to the images if you decide to update them later.
  
  

Create the HTML

• 1). Create a new HTML file.
  
  
• 2). Add this code to the body section of the file:
  
  <img src src="before_roller.gif"
  onmouseover = "document.images[0].src = 'before_rollover.gif';"
  onmouseout = "document.images[0].src = 'after_rollover.gif'>
  
  The onmouseover event will display the before_rollover image when you place the mouse hovers over the image. The onmouseout event will display the after_rollover image when the mouse leaves the image. The src parameter values match the names of the button images that you created.
  
  
• 3). Upload all files to your website and test the animated rollover effect.