Image Slicing

 
PAGE CONTENTS
 

Concept Explained

Image Slicing means taking a large image and breaking it into smaller images that can be "reassembled" into an HTML table so that the image appears complete.

Advantages are:

 

top

 

Completed Example

The large image below consists of 6 smaller images arranged in a table to form a single image.  The process was performed in PaintShop Pro but it can also be performed in Fireworks just as easily.

 

top

 

Individual Slices

 

top

 

HTML Table

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
        <tr>
                <td>
                        <table border="0" cellpadding="0" cellspacing="0" width="600"
                                style="border-collapse: collapse; padding: 0px; margin: 0px">
                                <tr>
                                        <td rowspan="1" colspan="1" width="300" height="256"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles0" src="images/castles_1x1.gif" width="300" height="256" border="0" alt="" /></td>
                                        <td rowspan="1" colspan="1" width="300" height="256"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles1" src="images/castles_1x2.gif" width="300" height="256" border="0" alt="" /></td>
                                </tr>
                                <tr>
                                        <td rowspan="1" colspan="1" width="300" height="257"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles2" src="images/castles_2x1.gif" width="300" height="257" border="0" alt="" /></td>
                                        <td rowspan="1" colspan="1" width="300" height="257"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles3" src="images/castles_2x2.gif" width="300" height="257" border="0" alt="" /></td>
                                </tr>
                                <tr>
                                        <td rowspan="1" colspan="1" width="300" height="257"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles4" src="images/castles_3x1.gif" width="300" height="257" border="0" alt="" /></td>
                                        <td rowspan="1" colspan="1" width="300" height="257"
                                                style="border-collapse: collapse; padding: 0px; margin: 0px"><img
                                                name="castles5" src="images/castles_3x2.gif" width="300" height="257" border="0" alt="" /></td>
                                </tr>
                        </table>
                </td>
        </tr>
</table>

 

top

 

Instructions for Macromedia Fireworks 8

 

top

 

Instructions for PaintShop Pro 7

 

top

 

Valid XHTML 1.0 Transitional

Valid CSS!