By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

Firefox render gaps in ImageReady generated Slices

P: 2
I'm very new to using CSS and also the concept of slices for mouse-overs, and have made my first attempt at using ImageReady to generate slices of a world map. I basically wanted a map that would show various countries appearing to be depressed when "moused-over". To keep it simple at first, I just decided to try two countries.

After copying the HTML and JavaScript codes generated by ImageReady into the page I wanted to insert the map into, I found that it seemed to work just fine when viewed with IE7. However, when using Firefox 2.0.0.11, (and Safari), I found that the image rendered with multiple gaps. The page in question is at http://www.nowspecialties.com/temp/international.html .

The "raw" code generated by ImageReady renders quite nicely though in FireFox, so obviously I'm doing something wrong, when I try copying and pasting the code into the appropriate sections of my page... but I don't know what I'm doing wrong.

I saw another post on this forum (http://www.thescripts.com/forum/thread688091.html) where someone had a similar problem, and the solution seemed to be to insert
Expand|Select|Wrap|Line Numbers
  1. table#TAG_Header img { display: block; }
.

I have no idea where that's supposed to go, and after many attempts at pasting it into various places (including my CSS style sheet), I decided to go ahead and publicly admit that I'm the idiot that I am.

For what it's worth, here's the raw code generated by ImageReady:
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <TITLE>world-map-LOWER</TITLE>
  4. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  5. <!-- ImageReady Preload Script (world-map-LOWER.psd) -->
  6. <SCRIPT TYPE="text/javascript">
  7. <!--
  8.  
  9. function newImage(arg) {
  10.     if (document.images) {
  11.         rslt = new Image();
  12.         rslt.src = arg;
  13.         return rslt;
  14.     }
  15. }
  16.  
  17. function changeImages() {
  18.     if (document.images && (preloadFlag == true)) {
  19.         for (var i=0; i<changeImages.arguments.length; i+=2) {
  20.             document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
  21.         }
  22.     }
  23. }
  24.  
  25. var preloadFlag = false;
  26. function preloadImages() {
  27.     if (document.images) {
  28.         world_map_LOWER_01_USA_over = newImage("map-slices/world-map-LOWER_01-USA_over.gif");
  29.         world_map_LOWER_01_China_over = newImage("map-slices/world-map-LOWER_01-China_ov.gif");
  30.         world_map_LOWER_02_USA_over = newImage("map-slices/world-map-LOWER_02-USA_over.gif");
  31.         China_over = newImage("map-slices/China-over.jpg");
  32.         world_map_LOWER_04_China_over = newImage("map-slices/world-map-LOWER_04-China_ov.gif");
  33.         world_map_LOWER_05_USA_over = newImage("map-slices/world-map-LOWER_05-USA_over.gif");
  34.         USA_over = newImage("map-slices/USA-over.jpg");
  35.         world_map_LOWER_07_USA_over = newImage("map-slices/world-map-LOWER_07-USA_over.gif");
  36.         world_map_LOWER_07_China_over = newImage("map-slices/world-map-LOWER_07-China_ov.gif");
  37.         world_map_LOWER_08_USA_over = newImage("map-slices/world-map-LOWER_08-USA_over.gif");
  38.         world_map_LOWER_09_China_over = newImage("map-slices/world-map-LOWER_09-China_ov.gif");
  39.         preloadFlag = true;
  40.     }
  41. }
  42.  
  43. // -->
  44. </SCRIPT>
  45. <!-- End Preload Script -->
  46. </HEAD>
  47. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
  48. <!-- ImageReady Slices (world-map-LOWER.psd) -->
  49. <TABLE WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  50.     <TR>
  51.         <TD COLSPAN=5>
  52.             <IMG NAME="world_map_LOWER_01" SRC="map-slices/world-map-LOWER_01.gif" WIDTH=640 HEIGHT=51 ALT=""></TD>
  53.         <TD>
  54.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD>
  55.     </TR>
  56.     <TR>
  57.         <TD COLSPAN=3>
  58.             <IMG NAME="world_map_LOWER_02" SRC="map-slices/world-map-LOWER_02.gif" WIDTH=416 HEIGHT=8 ALT=""></TD>
  59.         <TD ROWSPAN=3>
  60.             <A HREF="#"
  61.                 ONMOUSEOVER="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-China_ov.gif', 'China', 'map-slices/China-over.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04-China_ov.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-China_ov.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09-China_ov.gif');
  62. return true;"
  63.                 ONMOUSEOUT="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'China', 'map-slices/China.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09.gif'); return true;"
  64.                 ONMOUSEDOWN="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'China', 'map-slices/China.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09.gif'); return true;"
  65.                 ONMOUSEUP="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-China_ov.gif', 'China', 'map-slices/China-over.jpg', 'world_map_LOWER_04', 'map-slices/world-map-LOWER_04-China_ov.gif', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-China_ov.gif', 'world_map_LOWER_09', 'map-slices/world-map-LOWER_09-China_ov.gif');
  66. return true;">
  67.                 <IMG NAME="China" SRC="map-slices/China.jpg" WIDTH=104 HEIGHT=74 BORDER=0 ALT="China"></A></TD>
  68.         <TD ROWSPAN=4>
  69.             <IMG NAME="world_map_LOWER_04" SRC="map-slices/world-map-LOWER_04.gif" WIDTH=120 HEIGHT=275 ALT=""></TD>
  70.         <TD>
  71.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
  72.     </TR>
  73.     <TR>
  74.         <TD ROWSPAN=3>
  75.             <IMG NAME="world_map_LOWER_05" SRC="map-slices/world-map-LOWER_05.gif" WIDTH=95 HEIGHT=267 ALT=""></TD>
  76.         <TD>
  77.             <A HREF="#"
  78.                 ONMOUSEOVER="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-USA_over.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02-USA_over.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05-USA_over.gif', 'USA', 'map-slices/USA-over.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-USA_over.gif',
  79. 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;"
  80.                 ONMOUSEOUT="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05.gif', 'USA', 'map-slices/USA.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08.gif');
  81. return true;"
  82.                 ONMOUSEDOWN="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05.gif', 'USA', 'map-slices/USA.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07.gif', 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08.gif');
  83. return true;"
  84.                 ONMOUSEUP="changeImages('world_map_LOWER_01', 'map-slices/world-map-LOWER_01-USA_over.gif', 'world_map_LOWER_02', 'map-slices/world-map-LOWER_02-USA_over.gif', 'world_map_LOWER_05', 'map-slices/world-map-LOWER_05-USA_over.gif', 'USA', 'map-slices/USA-over.jpg', 'world_map_LOWER_07', 'map-slices/world-map-LOWER_07-USA_over.gif',
  85. 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;">
  86.                 <IMG NAME="USA" SRC="map-slices/USA.jpg" WIDTH=110 HEIGHT=59 BORDER=0 ALT="USA"></A></TD>
  87.         <TD ROWSPAN=3>
  88.             <IMG NAME="world_map_LOWER_07" SRC="map-slices/world-map-LOWER_07.gif" WIDTH=211 HEIGHT=267 ALT=""></TD>
  89.         <TD>
  90.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=59 ALT=""></TD>
  91.     </TR>
  92.     <TR>
  93.         <TD ROWSPAN=2>
  94.             <IMG NAME="world_map_LOWER_08" SRC="map-slices/world-map-LOWER_08.gif" WIDTH=110 HEIGHT=208 ALT=""></TD>
  95.         <TD>
  96.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
  97.     </TR>
  98.     <TR>
  99.         <TD>
  100.             <IMG NAME="world_map_LOWER_09" SRC="map-slices/world-map-LOWER_09.gif" WIDTH=104 HEIGHT=201 ALT=""></TD>
  101.         <TD>
  102.             <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=201 ALT=""></TD>
  103.     </TR>
  104. </TABLE>
  105. <!-- End ImageReady Slices -->
  106. </BODY>
  107. </HTML>
  108.  
Thanks in advance for any hints anyone might be able to provide.
Jan 8 '08 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I'm taking a couple of weeks off, as of 10 minutes ago, but the first thing you need to do is validate for your list of 182 html errors that need correcting. Use Firefox as your reference browser, never IE because it is old, buggy and non-standards compliant but its fixes are known.

After a quick scroll through that list, a lot of those errors are because xhtml requires tags to be in lower case, but you aren't serving xhtml so it's treated as html anyway.
Jan 8 '08 #2

P: 26
table#TAG_Header img { display: block; } is indeed the solution. I would rename it table#ImageReady img { display: block; } and add it to your stylesheet.

However the reason it didn't work for you is because you don't have an id on your table. You see the person who came up with that solution probably didn't want to just make every img inside of table display as a block, so they added an id to the ImageReady table.

You will need to do the same thing to make that style apply to the appropriate table. So add id="ImageReady" to the table tag as follows:
<TABLE id="ImageReady" WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>

If you are having any trouble, let us know. I'm sure we can walk you through this simple CSS modification if you are new to CSS.
Jan 8 '08 #3

P: 2
Thank you very much drhowarddrfine and astangeland. 182 errors! Guess the fact that the page actually rendered at all, only proves that maybe life did evolve from a series of accidents. :)

Thanks for the hint on using lower case tags.

Thanks astangeland for telling me how to configure the syntax, your solution works perfectly! It doesn't seem to matter where I insert the code into the CSS style sheet, correct?
Jan 9 '08 #4

P: 37
.......... 182 errors! Guess the fact that the page actually rendered at all, only proves that maybe life did evolve from a series of accidents ..........
Not really, Extant graphical Browsers (Firefox, Opera, Safari, MSIE, et al) are configured to render "tag soup" markup, albeit often erratically). Refer to Web page Interoperability

James
Jan 9 '08 #5

P: 26
Actually besides a missing type attribute on the javascript, and an align and a width attribute on the h1 and hr tags respectively it looks pretty good. Its just the ImageReady generated HTML code and you have a XHTML doctype. It all gets parsed as HTML either way, so it should be no suprise that it displays fine.
Jan 9 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.