Rollovers
Main Page |
Session 12 Index |
Operator Precedence |
Interactive Forms
Rollovers refer to the process of changing the appearance of some part of the page,
usually buttons, when the mouse pointer "rolls over" a specific area or
location.
This is accomplished using the folowing JavaScript features:
- Image object
- onMouseOver event
- onMouseOut event
First, define two new Image objects to hold the images using:
<![CDATA[ imageName = new Image(); ]]>
Then assign the images to the "src" properties of these image objects:
<![CDATA[ imageName.src = "./mypic.gif"; ]]>
Next, create a function which receives to values as parameters, one providing the name
of the HTML image to change (to create a reusable function), and one value which indicates
which image to display. See the example code below for the actual JavaScript code used for
this example.
Write the HTML code for an image which is a link in order to use the onMouseOver and
onMouseOut events of the anchor (link), also shown below. The key with the image is
to provide it with a NAME which can be referenced by the JavaScript.
Sample JavaScript code:
<![CDATA[
<!-- ARCHIVE by FORTUNECITY.ws -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
home = new Image();
home.src = "duckread.gif";
homeOver = new Image();
homeOver.src = "hedgehog.gif";
function changeImage(imgName, imgNum) {
if (imgNum == 0)
document [imgName].src = home.src;
else
document [imgName].src = homeOver.src;
}
// -->
</SCRIPT>
</HEAD>
<BODY><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>
<P>
<A HREF="rollover.html"
onMouseOver="changeImage('home',1);"
onMouseOut="changeImage('home',0);"><IMG
SRC="duckread.gif"
ALT="Rollover Sample"
BORDER=0
NAME="home"></A><BR>
</BODY>
]]>
Main Page |
Session 12 Index |
Operator Precedence |
Interactive Forms