Introduction
You can create some nice pictures by splitting them up into smaller images. Doing this in Photoshop and keeping the proportions isn't easy (I'm no photoshop guru), instead you can do it using a table. The code below creates the image of the sailboat.
How it's done
The image is loaded into a table as a background image
<style>
#splitimg {
background:url(http://soderlind.no/s/splitimg/sailboat.gif);
width: 300px;
height: 400px;
}
</style>
.
.
.
<table id="splitimg">
Or, if you don't like to use CSS:
<table background="http://soderlind.no/s/splitimg/sailboat.gif" <BR> width="300" height="400">
Next, place a grid on top of the image using table rows and colums.
<tr>
<td class="transp"> </td>
</tr>
<tr>
<td class="hide"></td>
</tr>
<tr>
<td class="transp"> </td>
</tr>
<tr>
<td class="hide"></td>
</tr>
<tr>
<td class="transp"> </td>
</tr>
A TD
with a background color will hide that part of the image:
.hide {
background-color: #FFFFFF;
width: 10px;
height: 10px;
}
A
TD
without background color will be transparent:
.transp {
border: 2px solid #000000;
width: 300px;
height: 113px;
}
Complete sample code:
<!--
<style>
#splitimg {
background:url(http://soderlind.no/s/splitimg/sailboat.gif);
width: 300px;
height: 400px;
}
.hide {
background-color: #FFFFFF;
width: 10px;
height: 10px;
}
.transp {
border: 2px solid #000000;
width: 300px;
height: 113px;
}
</style>
<!--
<table id="splitimg" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="transp"> </td>
</tr>
<tr>
<td class="hide"></td>
</tr>
<tr>
<td class="transp"> </td>
</tr>
<tr>
<td class="hide"></td>
</tr>
<tr>
<td class="transp"> </td>
</tr>
</table>
Split image tool
Doing this by hand isn't easy, so I created a tool you can use -
http://soderlind.no/s/splitimg/default.asp
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.