Solved

Fix image rollovers (preload not working)

Posted on 2007-03-21
19
303 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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
 
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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 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