Sweet, sweet filmstrip effect, part 1

Posted: April 1st, 2009 | Author: ccollins | Filed under: General, Web | Tags: css, html, tutorial | No Comments »

Bad markup makes me a little sick. Bad advice makes me a little sad. Bad advice to use bad markup… You get the idea. A user on the local Linux user group list recently asked about how someone implemented this:

Someone responded that it looked like they had used an imagemap, which is what caught my interest, not because fifteen year old imagemap technology is that interesting, but rather because I am always interested to see good applications of those technologies that have few, if any, good applications (iframes anyone?) so I pop on over to the site, and take a look…Yikes!!

It would probably have been better If they had used an imagemap. Instead they created a bunch of images, sliced them up, and crammed them into a table (really into a bunch of nested tables). Then, for flavor, they sprinkled in a few <font> and <center> tags. Now, I’m not going to bash the guy for doing it this way. We can assume that he just didn’t know better. Now he will…

First things first, let’s build our nice clean markup. This is essentially a list of images that link to other images, making an unordered list a reasonable approach:

<ul id="myFilmStrip" class="filmStrip">
  <li>
   <a href="/images/theLargeVersion01.png" title="theTitle">
    <img src="/images/theSmallVersion01.png" alt="theAlternateText" />
   </a>
  </li>
  <li>
    <a href="/images/theLargeVersion02.png" title="theTitle">
      <img src="/images/theSmallVersion02.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion03.png" title="theTitle">
      <img src="/images/theSmallVersion03.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion04.png" title="theTitle">
      <img src="/images/theSmallVersion04.png" alt="theAlternateText" />
    </a>
  </li>
  <li>
    <a href="/images/theLargeVersion05.png" title="theTitle">
      <img src="/images/theSmallVersion05.png" alt="theAlternateText" />
    </a>
  </li>
</ul>

Done. The whole first row is now defined. Beautiful markup, less than ideal presentation, but we’ll get to that. First, lets take a look at the images we’re going to need.

We’re going to use a background image on each of the <li /> elements in our list. Another approach would be to use a repeating background on the <ul>, but I prefer our method. This just makes more sense, as is will create little flexible chunks of interface instead of big, inflexible chunks. Here’s our background image:

I’m using some parts of our donor site, but you can create your own that go with your site. The dimensions on this image are 105 x 98, but you can use whatever size makes sense for you. To work with this background image, our thumbnails should be 95 x 70 :

This will allow them to fit onto the background nicely. You can do whatever you want with the larger image, as the will load outside of this interface. You will, however, need to generate a thumbnail for each of your larger images.

Now we get to the CSS:

.filmStrip {
  display:block;
  margin:0 auto;
  width:525px;
}
.filmStrip LI{
  background-image:url('images/background.png');
  display:block;
  float:left;
  height:98px;
  margin:10px 0;
  width:105px;
}

.filmStrip LI A {
  display:block;
  height:70px;
  width:95px;
  margin:14px 5px;
}

.filmStrip LI A IMG{
  border:none;
}

We have 4 styles defined here:

.filmStrip{} – Gives the whole thing a fixed width (causing any more than 5 to wrap to the next line, and allowing children to float), and centering the strip on the page, as with the initial site (no need for those nasty old <center /> tags)

.filmStrip LI{} – Assigns our background image to the list items, sets their display mode to ‘block,’ sets the width and height, and gets them floating in the <ul />

.filmStrip LI A{} – Since we want the area around the thumbnail to be non-clickable, we need to give the anchor a size that matches the image, and use the margin on the anchor to get it lined up on our background.

.filmStrip LI IMG{} – Browsers still put a border on linked images by default. This gets rid of them.

That’s about it. If you add another 5 images, you’ll get something like this:

And 3 more:

Here we see why I prefer to put the background on the <li /> rather than the <ul />. The other approach would have resulted in a big swath of ‘empty’ film.

So, do it this way, or something like it. Please… for the sake of us all.

Next: Where do those links lead?

---