WilRose HTML Tutorial, Learn HTML on line for free!

Rollovers in JavaScript

This site designed with Coffee Cup HTML Editor++ ver. 6.2

HTML Tutorial

JavaScript Examples

Rollovers

MouseDown

JS Clock

CountDown

Status Window

Status Window 2

Random Image

JS Cookies

Background Changer

Scrolling Banner

Members Area

Special Effects using JavaScript
Rollovers

Roll your mouse over the images above. Ever wonder how those great special effects work? A simple JavaScript code first "Preloads" all the images, and the next part of the code defines the "Rollover Function", and the third part of the code puts it on the page. The JavaScript code that Pre-loads the images and the 2nd part that defines the function must reside between the <HEAD> and the </HEAD> tags. And last, the actual HTML code enhanced with some JavaScript to put the effects into the page.

*NOTE: Java Script IS case sensitive. Mix up the upper & lower cases in the image names and it will not work.

Start with this:

<SCRIPT LANGUAGE="JavaScript">// Tells Browser that this is a Script

<!--

if (document.images) { //Preloads images into browser and defines them by name & size

img01on=new Image(60,40);
img01on.src="Images/Back3.gif";
img01off=new Image(60,40);
img01off.src="Images/Back4.gif";

img02on=new Image(60,40);
img02on.src="Images/Home3.gif";
img02off=new Image(60,40);
img02off.src="Images/Home4.gif";

img03on=new Image(60,40);
img03on.src="Images/Next3.gif";
img03off=new Image(60,40);
img03off.src="Images/Next4.gif";

}

function imgOn(imgName) { //Defines the Rollover functions

if (document.images) {

document[imgName].src=eval (imgName + "on.src");

}

function imgOff(imgName) {

if (document.images) {

document[imgName].src=eval (imgName +"off.src");

}

// -->

</SCRIPT> //Ends preload & function definition

<TITLE>Rollovers in JavaScript</TITLE></HEAD>

<CENTER><TABLE WIDTH=180 BORDER=0><TR>

</BODY>
</HTML>

*Here's a sample of Rollovers in JavaScript that you can take with you. Just copy & paste it from here into your text editor and save it for future reference. Remember, you can change the "Image Names" to whatever you like, and you can use your own imagery, just be sure to get the file addresses and image names right in your code.

<HTML>

<HEAD>

<!--
     if (document.images) {

img01on=new Image(60,40);
img01on.src="Images/Back3.gif";
img01off=new Image(60,40);
img01off.src="Images/Back4.gif";

img02on=new Image(60,40);
img02on.src="Images/Home3.gif";
img02off=new Image(60,40);
img02off.src="Images/Home4.gif";

img03on=new Image(60,40);
img03on.src="Images/Next3.gif";
img03off=new Image(60,40);
img03off.src="Images/Next4.gif";

}

function imgOn(imgName) {

if (document.images) {

document[imgName].src=eval (imgName + "on.src");

}

function imgOff(imgName) {

if (document.images) {

document[imgName].src=eval (imgName +"off.src");

}

// -->

</SCRIPT>

<TITLE>Rollovers with JavaScript</TITLE></HEAD>

<BODY BACKGROUND="Images/blue.html"><script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-47423994-1', 'fortunecity.ws');
  ga('send', 'pageview');

</script>
<center>
<br>
	
	<div>	
<script language="javascript" type="text/javascript" src="http://ad.broadcaststation.net/ads/show_ad.php?width=728&height=90"></script>
	</div>
</center>

</TR>

</TABLE></CENTER>

</BODY>

<center>

</center>
</HTML>

Recommended Books

Top of Page?