Solved

Fix image rollovers (preload not working)

Posted on 2007-03-21
19
298 Views
Last Modified: 2008-02-01
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?
0
Comment
Question by:globalwm
  • 11
  • 8
19 Comments
 
LVL 9

Expert Comment

by:pmagony
ID: 18765946
Can you post a link...
0
 
LVL 1

Author Comment

by:globalwm
ID: 18765957
0
 
LVL 9

Expert Comment

by:pmagony
ID: 18766000
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
 
LVL 1

Author Comment

by:globalwm
ID: 18766032
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18766076
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18766103
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
 
LVL 1

Author Comment

by:globalwm
ID: 18767119
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18767821
You can go ahead and preload those gif's via the body tag, in your MAIN page.  
0
 
LVL 1

Author Comment

by:globalwm
ID: 18768083
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 9

Expert Comment

by:pmagony
ID: 18768131
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18768137
Remove it from your header.asp as it's not doing anything but duplicating (and bloating) the code.
0
 
LVL 1

Author Comment

by:globalwm
ID: 18768145
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18768154
Post the full code... as the snippet doesn't let me see what is above the include statement.
0
 
LVL 9

Expert Comment

by:pmagony
ID: 18768178
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
 
LVL 1

Author Comment

by:globalwm
ID: 18768189
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
 
LVL 9

Expert Comment

by:pmagony
ID: 18768240
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
 
LVL 1

Author Comment

by:globalwm
ID: 18768301
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
 
LVL 1

Author Comment

by:globalwm
ID: 18768304
Sorry, don't mean to make this difficult to explain....   :(
0
 
LVL 9

Accepted Solution

by:
pmagony earned 500 total points
ID: 18768786
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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now