In over my head.

@glen123Oct 20.2006

Hi,

I changed someone else’s code (took over maintaining website) and it works fine in Firefox but grenades in IE.

The page is: ~~[url]~~http://www.fuelespresso.com/locations.htm[/url]

If you click on the street address images it’s supposed to swap the photo for a map – but it ends up hiding half the mouseover images in IE.

Any skilled “bug squashers” out there want to pinpoint the problem for me? My javascript knowledge is limited at best.

Many thanks,
Glen

(the changes I made was to add two new locations (loc 9 & 10)

to post a comment

JavaScript

8 Comments(s) _↴

@sneakyimpOct 20.2006 — #Depending on IE's cache settings, it may or may not attempt to load an image file when you assign src. I spent hours (days?) trying to figure this out for a site and I seem to recall that there was one particular quirky bit of javascript that worked for nearly all browsers.

import bits;

1) the images are preloaded by a script in the header

2) there is a function called 'loadDescriptionAndPic' that does the work for you.

[code=html]
 <html>
 <head>
 <script language="javascript" type="text/javascript">
 
 var imNP = new Image();
 imNP.src = "images/no_pic.gif";
 
 var im0 = new Image();
 im0.src = "pictures/555/5550001/Beltona_Guitar.jpg";
 var im1 = new Image();
 im1.src = "pictures/555/5550001/Riding_Mower.jpg";
 var im2 = new Image();
 im2.src = "pictures/555/5550001/Sony_TV.jpg";
 
 var imSpacer = new Image();
 imSpacer.src = "images/spacer.gif";
 
 var itemDescriptions = new Array();
 var itemNames = new Array();
 itemDescriptions[107] = "Beltona Tricone Resonator Guitar, National Style 1928<br /><br />This Tricone (serial #043) was handmade by Steve Evans in the UK. Steve still builds Beltona guitars and lives currently in New Zealand. I bought it directly from Steve in 1995.<br /><br />";
 itemNames[107] = "Beltona Guitar";
 itemDescriptions[109] = "Sony KV-27FS200 Wega 27&quot; w/P.I.P. &amp; Matching Sony Stand.<br /><br />Sony 27 inch Wega TV and its matching stand. Both in excellent physical &amp; working condition.  Not a single scratch!!!  The TV is just a little over 3 years old but has been boxed and stored in a spare bedroom for the past 18 months.";
 itemNames[109] = "Sony TV &amp; Stand";
 itemDescriptions[108] = "Like new 2004 John Deere GX255 Lawn Tractor with just 56 hours since new.  Big 54&quot; cutting deck, hydrostatic transmission, power steering.";
 itemNames[108] = "Riding Mower";
 
 // define display status text for the various sizes and cases
 var statusHTML = new Array();
 statusHTML['sold'] = new Array();
 statusHTML['sold'][0] = 'This item has been <strong>SOLD</strong>';
 statusHTML['sold'][1] = 'This item has been <strong>SOLD</strong>';
 statusHTML['sold'][2] = 'This item has been<br><strong>SOLD</strong>';
 statusHTML['sold'][3] = 'This item<br>has been<br><strong>SOLD</strong>';
 
 statusHTML['reduced'] = new Array();
 statusHTML['reduced'][0] = 'This item has been <strong>REDUCED</strong>';
 statusHTML['reduced'][1] = 'This item has been <strong>REDUCED</strong>';
 statusHTML['reduced'][2] = 'This item has been<br><strong>REDUCED</strong>';
 statusHTML['reduced'][3] = 'This item<br>has been<br><strong>REDUCED</strong>';
 
 statusHTML['recovered'] = new Array();
 statusHTML['recovered'][0] = 'This item has been <strong>RECOVERED</strong>';
 statusHTML['recovered'][1] = 'This item has been <strong>RECOVERED</strong>';
 statusHTML['recovered'][2] = 'This item has been<br><strong>RECOVERED</strong>';
 statusHTML['recovered'][3] = 'This item<br>has been<br><strong>RECOVERED</strong>';
 
 statusHTML['na'] = new Array();
 statusHTML['na'][0] = 'This item is <strong>NOT AVAILABLE</strong>';
 statusHTML['na'][1] = 'This item is <strong>NOT AVAILABLE</strong>';
 statusHTML['na'][2] = 'This item is<br>	<strong>NOT AVAILABLE</strong>';
 statusHTML['na'][3] = 'This item is<br>	<strong>NOT AVAILABLE</strong>';
 
 function getStatusHTML(dispStatus, intWidth, blBottom) {
 if ((dispStatus == "") ||
 (dispStatus == "on") ||
 (dispStatus == "off")
 ) {
 
  // return a div tag with display off
  return "<div style="display: none;">&nbsp;</div>";
 }
 
 var intSize;
 var intFontSize = "14";
 if (intWidth > 449) {
 intSize = 0;
 intFontSize = "18";
 } else if (intWidth > 349) {
 intSize = 1;
 } else if (intWidth > 249) {
 intSize = 2;
 } else {
 if (blBottom) {
 // no bottom banner for small items, return hidden div
 return "<div style="display: none;">&nbsp;</div>";
 }
 intSize = 3;
 }
 
 var returnVal = "<div class="display_status" style="display:block; width:" + ((intWidth < 100) ? 100 : intWidth) + "; background-color:#ff0000; font-size: " + intFontSize + ";">" +  statusHTML[dispStatus][intSize] + "</div>";
 return returnVal;
 } // getStatusHTML()
 
 function loadDescriptionAndPic(strImage,intWidth,intHeight, intItemID, dispStatus) {
 var blnDOMSUPPORT = (document.getElementById) ? true : false;
 
 if (blnDOMSUPPORT) {
 var elExplain = document.getElementById('image_explain');
 elExplain.style.display = "none";
 
  var elDescription = document.getElementById('item_description');
  elDescription.innerHTML = itemDescriptions[intItemID];
  var elName = document.getElementById('item_name');
  elName.innerHTML = "-" + itemNames[intItemID] + "-";
 
  var elDisplayTop = document.getElementById('display_status_top');
  elDisplayTop.innerHTML = getStatusHTML(dispStatus, intWidth, false);
  var elDisplayBottom = document.getElementById('display_status_bottom');
  elDisplayBottom.innerHTML = getStatusHTML(dispStatus, intWidth, true);
 
 } else {
 alert("Your browser does not support the features needed to display this page properly.");
 } // if dom support
 
 document['main_image'].src = strImage;
 document['main_image'].width = intWidth;
 document['main_image'].height = intHeight;
 
 } // loadDescriptionAndPic()
 </script>
 </head>
 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 
   <td colspan="2" rowspan="2">
   <img src="images/lg_u_l.gif" width="31" height="53" alt=""></td>
   <td height="44" bgcolor="#535353"><span class="style1">Contact advertiser with questions: 
   </span></td>
   <td height="44" colspan="3" bgcolor="#535353">
   <div align="center" class="style2">(555) 555-0001</div></td>
   <td height="44" bgcolor="#535353">
   <div align="right" class="style1">Select thumbnail to enlarge</div></td>
 
   <td colspan="2" rowspan="2">
   <img src="images/lg_u_r.gif" width="31" height="53" alt=""></td>
  </tr>
  <tr>
   <td height="9" colspan="5" bgcolor="#CCCCCC">
   <img src="images/spacer.gif" width="698" height="9" alt=""></td>
  </tr>
 <tr>
 <td height="20" bgcolor="#535353">&nbsp; </td>
 
   <td height="20" bgcolor="#CCCCCC">&nbsp; </td>
   <td colspan="5" bgcolor="#CCCCCC">
   <p align="center">
   <div align="center" style="padding:0px; width:680px; overflow:auto; margin-bottom:0px;">
   <table border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td>
   <table style="background-color:#999999; padding:3px; border: 1px solid #666666;">
   <tr>
   <td colspan="1" style="color:#ffffff; text-align:center;">Beltona Guitar</td>
   </tr>
   <tr>
   <td align="center" valign="middle" style="background-image:url(pictures/555/5550001/Beltona_Guitar_thumb.jpg); background-position:center; background-repeat:no-repeat; "><a href="javascript:void(0);" onClick="loadDescriptionAndPic('pictures/555/5550001/Beltona_Guitar.jpg',600,449, 107, 'on');"><img src="images/spacer.gif" width="64" height="64" alt="" border="0"></a></td>
   </tr>
   </table>
   </td>
 
   <td><img src="images/spacer.gif" width="10"></td>
   <td>
   <table style="background-color:#999999; padding:3px; border: 1px solid #666666;">
   <tr>
   <td colspan="1" style="color:#ffffff; text-align:center;">Sony TV &amp; Stand</td>
   </tr>
   <tr>
   <td align="center" valign="middle" style="background-image:url(pictures/555/5550001/Sony_TV_thumb.jpg); background-position:center; background-repeat:no-repeat; "><a href="javascript:void(0);" onClick="loadDescriptionAndPic('pictures/555/5550001/Sony_TV.jpg',598,800, 109, 'on');"><img src="images/spacer.gif" width="64" height="64" alt="" border="0"></a></td>
   </tr>
   </table>
   </td>
 
   <td><img src="images/spacer.gif" width="10"></td>
   <td>
   <table style="background-color:#999999; padding:3px; border: 1px solid #666666;">
   <tr>
   <td colspan="1" style="color:#ffffff; text-align:center;">Riding Mower</td>
   </tr>
   <tr>
   <td align="center" valign="middle" style="background-image:url(pictures/555/5550001/Riding_Mower_thumb.jpg); background-position:center; background-repeat:no-repeat; "><a href="javascript:void(0);" onClick="loadDescriptionAndPic('pictures/555/5550001/Riding_Mower.jpg',600,450, 108, 'on');"><img src="images/spacer.gif" width="64" height="64" alt="" border="0"></a></td>
   </tr>
   </table>
   </td>
 
   </tr>
   </table>
   </div>
   </td>
   <td height="20" bgcolor="#CCCCCC">&nbsp; </td>
   <td height="20" bgcolor="#535353">&nbsp; </td>
 </tr>
 <tr>
 <td colspan="2"> <img src="images/sm_l_l.gif" width="31" height="9" alt=""></td>
 
   <td height="9" colspan="5" bgcolor="#CCCCCC"> <img src="images/spacer.gif" width="698" height="9" alt=""></td>
   <td colspan="2"> <img src="images/sm_l_r.gif" width="31" height="9" alt=""></td>
 </tr>
 <tr>
 <td height="9" colspan="9" bgcolor="#535353">
 <img src="images/spacer.gif" width="760" height="9" alt=""></td>
 </tr>
 <tr>
 
   <td colspan="2">
   <img src="images/sm_u_l.gif" width="31" height="9" alt=""></td>
   <td height="9" colspan="5" bgcolor="#CCCCCC">
   <img src="images/spacer.gif" width="698" height="9" alt=""></td>
   <td colspan="2">
   <img src="images/sm_u_r.gif" width="31" height="9" alt=""></td>
  </tr>
  <tr>
   <td height="20" bgcolor="#535353">&nbsp;
 
   </td>
   <td height="20" bgcolor="#CCCCCC">&nbsp;
   </td>
   <td height="20" colspan="5" bgcolor="#CCCCCC">
   <p align="center" id="item_name" class="item_name">Select an item above for more information. </p>
   <p align="center" class="item_description" id="item_description">&nbsp;</p>
   </td>
 
   <td height="20" bgcolor="#CCCCCC">&nbsp;
   </td>
   <td height="20" bgcolor="#535353">&nbsp;
   </td>
  </tr>
 </table>
 </body>
 </html>
 
 [/code]

