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.
  • Create a realistic chrome car rims
  • Create a realistic looking satellite dish
  • How to create a coin using maya
  • How to create airplane model
  • Create a soccer ball in 3D studio max
  • Create Seductive Vampire's in Photoshop
  • Rugby ball - American football ball 3d model
  • Create apple bowl in 3D max
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