I have two large mosaics for a Web page composed of small thumbnails that, when clicked, lead you to larger copies of the pictures.
I'm not an expert with this product...and I did something once that I now can't figure out how to do again.
When I worked on the first one, I somehow got it to slice the mosaic up into small segments that didn't necessarily match the borders of the thumbnails and then build a complicated <MAP> to handle the mouse clicks.
Now, all I seem to be able to do is generate the mosaic as a single, large picture, with a fairly simple <MAP> that defines the individual rectangles.
The former way loads faster. Can anyone tell me how I managed it?
Thanks.
Splitting pictures for HTML
-
Tad
As an illustration, here's what I'm talking about. The red is what I get when I try to Save as HTML now...a single image cell in a table. The green is what I somehow got before (well, a fragment of it)...lot of cells with fragments of the total picture in it.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img width="650" height="526" src="images/Untitled - 1_1.jpg" \
usemap="#Map1" border="0"></td>
</tr>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="13"><img width="750" height="51"
src="images/testing0411/testing0411_1.jpg" usemap="#map1"
border="0"></td>
<td><img width="1" height="51" src="images/space.gif"
border="0"></td>
</tr>
<tr>
<td rowspan="2" colspan="3"><img width="148" height="100"
src="images/testing0411/testing0411_2.jpg" usemap="#map2"
border="0"></td>
<td rowspan="3" colspan="3"><img width="213" height="117"
src="images/testing0411/testing0411_3.jpg" usemap="#map3"
border="0"></td>
<td colspan="7"><img width="389" height="22"
src="images/testing0411/testing0411_4.jpg" usemap="#map4"
border="0"></td>
<td><img width="1" height="22" src="images/space.gif"
border="0"></td>
</tr>
etc.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img width="650" height="526" src="images/Untitled - 1_1.jpg" \
usemap="#Map1" border="0"></td>
</tr>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="13"><img width="750" height="51"
src="images/testing0411/testing0411_1.jpg" usemap="#map1"
border="0"></td>
<td><img width="1" height="51" src="images/space.gif"
border="0"></td>
</tr>
<tr>
<td rowspan="2" colspan="3"><img width="148" height="100"
src="images/testing0411/testing0411_2.jpg" usemap="#map2"
border="0"></td>
<td rowspan="3" colspan="3"><img width="213" height="117"
src="images/testing0411/testing0411_3.jpg" usemap="#map3"
border="0"></td>
<td colspan="7"><img width="389" height="22"
src="images/testing0411/testing0411_4.jpg" usemap="#map4"
border="0"></td>
<td><img width="1" height="22" src="images/space.gif"
border="0"></td>
</tr>
etc.
-
jedi-jae