Forum Moderators: open

Message Too Old, No Replies

Javascript with Rollover Problem

         

Kakka

3:42 pm on Sep 25, 2004 (gmt 0)

10+ Year Member



I created a header with 8 separate images, each with its own rollover image, and each going to a feature area on the site. I did the rollovers in Dreamweaver MX which creates a bunch of javascript in the <head> and preloads the images.
I have placed a sample page up at <Sorry, no personal URLs. See TOS [webmasterworld.com]>

In IE, when I "rollover" one of the header graphics, the rollover image turns up in the next image. In Netscape the rollovers function properly.

I looked at the code and can't for the life of me see where the problem is.

Can anyone help?

Thanks,
Amanda

[edited by: tedster at 9:17 pm (utc) on Sep. 25, 2004]

adni18

3:59 pm on Sep 25, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Easy one! ;)

For each of the images where it says something like:

MM_swapImage('1','','images/01-b.gif',1)

simply decrement the first arguement by one:

MM_swapImage('0','','images/01-b.gif',1)

This happens because dreamweaver probably forgot to start the array of images at 0. It started it at one, so every time you placed your cursor over it, it would rollover the next one.

Kakka

11:30 pm on Sep 25, 2004 (gmt 0)

10+ Year Member



Thank you Adni!

I just changed the code and it works great in IE but now it doesn't work in Netscape - this time it is doing the opposite -- where I roll my mouse over one graphic and its rollover graphic appears in the image before it.

Do you know of any way to code it so that it works in both browsers?

Again, thank you,
Amanda

adni18

2:42 am on Sep 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Please post the script for MM_swapImage [your link was deleted]

Kakka

1:03 pm on Sep 26, 2004 (gmt 0)

10+ Year Member



This is the script in the <head> section:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

And this is the coding I changed within the <body>:

<div id="headerTable">
<table width="100%" border="0" align="center">
<tr>
<td><div align="center"><a href="../transnational/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('0','','../images/01-b.gif',1)"><img src="../images/01-a.gif" alt="CFI Branch Offices" name="1" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../affiliates/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('1','','../images/02-b.gif',1)"><img src="../images/02-a.gif" alt="Affiliate Organizations" name="2" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../newsrooms/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('2','','../images/03-b.gif',1)"><img src="../images/03-a.gif" alt="Newsrooms" name="3" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../events/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('3','','../images/04-b.gif',1)"><img src="../images/04-a.gif" alt="Events Calendar" name="4" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="http://www.campusinquirer.org" target="_blank" onMouseOver="MM_swapImage('4','','../images/05-b.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/05-a.gif" alt="CFI On Campus" name="5" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../communities/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('5','','../images/06-b.gif',1)"><img src="../images/06-a.gif" alt="CFI Communities" name="6" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../education/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('6','','../images/07-b.gif',1)"><img src="../images/07-a.gif" alt="Education" name="7" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../research/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('7','','../images/08-b.gif',1)"><img src="../images/08-a.gif" alt="Research" name="8" width="95" height="90" border="0"></a></div></td>
</tr>
</table>
</div>

Thanks for the help!
Amanda

adni18

6:45 pm on Sep 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This goes in the <head>:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage(object,newsrc,salt) {
object.src=newsrc;
store(salt);
}

function store(obj) {
void(obj)
}
//-->
</script>

And this goes in the <body>:

<div id="headerTable">
<table width="100%" border="0" align="center">
<tr>
<td><div align="center"><a href="../transnational/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/01-b.gif',1)"><img src="../images/01-a.gif" alt="CFI Branch Offices" name="1" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../affiliates/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/02-b.gif',1)"><img src="../images/02-a.gif" alt="Affiliate Organizations" name="2" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../newsrooms/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/03-b.gif',1)"><img src="../images/03-a.gif" alt="Newsrooms" name="3" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../events/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/04-b.gif',1)"><img src="../images/04-a.gif" alt="Events Calendar" name="4" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="http://www.campusinquirer.org" target="_blank" onMouseOver="MM_swapImage(this,'../images/05-b.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/05-a.gif" alt="CFI On Campus" name="5" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../communities/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/06-b.gif',1)"><img src="../images/06-a.gif" alt="CFI Communities" name="6" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../education/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/07-b.gif',1)"><img src="../images/07-a.gif" alt="Education" name="7" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../research/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(this,'../images/08-b.gif',1)"><img src="../images/08-a.gif" alt="Research" name="8" width="95" height="90" border="0"></a></div></td>
</tr>
</table>
</div>

adni18

6:48 pm on Sep 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



scrap that^ I'm working on it

adni18

6:59 pm on Sep 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here is the revised version that works in both browsers. I edited the syntax a bit.

This part goes in the <head>:

<script language="JavaScript" type="text/JavaScript">
<!--
var jsrc='';
function MM_swapImgRestore(obj) { //customized version
obj.src=jsrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage(obj,newsrc,salt) { //customized version
store(obj.src);
obj.src=newsrc;
void(salt);
}

function store(obj) {
jsrc=obj;
}
//-->
</script>

And this part goes in the <body>:

<div id="headerTable">
<table width="100%" border="0" align="center">
<tr>
<td><div align="center"><a href="../transnational/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/01-b.gif',1)" src="../images/01-a.gif" alt="CFI Branch Offices" name="1" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../affiliates/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/02-b.gif',1)" src="../images/02-a.gif" alt="Affiliate Organizations" name="2" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../newsrooms/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/03-b.gif',1)" src="../images/03-a.gif" alt="Newsrooms" name="3" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../events/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/04-b.gif',1)" src="../images/04-a.gif" alt="Events Calendar" name="4" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="http://www.campusinquirer.org" target="_blank"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/05-b.gif',1)" src="../images/05-a.gif" alt="CFI On Campus" name="5" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../communities/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/06-b.gif',1)" src="../images/06-a.gif" alt="CFI Communities" name="6" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../education/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/07-b.gif',1)" src="../images/07-a.gif" alt="Education" name="7" width="95" height="90" border="0"></a></div></td>
<td><div align="center"><a href="../research/"><img onMouseOut="MM_swapImgRestore(this)" onMouseOver="MM_swapImage(this,'../images/08-b.gif',1)" src="../images/08-a.gif" alt="Research" name="8" width="95" height="90" border="0"></a></div></td>
</tr>
</table>
</div>

By the way, when you used the original coding in netscape, did it work the way you had hoped it to?

Kakka

7:09 pm on Sep 26, 2004 (gmt 0)

10+ Year Member



Adni,

Massive thanks for your help with this. I put the new code in and it's working in both browsers now.

Yes, the original (the one that didn't worked in IE) did work in Netscape and then when I changed it so it would work in IE, it stopped working in Netscape.

Now it works in both, thanks to you. I hope I can repay the favor one day.

Best,
Amanda