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
<script type="text/javascript" src="content/js/hp_imgSwap.js"></script>'
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:
<script 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>
'
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: 2,951 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.
Cheng Eu Chew - Renegade
Download:
- Mozilla, Firefox
- Opera
This post may contain peanut traces