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
- 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
- <HTML>
- <HEAD>
- <TITLE>world-map-LOWER</TITLE>
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
- <!-- ImageReady Preload Script (world-map-LOWER.psd) -->
- <SCRIPT TYPE="text/javascript">
- <!--
- function newImage(arg) {
- if (document.images) {
- rslt = new Image();
- rslt.src = arg;
- return rslt;
- }
- }
- function changeImages() {
- if (document.images && (preloadFlag == true)) {
- for (var i=0; i<changeImages.arguments.length; i+=2) {
- document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
- }
- }
- }
- var preloadFlag = false;
- function preloadImages() {
- if (document.images) {
- world_map_LOWER_01_USA_over = newImage("map-slices/world-map-LOWER_01-USA_over.gif");
- world_map_LOWER_01_China_over = newImage("map-slices/world-map-LOWER_01-China_ov.gif");
- world_map_LOWER_02_USA_over = newImage("map-slices/world-map-LOWER_02-USA_over.gif");
- China_over = newImage("map-slices/China-over.jpg");
- world_map_LOWER_04_China_over = newImage("map-slices/world-map-LOWER_04-China_ov.gif");
- world_map_LOWER_05_USA_over = newImage("map-slices/world-map-LOWER_05-USA_over.gif");
- USA_over = newImage("map-slices/USA-over.jpg");
- world_map_LOWER_07_USA_over = newImage("map-slices/world-map-LOWER_07-USA_over.gif");
- world_map_LOWER_07_China_over = newImage("map-slices/world-map-LOWER_07-China_ov.gif");
- world_map_LOWER_08_USA_over = newImage("map-slices/world-map-LOWER_08-USA_over.gif");
- world_map_LOWER_09_China_over = newImage("map-slices/world-map-LOWER_09-China_ov.gif");
- preloadFlag = true;
- }
- }
- // -->
- </SCRIPT>
- <!-- End Preload Script -->
- </HEAD>
- <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
- <!-- ImageReady Slices (world-map-LOWER.psd) -->
- <TABLE WIDTH=640 BORDER=0 CELLPADDING=0 CELLSPACING=0>
- <TR>
- <TD COLSPAN=5>
- <IMG NAME="world_map_LOWER_01" SRC="map-slices/world-map-LOWER_01.gif" WIDTH=640 HEIGHT=51 ALT=""></TD>
- <TD>
- <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=51 ALT=""></TD>
- </TR>
- <TR>
- <TD COLSPAN=3>
- <IMG NAME="world_map_LOWER_02" SRC="map-slices/world-map-LOWER_02.gif" WIDTH=416 HEIGHT=8 ALT=""></TD>
- <TD ROWSPAN=3>
- <A HREF="#"
- 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');
- return true;"
- 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;"
- 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;"
- 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');
- return true;">
- <IMG NAME="China" SRC="map-slices/China.jpg" WIDTH=104 HEIGHT=74 BORDER=0 ALT="China"></A></TD>
- <TD ROWSPAN=4>
- <IMG NAME="world_map_LOWER_04" SRC="map-slices/world-map-LOWER_04.gif" WIDTH=120 HEIGHT=275 ALT=""></TD>
- <TD>
- <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=8 ALT=""></TD>
- </TR>
- <TR>
- <TD ROWSPAN=3>
- <IMG NAME="world_map_LOWER_05" SRC="map-slices/world-map-LOWER_05.gif" WIDTH=95 HEIGHT=267 ALT=""></TD>
- <TD>
- <A HREF="#"
- 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',
- 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;"
- 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');
- return true;"
- 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');
- return true;"
- 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',
- 'world_map_LOWER_08', 'map-slices/world-map-LOWER_08-USA_over.gif'); return true;">
- <IMG NAME="USA" SRC="map-slices/USA.jpg" WIDTH=110 HEIGHT=59 BORDER=0 ALT="USA"></A></TD>
- <TD ROWSPAN=3>
- <IMG NAME="world_map_LOWER_07" SRC="map-slices/world-map-LOWER_07.gif" WIDTH=211 HEIGHT=267 ALT=""></TD>
- <TD>
- <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=59 ALT=""></TD>
- </TR>
- <TR>
- <TD ROWSPAN=2>
- <IMG NAME="world_map_LOWER_08" SRC="map-slices/world-map-LOWER_08.gif" WIDTH=110 HEIGHT=208 ALT=""></TD>
- <TD>
- <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
- </TR>
- <TR>
- <TD>
- <IMG NAME="world_map_LOWER_09" SRC="map-slices/world-map-LOWER_09.gif" WIDTH=104 HEIGHT=201 ALT=""></TD>
- <TD>
- <IMG SRC="map-slices/spacer.gif" WIDTH=1 HEIGHT=201 ALT=""></TD>
- </TR>
- </TABLE>
- <!-- End ImageReady Slices -->
- </BODY>
- </HTML>