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.

Button Up  Button Down

For each image link you may have on a page, make sure you give the name=”img1″ attribute an unique name for each link or the script will not work.

<img src=”link_1_up.gif” width=”90″ height=”19″ alt=”Link 1″ name=”img1″ onmouseover=”document.img1.src=’link_1_down.gif’;” onmouseout=”document.img1.src=’link_1_up.gif’;”>

<img src=”link_2_up.gif” width=”90″ height=”19″ alt=”Link 2″ name=”img2″ onmouseover=”document.img2.src=’link_2_down.gif’;” onmouseout=”document.img2.src=’link_2_up.gif’;”>

<img src=”link_3_up.gif” width=”90″ height=”19″ alt=”Link 3″ name=”img3″ onmouseover=”document.img3.src=’link_3_down.gif’;” onmouseout=”document.img3.src=’link_3_up.gif’;”>

Link 1  Link 2  Link 3

Related posts:

  1. Javascript: Image Swap
  2. Javascript: Easy Popup Windows
  3. Formatting Tables
  4. Background Color & Images – Not Tables!
  5. Images <img>
  6. CSS: Menu Lists
  7. CSS: Padding
  8. CSS: Margin
  9. CSS: Border
  10. SEO: Image Optimization
  11. SEO: Link Building
  12. Menu Lists <ul>, Definition Lists <dl>
  13. CSS: Font Properties
  14. Heading Tag <h1> – <h6>
  15. CSS Tutorials
  16. Javascript Tutorials
  17. KDWHD Tutorials
  18. eBay Tutorials
  19. SEO Tutorials
  20. HTML 4.01 Strict Tutorials
  21. Paragraph Tags <p>
  22. SEO: Keyword Selection
  23. Beginner HTML: Your First Webpage
  24. CSS: External Style Sheets
  25. CSS Syntax
  26. Video: How to Install your “me” Page on eBay
  27. Video: How to Create Custom eBay Store Pages
  28. Video: How to Install Custom eBay Store Navigation
  29. Video: How to Install Custom eBay Store Front Page
  30. How Do I Add a Background Image or Color?