Just ignore it

One thing that sames me time is the way I handle .png files in IE6: I don’t. IE6 can’t handle transparency in .png files, but instead of using a script to fix it (which has never really worked for me) I just copy all the pertinent css to a file called IE6.css, which I load via conditional comments. I change all the image filenames to .gif like this:

style.css

#content {
background: transparent url('images/background.png') repeat-y top left;
}

ie6.css

#content {
background: transparent url('images/background.gif') repeat-y top left;
}

The Magick

Then I batch convert all my .png files with Image Magick and place them in a special folder, like this:

$ mkdir gifs
$ mogrify -path gifs/ -format gif *.png

The resulting gif files are much lower quality than the png’s, but at least IE6 users can see the site. Besides, they’re used to the Internet looking like crap.

$ montage *.png -geometry 150x150\>+2+2 montage.png

This will stack two images to create a CSS sprite. Very handy for flicker-free image rollovers:

$ montage -background transparent -tile 1x2 -geometry +0+2 image1.gif image2.gif result.gif

You could create a taller or wider stack by adjusting the -tile option. For example -tile 2x10 would stack 2 images across and 10 images down. If you don’t have 20 images, Imagemagick will leave empty spaces.

Not sure why I had to set -geometry +0+2. That creates a 2 pixel vertical offset, which was necessary to align to two images. If you leave it at -geometry +0+0 the hover image is slightly off, which makes for a cool “pressed in” effect, but it’s not always what I need.

The CSS

The CSS you would use to make the rollover work would go something like this:


a.rollover {
background: url('Images/result.gif') no-repeat center top;
display: block; /* necessary to set the width and height of a tags */
text-indent: -99999px; /* get the link text out of the way if replaced by an image */
overflow: hidden; /* so you don't get the dotted outline when you click on the link */
width: 100px;
height: 100px;
}

a.rollover:hover {
background: url('Images/result.gif') no-repeat center bottom;
}


Bash bonus!

When I did this, I had a folder of images with the naming scheme menu_img1.gif, menu_img1_on.gif, menu_img2.gif, menu_img2_on.gif.. .etc.. I automated the sprite creation process from the command line like this:


$ array=( img1 img2 img3 )
$ for i in 0 1 2
$ do
$ montage -background transparent -tile 1x2 -geometry +0+2 menu_${array[i]}.gif menu_${array[i]}_on.gif menu_${array[i]}_sprite.gif
$ done

mogrify -path resized -resize 500x500\> -background 'rgb(217,215,202)' -extent 500x500 -gravity center *.jpg

mogrify -path resized -resize 500>x500\> *.jpg

Yes, you have to use mogrify and not convert because only mogrify excepts the -path command. And I’m pretty sure it’s important to escape the greater than symbols in the -path argument like I did.