|
Home |
|
|
Profile |
|
|
Packages |
|
|
Store |
|
|
Web Help |
|
|
PC Help |
|
|
Calgary |
|
|
Greetings |
|
|
Comedy |
|
|
Games |
|
|
|
<title>Javascript rollover examples</title>
<script language="JavaScript1.1" type="text/javascript">
<!--
img0_on = new Image(30,30);
img0_on.src="../WinXPicons/windows_on.jpg";
img0_off = new Image(30,30);
img0_off.src="../WinXPicons/windows_off.jpg";
img1_on = new Image(30,30);
img1_on.src="../WinXPicons/aplus_on.jpg";
img1_off = new Image(30,30);
img1_off.src="../WinXPicons/aplus_off.jpg";
img2_on = new Image(30,30);
img2_on.src="../WinXPicons/web_on.jpg";
img2_off = new Image(30,30);
img2_off.src="../WinXPicons/web_off.jpg";
function over_image(parm_name) {
document[parm_name].src = eval(parm_name + "_on.src");
}
function off_image(parm_name) {
document[parm_name].src = eval(parm_name + "_off.src");
}
</script>
</head><body>
Below are the link:
<p>
<a href="index.html" onmouseover="over_image('img0');"
onmouseout="off_image('img0')">
<img border=0 src="../WinXPicons/windows_on.jpg" name="img0"
alt="it works"></a>
<a href="windows.htm" onmouseover="over_image('img1');"
onmouseout="off_image('img1')">
<img border=0 src="../WinXPicons/aplus_off.jpg" name="img1"
alt="bul2"></a>
<a href="webdesign.htm" onmouseover="over_image('img2');"
onmouseout="off_image('img2')">
<img border=0 src="../WinXPicons/web_off.jpg" name="img2"
alt="web stuff"></a>
<p>
Above are the links
<p> </BODY></HTML>
img0_on = new Image(30,30);
img0_on.src="/images/bul1.gif";
img1_on = new Image(21,82);
img1_on.src="/images/next_dis.gif";
img2_on = new Image(21,82);
img2_on.src="/images/prev_dis.gif";
All of the graphics in the "on" state in this section are preloaded
into memory and an image object is created for them.
img0_off = new Image(30,30);
img0_off.src="/images/bul2.gif";
img1_off = new Image(21,82);
img1_off.src="/images/next.gif";
img2_off = new Image(21,82);
img2_off.src="/images/prev.gif";
All the graphics in the "off"state in this section are preloaded and
an image is created for them. To add more buttons follow the naming scheme for
adding an "on" and "off" state for each button. The name
of the GIF file does not need be be the same as in this example. To clear up
a question some of you had, the numbers in the parens (30,30) are the width
and height of the image. You can use different size images but the effect looks
best if the "on" and "off" image are the same size.
function over_image(parm_name) {
document[parm_name].src = eval(parm_name + "_on.src");
}
This is the function that activates the button graphic. When the mouse is put
over the graphic, the MouseOver event handler passes the image name to this
function and add the "on" suffix to it. This sources in the "on"
state GIF file.
function off_image(parm_name) {
document[parm_name].src = eval(parm_name + "_off.src");
}
This is the function that returns the graphic to its "off" state.
It does this by attaching the "off" suffix, and sourcing in the appropriate
graphic.
<a href="javascript:void(0)"
onmouseover="over_image('img0');"
onmouseout="off_image('img0')">
<img border=0 src="/images/bul2.gif"
name="img0" alt="bul2"></a>
This is the HTML for one of the buttons. The button is assigned a name withing
the <img> tag. Javascript uses this name to refer to this graphic slot.
The javascripts commands, called event handlers, need to go within the anchor
<a> tag. Put your own link in here. The onmouseover portion says to perform
the "over_image" function when the mouse is over the graphic and it
passes the image name to that function. The onmouseout portion says to perform
the "off_image" function when the mouse leaves the graphic.