How to Create RollOvers using JavaScript

arp14 HTML, JavaScript, Tutorial Tags: , , , , 0

RollOvers are very useful for more stable code. Suppose you made your links color red on hover state, but what if you hover those links using tab key or pressing up-down-left-right on a mobile device. Those styles gone right? But the the help of JavaScript, it won’t anymore. There are also more advantages – you can handle multiple links at once.

Files and Folders for RollOvers Tutorial : By Name
  • images/test_on.gif
  • images/test_off.gif
  • images/test_click.gif
  • example1.htm
RollOvers example1.htm
<a href="test.htm" 
onmouseover="document.button.src='images/test_on.gif'" 
onmouseout="document.button.src='images/test_off.gif'"
onmousedown="document.button.src='images/test_click.gif'">
<img src="images/test_off.gif" name="button"/>
Download</a>
Result:


Download

Files and Folders for RollOvers Tutorial : By ID
  • images/button1_on.gif
  • images/button1_off.gif
  • images/button1_click.gif
  • images/button2_on.gif
  • images/button2_off.gif
  • images/button2_click.gif
  • example2.htm
  • page1.htm
  • page2.htm
RollOvers example2.htm
<a href="page1.htm"><img src="images/button1_off.gif" id="button1"></a>
<a href="page2.htm"><img src="images/button2_off.gif" id="button2"></a>

<script>
window.onload = function () {
	for (var i=0; i<document.images.length; i++) {
		if (document.images[i].parentNode.tagName == "A") {
			setupRollover(document.images[i]);
		}
	}
}
function setupRollover (thisImage) {
thisImage.outImage = new Image();
thisImage.outImage.src = thisImage.src;
thisImage.onmouseout = rollOut;
// ****************************
thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
thisImage.onmouseover = rollOver;
// ****************************
thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
thisImage.onmousedown = clicked;
// ****************************
thisImage.parentNode.childImage = thisImage;
thisImage.parentNode.onblur = rollOutChild;
thisImage.parentNode.onfocus = rollOverChild;
}
function rollOut () {this.src = this.outImage.src;}
function rollOver () {this.src = this.overImage.src;}
function clicked () {this.src = this.clickImage.src;}
function rollOutChild () {this.childImage.src = this.childImage.outImage.src;}
function rollOverChild () {this.childImage.src = this.childImage.overImage.src;}
</script>
Result:


Rollover text link and change another image
Files and Folders:
  • images/arrow_on.gif
  • images/arrow_off.gif
  • images/arrow_click.gif
  • example3.htm
RollOvers example3.htm
<h3><a href="page1.htm" id="arrow">Next page</a></h3>
<img src="images/arrow_off.gif" id="arrowImg" />
<script>
document.getElementById("arrow").onmouseover = function () {
	document.getElementById("arrowImg").src = "arrow_on.gif";
};
document.getElementById("arrow").onmouseout = function () {
	document.getElementById("arrowImg").src = "arrow_off.gif";
};
document.getElementById("arrow").onmousedown = function () {
	document.getElementById("arrowImg").src = "arrow_click.gif";
};
</script>
Result:

Next page

** Make sure about image locations **

If you have any problem, just comment below, Thanks.

Leave a Reply

Note: Your email address will not be published. Required fields are marked *