www.webdeveloper.com
Results 1 to 9 of 9

Thread: In over my head.

  1. #1
    Join Date
    May 2005
    Posts
    6

    In over my head.

    Hi,

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

    The page is: http://www.fuelespresso.com/locations.htm

    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)

  2. #2
    Join Date
    Mar 2004
    Posts
    369
    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.

    HTML Code:
    <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>

  3. #3
    Join Date
    May 2005
    Posts
    6
    What part of that script do I want? The whole thing?

  4. #4
    Join Date
    Mar 2004
    Posts
    369
    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";
    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()
    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">
    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.

  5. #5
    Join Date
    May 2005
    Posts
    6
    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

  6. #6
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    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!

  7. #7
    Join Date
    Mar 2004
    Posts
    369
    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.

  8. #8
    Join Date
    May 2005
    Posts
    6
    Are you sure you've refreshed the page? Because I have definitely used the code you listed above in the page.

  9. #9
    Join Date
    Mar 2004
    Posts
    369
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles