Split Image

Per S

Rate me:

4.07/5 (16 votes)

28 Aug 2003

112.3K

Displaying a split image using a table

Sample screenshot

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

HTML

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

HTML

<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.

HTML

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

HTML

.hide {
    background-color:  #FFFFFF;
    width:  10px;
    height: 10px;
}

A TD without background color will be transparent:

HTML

.transp {
    border: 2px solid #000000;
    width:  300px;
    height: 113px;
}

Complete sample code:

HTML

<!-- Insert the STYLE code into the <HEAD> section of your page -->

<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>

<!-- Insert the TABLE code into the <BODY> section of your page -->

<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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Per S

Web Developer

Norway

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Split Image

Introduction

How it's done

Split image tool

License

Comments and Discussions