I use a different approach you might find helpful. I make a call to a script
to do the rollover of the image. I can do this as many times as needed for
as many images on the page as necessary. You might experiment with this.
Desmond
*******************************
Put this in the head of your document
*******************************
<script>
<!--
function F_loadRollover(){}
function F_roll(){}
//-->
</script>
<script language="JavaScript1.2" src="rollover.js"></script>
**********************************************************
Put this in the body of your document and modify as needed for your images
**********************************************************
<a href="index.htm" onMouseOver="F_roll('NavigationButton1',1)"
onMouseOut="F_roll('NavigationButton1',0)"><img id="NavigationButton1"
name="NavigationButton1" height=60 width=100 src="home_HMusicButtonOn.gif"
onLoad="F_loadRollover(this,'home_HRMusicButtonOnOver.gif')" border=0
alt="Home"></a>
****************************************************************************
rollover.js / Put this in the root with your document or change reference
point in src="rollover.js"
****************************************************************************
//handles rollover images for NN3+ and IE4+
var loaded = new Array();
function F_loadRollover(image,imageName) {
if (image && image.src &&
(null == image.out || typeof(image.out) == typeof(void(0)))) {
s = image.src;
image.out = new Image();
image.out.src = s;
image.over = new Image();
if (imageName.lastIndexOf('/') >= 0 || imageName.lastIndexOf('\\') >= 0) {
s = imageName;
} else {
i = s.lastIndexOf('/');
if (i<0) i = s.lastIndexOf('\\');
if (i<0) { s = imageName; }
else { s = s.substring(0,i+1) + imageName; }
}
image.over.src = s;
loaded[image.name] = image;
}
}
function F_roll(imageName,over) {
if (document.images) {
if (over) { imageObject = "over"; }
else { imageObject = "out"; }
image = loaded[imageName];
if (image) {
ref = eval("image."+imageObject);
if (ref) image.src = eval("image."+imageObject+".src");
}
if (window.event)
window.event.cancelBubble = true;
}
}
----- Original Message -----
From: "Chung" <s9708970@y...>
To: "javascript" <javascript@p...>
Sent: Friday, April 13, 2001 4:44 PM
Subject: [javascript] Why doesn't this Dam image flip work !!
>
>
> hi there
>
> I've been playing aound with this image flip for ages...but it still
> doesn't seem to work...its just a basic image flip, however it will go on,
> off, on and breaks down...
>
> here is the code I used:
>
> <HTML>
> <HEAD>
> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
> <TITLE></TITLE>
> </HEAD>
>
> <SCRIPT Language="javascript">
> {
> nav_bookings_on = new Image();
> nav_bookings_on.src = "images/nav_bookings_on.gif";
> nav_bookings = new Image();
> nav_bookings.src="images/nav_bookings.gif";
> }
>
> function img_act(imgName) {
>
> imgOn = eval(imgName + "_on.src");
> document[imgName].src = imgOn;
> }
>
> function img_off(imgName) {
>
> img_off = eval(imgName + ".src");
> document[imgName].src = img_off;
> }
>
> </SCRIPT>
> <BODY>
>
> <p>
> <a href="index.html" onMouseOver="img_act('nav_bookings')"
> onMouseOut="img_off('nav_bookings')"><img src="images/nav_bookings.gif"
> border="0" name="nav_bookings"></a>
>
> </BODY>
> </HTML>
>
>
>
> can somebody please explain why this doesn't work befoe I go crazy.
>
> Thanks heaps
View Cart
