Web Page Design, Webpage Design, eBay Store Design, ebay Template Design, Auction Listing Template,
Logo Design, PayPal Shopping Cart, Zen Cart, OSCommerce, HTML Tutorials, CSS Tutorials,
SEO Tutorials, eBay Tutorials, Free Online Auction Template Creator

Javascript: Rollover Buttons

Here is an easy way to add rollover buttons without a lot of heavy Javascript. As long as the images are kept small, this is fast loading and works great in all browsers. It is VERY important when editing this code that you do it in a program that does not insert extra spaces or quotes. Any plain text editor will work well.

If you have multiple buttons on your page, you will need to number each image in the array. When you add the second button everywhere it says "img1" you will need to name it "img2" for the third button name it "img3" and so on. Make sure you change the name in all three places for each button.

First, you will want to create two graphics - one for the "mouseover" button and one "mouseout" button.

<img src="img/link_1_up.gif" width="90" height="19" alt="Link 1" name="img1" onmouseover="document.img1.src='img/link_1_down.gif';" onmouseout="document.img1.src='img/link_1_up.gif';">

<img src="img/link_2_up.gif" width="90" height="19" alt="Link 2" name="img2" onmouseover="document.img2.src='img/link_2_down.gif';" onmouseout="document.img2.src='img/link_2_up.gif';">

<img src="img/link_3_up.gif" width="90" height="19" alt="Link 3" name="img3" onmouseover="document.img3.src='img/link_3_down.gif';" onmouseout="document.img3.src='img/link_3_up.gif';">

HTMLTutorials

• HTML/CSS Tutorials
• Introduction to HTML
• What is an URL?
• Browser Safe Fonts
• Formatting Your Text
• <p>, <br>, <hr>
• The Marquee Tag
• Adding/Sizing Images
• Text/Image Links
• Making Lists
• Tables: The Basics
• Table Backgrounds
• Colspan, Rowspan
• Sample Tables
• Color Values

CSSTutorials

• Introduction to CSS
• Backgrounds/Color
• <div>, <span>
• Formatting Text
• Formatting Lists
• Images
• Style Your Links
• Tables and CSS
• Fun with CSS

JavascriptTutorials

• Rollover Buttons
• Image Swap
• Easy Popup Windows

eBayTutorials

• eBay Related Questions
• Your eBay Store
• Self Hosting Photos

OtherTutorials

• Photo Size/Compression
• Using Irfanview
• Using TagBot
• Speaking Geek

Create Your Auction Listing FREE

Use our FREE online Auction template creator. Choose from many backgrounds or use or own. We host all images except your photos and logo. Easy to use! Try now!

Web Safe Fonts

Building your own Web Site or Auction Listing and not sure what the best fonts to use are? Find out now!