Added: 21 February, 2008
Group: JavaScript
Creating rollover buttons with HTML and JavaScript
Author: Alex
page: 1

Creating rollover buttons with HTML and JavaScript

Creating image hover effect for website buttons and navigation can be easily managed with simple javascript and HTML code.


Before everything, you will need three images of your button. One for normal state, second for mouse over state and third for action when user clicks on it.

Tutorial Creating rollover buttons with HTML and JavaScript 1

Tutorial Creating rollover buttons with HTML and JavaScript 2

Tutorial Creating rollover buttons with HTML and JavaScript 3


Next step is creating HTML code for linking and loading images.

Following code will call button in normal state:

<a href="page.html"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>



Next couple lines demonstrate how button will act if we call onmouseover and onmouseout attributes:
<a href="page.html" onmouseover="example.src='images/bt_rollover.jpg'" onmouseout="example.src='images/bt_normal.jpg'"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>


Tutorial Creating rollover buttons with HTML and JavaScript 4

And last code example will use onmouseover, onmouseout and onmousedown attributes in single line:
<a href="page.html" onmouseover="example.src='images/bt_rollover.jpg'" onmouseout="example.src='images/bt_normal.jpg'" onmousedown="example.src='images/bt_action.jpg'"><img src="images/bt_normal.jpg" alt="Image Alt text" name="example" width="100" height="100" border="0" /></a>


This code will cover all three states of button behaviour.

Tutorial Creating rollover buttons with HTML and JavaScript 5

And thats about all.

All you have to do is to test and play with your buttons.

GO to: Page 1 : Creating rollover buttons with HTML and JavaScript


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without authorís permission is illegal.
  • Photo retouch add makeup and create clear face in Photoshop
  • Create low poly house
  • Setting up FTP in windows XP
  • Creating a Flash Photo Slideshow Tutorial
  • Create shadow in Photoshop
  • Drop-Down Menu Tutorial
  • Learn how to create pool in 3D studio
  • Create a realistic chrome car rims
Join our RSS feed
Use our RSS feed to get the latest published tutorials directly to your news reader.
Add to Google
Best tutorials for maya 3d max photoshop and more