Image Slicing

Home

There are times when I will assemble a complex image set using <div>s to contain my "image slices." While the page may appear "graphic heavy" when rendered, I keep the code in check by only including the essential image slices as actual <img> elements. The associated image slices are displayed using CSS to assign background images to the other divs that comprise the montage.

Imagine a large image sliced into twelve segments: four of these comprise the essential elements of the image while the remaining eight are just filler background, though still relatively important pieces of the total image.

Say the four main slices were various automobile models and the other eight slices were segments of a "snazzy, artsy" background. I will keep the four images of the car model as <div id="car-one"><img src="car-model-one.jpg alt="2003 Car model one" title="The redesigned Car Model One is blah, blah, blah" class="c1" /></div> and the "filler background as: <div id="cm-s1"></div>.

The CSS for the "empty" divs might be something like this:

#cm-s1 { 
position:absolute; 
top:35px; 
left:0; 
width:132px; 
height:24px; 
background:url(cm-top-left-slice.gif); 
} 
 
#cm-s2 { 
position:absolute; 
top:35px; 
left:133px; 
width:90px; 
height:24px; 
background:url(cm-top-right-slice.gif); 
} 
 
#car-one { 
position:absolute; 
top:59px; 
left:0; 
width:180px; 
height:135px; 
} 
 
.c1 { 
width:180px; 
height:135px; 
} 
 
img { 
border:0; 
} 

And so on...

This way the page will only contain the actual code for the four main image slices while CSS will handle the rest. For the four main images I will also allow CSS to handle the border, width and height of the images.

This can also be used to assemble "chrome" for a GUI without cluttering the page code with the various image segments.

Alt and title attributes do NOT need to be assigned to background images AND, you keep the additional image code (which, in this case, is part of the presentation...) away from accessibility browsers.

papabaer