Fix image rollovers (preload not working)

I think I have a small issue with my rollover buttons (in CSS) with the "on" images not downloading ahead of time. Can someone take a look at this and see what's needed?

The site uses a single header file that handled the MM_preloadImages javascripts. In the body (still in header file), I call:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('grafix/button1_on.jpg','grafix/button2_on.jpg','grafix/button3_on.jpg','grafix/Organic-On.jpg','grafix/tableft10.gif','grafix/tabright10.gif')">


This header file also links to a external CSS (Styles.css) which references:

    #tabs10 a {
      float:left;
      background:url("grafix/tableft10.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
        text-align: center;
      }
    #tabs10 a span {
      float:left;
      display:block;
      background:url("grafix/tabright10.gif") no-repeat right top;
      padding:5px 23px 4px 24px;
      color:#FFF;
        text-align: center;
      }


tabright10.gif and tableft10.gif do not seem to preload though.  Any ideas?
LVL 1
globalwmAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pmagonyCommented:
Can you post a link...
0
globalwmAuthor Commented:
0
pmagonyCommented:
I don't think it's your css as much as it is you loading an include.  That include is being loaded (read and executed) from your code.  Your include statement happens to exist in the body section of your page after the browser has read the head and the body commands.

If you want to preload the images in your navbar, i would recommend coding it into your page and not in the header include.

Do you have preload functionality both in the main page and IN the include?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

globalwmAuthor Commented:
No (I don't belive so) - just the header.asp include:

http://161.58.103.190/header.asp

which contains the body tag.

So how do you suggest I code in my page?  I wanted to keep all this code in the header.asp file so it was good for the whole site you follow? Otherwise, I have to maintain my nav button preloads in everypage.

Is there something else I can do to still keep in the header.asp realm?
0
pmagonyCommented:
it shouldn't contain a <body> tag or any page elements.  It should be raw code:

<table width="760" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="236" height="5" rowspan="2"><a href="index.asp"><img src="grafix/logo.jpg" width="236" height="98" border="0" /></a></td>
    <td rowspan="2"><img src="grafix/blue_fade.jpg" width="286" height="98" /></td>
    <td width="238" height="66">
        
      <form id="srchForm" method="get" name="srchForm" action="reciperesults.asp">
      <input name="keywordStr" type="text" id="keywordStr">
                    <input name="selectedOccasion" type="hidden" value="-1">
                 <input name="selectedProduct" type="hidden" value="-1">
                 <input name="selectedCourse" type="hidden" value="-1">
        <a href="javascript:document.srchForm.submit()";><img src="grafix/go.jpg" name="go" width="32" height="34" align="absmiddle" id="go" /></a>
        <br />
        <span class="style1">enter keyword or product    </span>
    </form>
      
      </td>
  </tr>
  <tr>
    <td><img src="grafix/dress_dip_sauc.jpg" width="226" height="17" /></td>
  </tr>
</table>
<table width="760" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <div id="tabs10">
  <ul>
    <li><a href="Products.asp" title="Products"><span>Products</span></a></li>
    <li><a href="Recipes.asp" title="Recipes"><span>Recipes</span></a></li>
    <li><a href="Offers_Signup.asp" title="Offers"><span>Offers</span></a></li>
    <li><a href="http://store.yahoo.com/litehousefoods/" title="OnLine Store"><span>OnLine Store</span></a></li>
    <li><a href="AboutUs.asp" title="About Us"><span>About Us</span></a></li>
    <li><a href="Contact_Email.asp" title="Contact Us"><span>Contact Us</span></a></li>
      <li><a href="Food_Service.asp" title="Food Service"><span>Food Service</span></a></li>
  </ul>
</div>
        </td>
    </tr>
</table>
0
pmagonyCommented:
Sorry, I submitted it prematurely... (my wife would say the same.)

The approach your taking is quite common in development.  Create snippets of the page and piece it all together.  But these includes CANNOT contain page markup such as <html>, <title>, <head>, <scripts>, <body>, or any of its closing tags either.  You can only include the straight code used to create the header (in your case).

Else it will duplicate the code you have in your main page.  Does this make sense?

I personally utilize Dreamweaver templates to bake my cake.  I allow it to manage and maintain my child pages from it's parent page.
0
globalwmAuthor Commented:
I see - not much help in my current situation though since implementing this change will need to change every page on the site. I know for next time.

But is there anything I can change in the current page infrastructure? I'm just looking for a global way to preload those gif files...
0
pmagonyCommented:
You can go ahead and preload those gif's via the body tag, in your MAIN page.  
0
globalwmAuthor Commented:
That's what I think I have already - it's in my header.asp page, but it doesn't seem to be working:

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('grafix/button1_on.jpg','grafix/button2_on.jpg','grafix/button3_on.jpg','grafix/Organic-On.jpg','grafix/tableft10.gif','grafix/tabright10.gif')">


(back to square one?)

0
pmagonyCommented:
Right... that goes back to what I told you originally, but you're in a predicament that won't allow you to make your pages "correct".  Your header.asp page get's called way-later in your code.  Infact, it gets called AFTER the body tag in your main page.  

Instead of preloading in the header.asp,  take that same string of attributes that preload the images, and apply it to the main page which has the include command.

Main Page (contains an include command for header.asp). In MainPage.asp's <body> tag, add your preload attributes:

(onload="MM_preloadImages('grafix/button1_on.jpg','grafix/button2_on.jpg','grafix/button3_on.jpg','grafix/Organic-On.jpg','grafix/tableft10.gif','grafix/tabright10.gif')

However, I am not guaranteeing that this will work, but it's worth a shot.
0
pmagonyCommented:
Remove it from your header.asp as it's not doing anything but duplicating (and bloating) the code.
0
globalwmAuthor Commented:
No... sorry. I think you're confused. Header.asp is called 1st thing:

index.asp:
----------------------------

<!--#include file="header.asp"-->
<table width="760" border="0" cellspacing="2" cellpadding="2">
::
::  body content goes here...
::
</table>
<!--#include file="footer_ns.asp"-->

Does that change anything you stated above?

0
pmagonyCommented:
Post the full code... as the snippet doesn't let me see what is above the include statement.
0
pmagonyCommented:
Off-topic, but not really:  You have two pages, both calling a CSS file.  You have two pages, both with body tags that have preload commands in it.  Then you tell one to load itself into the other.  Result? The browser will read the code in the format that its presented.

Your attempt at preloading the images is a drop in the bucket to what you could potentially be faced with.  In short, all of my suggestions *may* not work because the foundation of your pages are not correct.

...I await the full code.
0
globalwmAuthor Commented:
Only one page calls a CSS (header.asp)

Only one page has a body tage (header.asp)

Only one page has preload cmds (header.asp)

???
0
pmagonyCommented:
Not true.

http://161.58.103.190/index.asp has a line of code in it that states this: <!--#include file="header.asp"-->

By your own statements, you are telling me that header.asp has a head, body, css linked to it, and ALL the other tags that make up a header.asp.  Your index.asp ALSO has all the same tags.  When the browser calls your page, it's seeing all the code twice!  Trust me.

This is in the head of your index.asp page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords"Content="litehouse foods,salad dressing,dips,steak marinades,sauces,herbs,salad dressing makers,sandpoint,idaho,dressings,bleu cheese,ranch,recipes,all-natural products,thousand island,italian dressing">
<meta name="description"Content="Litehouse Foods is a salad dressing maker based in Sandpoint, Idaho. Natural food products include sauces, marinades, dressings, dips and herbs.">
<title>Litehouse Foods - Salad Dressing Makers, Dips, Steak Marinades and Sauces, Herbs</title>
<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];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

//-->
</script>
<link href="Styles.css" rel="stylesheet" type="text/css">
</head>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

###################################################################################
This is in the head of your headers.asp page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us">
<META http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords"Content="litehouse foods,salad dressing,dips,steak marinades,sauces,herbs,salad dressing makers,sandpoint,idaho,dressings,bleu cheese,ranch,recipes,all-natural products,thousand island,italian dressing">
<meta name="description"Content="Litehouse Foods is a salad dressing maker based in Sandpoint, Idaho. Natural food products include sauces, marinades, dressings, dips and herbs.">
<title>Litehouse Foods - Salad Dressing Makers, Dips, Steak Marinades and Sauces, Herbs</title>
<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];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