@glen123authorOct 25.2006 — #What part of that script do I want? The whole thing?

@sneakyimpOct 25.2006 — #no not all of it. the important things are that you preload images like this:

[CODE]
 var im0 = new Image();
 im0.src = "pictures/555/5550001/Beltona_Guitar.jpg";
 var im1 = new Image();
 im1.src = "pictures/555/5550001/Riding_Mower.jpg";
 var im2 = new Image();
 im2.src = "pictures/555/5550001/Sony_TV.jpg";
 [/CODE]

and then assign any images like this. NOTE that this function needs to know the height and width of the image displayed. That may sound like a pain but I don't know any other way to get it working.

[CODE]
 function loadDescriptionAndPic(strImage,intWidth,intHeight) {
 var blnDOMSUPPORT = (document.getElementById) ? true : false;
 document['main_image'].src = strImage;
 document['main_image'].width = intWidth;
 document['main_image'].height = intHeight;
 } // loadDescriptionAndPic()
 [/CODE]

and that your html contains an image with id and name set to main_image:

[CODE]
 <img src="images/spacer.gif" height="1" width="1" id="main_image" name="main_image">
 [/CODE]

Its contents in my case was a transparent gif, but can be anything.

There might be other ways to do it, but this one works for me in IE and Firefox.

@glen123authorOct 30.2006 — #Okay I've added your code and now the mouseovers work (albeit in a laggy manner) but when you click the location name image the maps don't appear and it still randomly removes some location names.

Any ideas? Have I implemented your code properly?

Thanks for the help.

Glen

@CrazyMerlinOct 30.2006 — #first thing I notice is that onmouseout it seems to reload all the images, and if that is the case, that is a very incorrect approach.

it did seem to work ok for me in IE though, although from a design point I would have those images that appear when you roll over as a continous image rotation and when you mouse over just show the map.

but that is just my 2 bits worth

//erlin!

@sneakyimpOct 30.2006 — #You're not even using my function at all. If you're going to fix this, you're going to need to make an effort to use the code I'm offering.

@glen123authorOct 31.2006 — #Are you sure you've refreshed the page? Because I have definitely used the code you listed above in the page.

@sneakyimpOct 31.2006 — #I saw that you preloaded your images but you are still not using my function loadDescriptionAndPic(). You're still using the macromedia mouseover functions (which might work if you want to try and figure them out).

To simply define my function in your document without using it won't accomplish anything.

Also in #JavaScript _↴

Javascript popup buttons don't work in firefox-please help Urgent help needed!Check form

Success!

Help @glen123 spread the word by sharing this article on Twitter...

Tweet This

In over my head.

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

In over my head.

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