External JS Rollover

joec0123 posted this at 04:20 — 28th May 2004.

Joined: Aug 2003

I am trying to get a basic image rollover on a horizontal navigation.. and i cant find the problem.. no idea why its not working..

External JS

 if (document.images) {

   image1on = new Image();
   image1on.src = "/content/img/nav_company_on.gif";
   image1off = new Image();
   image1off.src = "/content/img/nav_company_off.gif";

   image2on = new Image();
   image2on.src = "/content/img/nav_services_on.gif";
   image2off = new Image();
   image2off.src = "/content/img/nav_services_off.gif";
   
   image3on = new Image();
   image3on.src = "/content/img/nav_vinyl_on.gif";
   image3off = new Image();
   image3off.src = "/content/img/nav_vinyl_off.gif";

   image4on = new Image();
   image4on.src = "/content/img/nav_digitalimaging_on.gif";
   image4off = new Image();
   image4off.src = "/content/img/nav_digitalimaging_off.gif";
   
   image5on = new Image();
   image5on.src = "/content/img/nav_portfolio_on.gif";
   image5off = new Image();
   image5off.src = "/content/img/nav_portfolio_off.gif";   
}

 function turnOn(imageName) {
   if (document.images) {
     document[imageName].src = eval(imageName + "on.src");
   }
 }

 function turnOff(imageName) {
   if (document.images) {
     document[imageName].src = eval(imageName + "off.src");
   }
}

Table containing images

 <tr> 
          <td align="left" valign="top" width="110"><a href="content/csc_about.html" title="About LA Eagle" onMouseOver="turnOn('image1');window.status=' ';return true" onMouseOut="turnOff('image1');window.status='';"><img src="content/img/nav_company_off.gif" width="110" height="24" /></a></td>
          <td class="navSplit"></td>
          <td align="left" valign="top" width="74"><a href="content/csc_obtain.html" title="Our Services" onMouseOver="turnOn('image2');window.status=' ';return true" onMouseOut="turnOff('image2');window.status='';"><img src="content/img/nav_services_off.gif" width="74" height="24" /></a></td>
          <td class="navSplit"></td>
          <td align="left" valign="top" width="50"><a href="content/csc_faq.html" title="Vinyl Info" onMouseOver="turnOn('image3');window.status=' ';return true" onMouseOut="turnOff('image3');window.status='';"><img src="content/img/nav_vinyl_off.gif" width="50" height="24" /></a></td>
          <td class="navSplit"></td>
          <td align="left" valign="top" width="122"><a href="content/csc_partner.html" title="Digital Imaging" onMouseOver="turnOn('image4');window.status=' ';return true" onMouseOut="turnOff('image4');window.status='';"><img src="content/img/nav_digitalimaging_off.gif" width="122" height="24" /></a></td>
          <td class="navSplit"></td>
          <td align="left" valign="top" width="81"><a href="content/csc_press.html" title="Portfolio" onMouseOver="turnOn('image5');window.status=' ';return true" onMouseOut="turnOff('image5');window.status='';"><img src="content/img/nav_portfolio_off.gif" width="81" height="24" /></a></td>
        </tr>

this is in the head, linking to the js

&lt;script type="text/javascript" src="content/js/hp_imgSwap.js"&gt;&lt;/script&gt;

I've tried to fix this .. but its beyond my knowledge.
thanks for all your help!

TargetZion posted this at 04:26 — 28th May 2004.

He has: 76 posts

Joined: Mar 2004

JAVASCRIPT:

&lt;script type="text/javascript"&gt;
<!--
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];}
}
//-->
&lt;/script&gt;

HTML:

  <tr> 
    <td><a href="index.html"></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav1','','home-button01.jpg',1)"><img src="home-button.jpg" name="nav1" width="100" height="34" border="0" alt="" id="nav1" /></a></td>
    <td><img src="div.jpg" alt="" /></td>
    <td><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav2','','services-button01.jpg',1)"><img src="services-button.jpg" name="nav2" width="100" height="34" border="0" alt="" id="nav2" /></a></td>
    <td><img src="div.jpg" alt="" /></td>
    <td><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav3','','aboutus-button01.jpg',1)"><img src="aboutus-button.jpg" name="nav3" width="100" height="34" border="0" alt="" id="nav3" /></a></td>
    <td><img src="div.jpg" alt="" /></td>
    <td><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav4','','portfolio-button01.jpg',1)"><img src="portfolio-button.jpg" name="nav4" width="100" height="34" border="0" alt="" id="nav4" /></a></td>
    <td><img src="div.jpg" alt="" /></td>
    <td><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav5','','contactus-button01.jpg',1)"><img src="contactus-button.jpg" name="nav5" width="100" height="34" border="0" alt="" id="nav5" /></a></td>
  </tr>

Just customize the file names and stuff and that's gold... That's actually a snip from my site... So I can vouch for it's functionality...

MikeJeannotte.com | Validate Your HTML & XHTML

joec0123 posted this at 04:23 — 29th May 2004.

They have: 17 posts

Joined: Aug 2003

thanks, it works, and im going to use it.. but is there any JS experts that can tell me why my previous code wasnt working for educational purposes?

TargetZion posted this at 16:40 — 29th May 2004.

He has: 76 posts

Joined: Mar 2004

No thanks necessary... I do what I can... Enjoy!

Renegade posted this at 03:16 — 30th May 2004.

He has: 3,022 posts

Joined: Oct 2002

You needed to add an ID="" to your IMG tag - you needed to make your image identifiable.

 function turnOn(imageName) {
   if (document.images) {
     document[imageName].src = eval(imageName + "on.src");
   }
 }

 function turnOff(imageName) {
   if (document.images) {
     document[imageName].src = eval(imageName + "off.src");
   }

That goes in your HEAD tag and then you Identify your image:

<td align="left" valign="top" width="110"><a href="content/csc_about.html" title="About LA Eagle" onMouseOver="turnOn('<em>image1</em>');window.status=' ';return true" onMouseOut="turnOff('<em>image1</em>');window.status='';"><img src="content/img/nav_company_off.gif" <strong>id="image1"</strong> width="110" height="24" /></a></td>

As you can see, the function is trying to find "image1" but couldn't because you haven't identified it. Just add what in bold and you should be fine.