//-->
</script>
<link href="Styles.css" rel="stylesheet" type="text/css">
</head>

Understand now?

0
globalwmAuthor Commented:
Index.asp (full code) :

<!--#include file="header.asp"-->
<table width="760" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="238" rowspan="5" valign="bottom"><img src="grafix/front_left.jpg" width="236" height="465" align="absbottom" /></td>
    <td height="320" colspan="2"><div align="right"><img src="grafix/Prod-HmPg2.jpg" width="519" height="302" /></div></td>
  </tr>
  <tr>
    <td width="195" rowspan="4" valign="bottom"><div align="center"><a href="products_list7.asp?cat=Dressings&flavor=Organics&cols=3" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','grafix/Organic-On.jpg',1)"><img src="grafix/Organic-Off.jpg" alt="Organics!" name="Image10" width="165" height="165" border="0" id="Image10" /></a></div></td>
  </tr>
  <tr>
    <td width="327" valign="top"><div align="center"><span style="font-size: 12px"><a href="Offers_Signup.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgOffers','','grafix/button1_on.jpg',1)"><img src="grafix/button1_off.jpg" alt="Offers and Coupons" name="imgOffers" width="297" height="47" border="0" id="imgOffers" /></a>&nbsp;</span></div></td>
  </tr>
  <tr>
    <td height="54" valign="middle"><div align="center"><span style="font-size: 12px"><a href="products_list7.asp?cat=Dressings&qkey3=T&cols=3" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgNew','','grafix/button2_on.jpg',1)"><img src="grafix/button2_off.jpg" alt="What's New" name="imgNew" width="297" height="47" border="0" align="middle" id="imgNew" /></a>&nbsp;</span></div></td>
  </tr>
  <tr>
    <td valign="bottom"><div align="center"><span style="font-size: 12px"><a href="Products.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('imgWhy','','grafix/button3_on.jpg',1)"><img src="grafix/button3_off.jpg" alt="Why Litehouse" name="imgWhy" width="297" height="47" border="0" align="absbottom" id="imgWhy" /></a>&nbsp;</span></div></td>
  </tr>
</table>
<!--#include file="footer_ns.asp"-->
0
globalwmAuthor Commented:
Sorry, don't mean to make this difficult to explain....   :(
0
pmagonyCommented:
There's not much else you can do.  You already have the button graphics being "preloaded" in your index.asp page.

You could try a Javascript approach: http://www.pageresource.com/jscript/jpreload.htm
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.