Prepping Your Image

• Where you once had one image, you're instead going to need to slice it into several images. If you want to have the image link to two different places, you might split the image into two equal parts. If you use Adobe Photoshop, you already have a built-in image slicing tool for slice your image manually. If you don't have Photoshop, the free image editing software GIMP offers a similar tool for splitting images into equal parts, under the Web filters menu.
  
  

Making Images Appear Seamless

• Craigslist doesn't support the use of the "cellpadding" or "cellspacing" elements; regardless of what you set, there will always be about 5 pixels of space between cells. If you don't need your image to look seamless, such as if you're including social icons, then this isn't a big deal. If you want the appearance of one image, then you can do this by setting each image next to each other in the HTML, without any spaces or creating a new line. Use caution with this method, as if a user is on a small screen -- such as with a mobile device -- the images will wrap automatically, and the effect is ruined.
  
  If you have six pieces of your image and need to set with three on top and three on bottom, it would look like this:
  
  <a href="link1"><img src="image1"><a href="link2"><img src="image2"><a href="link3"><img src="image3"><br><a href="link4"><img src="image4"><a href="link5"><img src="image5"><a href="link6"><img src="image6">
  
  The HTML is a bit cringe-worthy, but the lack of spaces or new lines keeps all the images tight together. The <br> tag moves the last three images to a new line as a line break, rather than as a new paragraph.
  
  

Using a Table

• If you want to simply set six images in two rows of three, this can be easily achieved with tables. Your basic table would look something like this:
  
  <table>
  <tr>
  <td><a href="link1"><img src="image1"></td>
  <td><a href="link2"><img src="image2"></td>
  <td><a href="link3"><img src="image3"></td>
  </tr>
  <tr>
  <td><a href="link4"><img src="image4"></td>
  <td><a href="link5"><img src="image5"></td>
  <td><a href="link6"><img src="image6"></td>
  </tr>
  </table>
  
  This structures your images so that they remain side-by-side and in two rows even on small screens, but it does introduce a gap between the images.
  
  

Alternatives to Images

• On a site like Craigslist, which is very text-based, images for navigation isn't as crucial as on a traditional website. While using images for a link is cute and helps catch the eye, like using the iconic RSS image for a link to a feed, it can also obscure your message if the user is unclear that the image is a link, or does not know where the link leads. Only use images as links where it absolutely adds value to the content.