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.
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>
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.
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.
Join our RSS feedUse our RSS feed to get the latest published tutorials directly to your news reader.
