Baseball Card Image Captions with CSS and JavaScript (Near-Mint)

With my last entry, I discussed how to have the DOM generate text captions for images. Now I’m going to take it further, and with a little pre-drawn blank baseball card in png* format, I’m going to have the DOM turn my images into 1987 Donruss (or even 1987 Topps) baseball cards, with the caption showing as the player’s name.

*Why .png? As we all know, IE6 doesn’t play ball with .pngs. I could’ve used .gif format for the pre-drawn transparent baseball card, and this technique would work fine in IE6 without any hacks. But I’m wanting to use the 1987 Topps and 1987 Donruss card designs as frames (my heyday of collecting), which have rounded borders and special angles. There needs to be some varying levels of opacity in those corners, which .gif doesn’t do. It would all just look like ass unless I used a more boxy frame, like the 1988 Score set, but that’s not the one I’m going to use for this tutorial. I’m also not going to include the IE6 htc hacks, or the alpha-transparency hacks, which would’ve juiced up IE6 so that things will work, but instead I’m leaving them in the dugout. IE6 has a pitcher’s batting average when it comes to standards support, so upgrade to IE7 and call it a day. But know that this works in Firefox, Safari, and IE7, and if you wanted to create your frames as .gif instead of .png so that it’ll work in IE6, it’s your privilege to do so.

On with the game.

The idea is that you start with an image, a portrait in a vertically-rectangular fashion:

…and that image would be marked up like so:

<img
  src="dave.jpg"
  alt=""
  class="donruss"
  title="Dave Letterman" />

By the time I mix in a little JavaScript, that markup will turn out looking like this:

<div class="imgcontainer donruss">
  <img 
     style="width: 318px;
     height: 446px;"
     src="dave.jpg"
     class="donruss"
     alt=""
     title="Dave Letterman">
  <img 
     class="frame"
     src="frameDonruss.png">
  <div class="caption">Dave Letterman</div>
</div>

…producing our desired effect:

Note that the original image is stretched to meet the dimensions of the outer frame (in this case, 318 x 446). That’s why it’s best to use a vertically oriented image to begin with – so that it at least scales proportionately – if not the exact dimensions of the final product.

The markup generated by the JavaScript would by styled so that the different elements are layered to form the card:

An outer div is created and styled as position:relative so that the card frame and caption can be absolutely positioned in the right spot.

View the example and enjoy. If someone ends up making them with different card designs, let me know – I’d love to see them.