Mouse OverScript #1
When mouse cursor moves over image1, it changes into image2: |
<html>
<HEAD>
<title>MouseOver JavaScript - 2 images, no hyperlink</title>
<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="image1.jpg"
second=new Image
second.src="image2.jpg"
// --></SCRIPT>
</HEAD>
<body bgcolor="#000000">
<a href="javascript:void(0)"
OnMouseOut="monitor.src=first.src"
OnMouseOver="monitor.src=second.src">
<img src="image1.jpg" name="monitor" width="300"
height="375" border="0"></a>
</center>
</body>
</html>
|
Instructions:
Make two images the same size. Modify the HTML file.
Replace the bold parts with your own data.
Place the "script" part between the head tags (before
</HEAD>)
- Replace image1.jpg and image2.jpg with the names of
your own images.
- Your images can either be jpg or gif.
Place the rest between the body tags.
- Replace image1.jpg with your first image
- Replace 300 and 375 with the width and height of your
first image.
- Replace border width 0 with a number (1 - 5) if you want a
border.
|
| |
Script #2
When mouse cursor moves over picture1,
it changes into picture 2 with
assigned hyperlink: |
<html>
<HEAD>
<title>MouseOver JavaScript - 2 images, with hyperlink</title>
<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="picture1.jpg"
second=new Image
second.src="picture2.jpg"
// -->
</SCRIPT>
</HEAD>
<body bgcolor="#000000">
<a href="http://www.vtidigital.com"
OnMouseOut="monitor.src=first.src"
OnMouseOver="monitor.src=second.src">
<img src="picture1.jpg" name="monitor" width="450"
height="300" border="0"></a>
</body>
</html>
|
Instructions:
Make two images the same size.
Modify the HTML file.
Replace the bold parts with your own data.
Place the "script" part between the head tags
- Replace picture1.jpg and picture2.jpg with your own
images.
- Your images can either be jpg or gif.
Place the rest between the body tags.
- Replace the link http://www.vtidigital.com
with an URL you want
to
Your link can be external or internal. Make sure the path is correct
- Replace picture1.jpg with your first image
Replace 450 and 300 with the width and height of your first image.
- Replace border width 0 with a number (1 - 5) if you want a
border.
|
| |
Script
#3:
This mouseover script can do what the above
two scripts do.
When mouse moves over Image_1a, the image changes to Image_1b,
which may or may not have a hyperlink.
However, this script is more versatile.
You can use it in table cells and as often as you want to.
You can use as many sets of images as you want to on the same page.
It is usually used to make buttons with links to different pages or
websites.
|
<HTML>
<HEAD><TITLE>MouseOver Buttons with Hyperlinks</TITLE>
<script language="JavaScript">
<!-- Hide from old browsers
image_1aon = new Image(125, 32);
image_1aon.src = "image_1b.jpg";
image_1aoff = new Image(125, 32);
image_1aoff.src = "image_1a.jpg";
image_2aon = new Image(125, 32);
image_2aon.src = "image_2b.jpg";
image_2aoff = new Image(125, 32);
image_2aoff.src = "image_2a.jpg";
image_3aon = new Image(125, 32);
image_3aon.src = "image_3b.jpg";
image_3aoff = new Image(125, 32);
image_3aoff.src = "image_3a.jpg";
// FUNCTIONS
function
img_act(imgName) {
imgon = eval(imgName + "on.src");
document [imgName].src = imgon;
}
function
img_inact(imgName) {
imgoff = eval(imgName + "off.src");
document [imgName].src = imgoff;
}
// END HIDING FROM OLDER BROWSERS --></script>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#fff5ee" >
<table border=4 cellpadding=6>
<tr>
<td><a href="http://www.vtidigital.com/programs.html"
OnMouseOver="img_act('image_1a')"
OnMouseOut="img_inact('image_1a')">
<img SRC="image_1a.jpg"
NAME="image_1a" border="0"
width="125"
height="32"></a>
</td>
</tr>
<tr>
<td><a href="http://www.vtidigital.com/reg.html"
OnMouseOver="img_act('image_2a')"
OnMouseOut="img_inact('image_2a')">
<img SRC="image_2a.jpg"
NAME="image_2a" border="0"
width="125"
height="32"></a>
</td>
</tr>
<tr>
<td><a href="http://www.vtidigital.com/g_main.html"
OnMouseOver="img_act('image_3a')"
OnMouseOut="img_inact('image_3a')">
<img
SRC="image_3a.jpg" NAME="image_3a" border="0"
width="125"
height="32"></a>
</td>
</tr>
</table>
</BODY>
</HTML>
|
Instructions:
Make sets of two images the same
size.
Modify the HTML file by replacing the bold parts with your own data.
Place the "script" part between the head tags
- Replace all the a and b images with your own
sets of images.
- Replace width and height
If you are making buttons, all images must have the same size
If you are using images in table cells, each set can have a different size
- Your images can either be jpg or gif.
Place the rest between the body tags in the appropriate
table cells.
- Replace the links "http://www.vtidigital.com
. . ." .with your own links.
Links can be external or internal. Make sure the path is correct
- Replace images
Replace width and height of your images.
- Replace border width 0 with a number (1 - 5) if you want a
border.
|
