An interesting gallery

So we've all seen ASCII art and probably played around with one of the online generators. A good one I found is http://www.text-image.com/convert which gives the results in HTML format so you can copy and paste the source. Wouldn't it be cool it have an image that as you rolled over every pixel it jumped out to give a preview of another image? I think so!

Although the outputted results are all in tags, a little find and replace will let you make them into divs, or 'a' tags which you can then style to give the effect you wish. This method means you needn't use the text to create your image, you can style your divs to mean the colour of the text is the background of a 1 pixel div.

for example:
my outputted result from text-image.com looks like this (but longer)

00
10101011101101001101110001110000001010011000111010001001000111111000101110011000101110110111101010110111111000

messy.

So let's find and replace ' '
replace '>1' with ' "> '

this just closes our style tag

then replace '' with ''

wrap all those new divs in a '

and close it at the end and add the style

.gallery-image a {width:1px; height:1px; overflow:hidden; margin:0; padding:0; display:block}

Also, where the text was broken into lines with
tags, we now need to clear:left to get to the next line, so we find and replace
s with

All this, alas, is making for a large file. Ideally, we want the source image to only contain a limited number of colours so that we can apply the same style to each pixel/div of the same colour.

If you make your image into a gif before you start you can select how many colours you want, this in turn will give you the number of colour styles you need to create your image. Another craftily phrased find and replace can swap your 0 for or something similar.

So, while I'd love to post my example HTM now, I've still got to do some work on it (since typing this before actually finishing one myself. The next stage is the pop up pixel on rollover, which is simply an a:hover style that increases the size of the pixel and gives it a different background image, but I'll do that once I've sorted my own example.

Hope that's of some inspiration.

Bear in mind, www.text-image.com/converter isn't the only one that'll do this, there're loads if you simply google "ASCII art HTML image converter", it's just that you'll have to find and replace slightly differently depending on the outputted code. You could even make one from scratch, and I'll give a hats-off to you if you have the time and patience for that!

Right, I'm off shopping in the real world now - later!