One Tweet leads to an improved infographic

Although I was delighted with the infographic I ended up with in the last post, I knew it could be improved. If only I could figure out how to use just a single .gif, sliding the overlay elements into view as the finger or mouse hovered over them.

If you've not read the post, I used over 20 separate transparent .gif files, laying each one over the top of the background image in response to the mouse/finger hover position.

My CSS skills (or lack of them) meant I was spending days wrestling with the single .gif problem. And the work I'd already done was doing a good job anyway. The total size of all the files involved was about 180k and I figured I'd be unlikely to save more than a third of that. But, the elegance of a two-file solution (HTML/CSS in one, all the images in the other) appealed to the erstwhile programmer in me.

At the point of giving up, I thought I'd throw out a plea for a CSS wizard and, blow me down, one Ben Summers responded. I'd written a piece about his Information Systems company, OneIS, in 2008.

I explained pretty much what I said in the previous post and within the hour, he sent me an email outlining how he would tackle the problem. He broke the log jam. I'd already prepared the new graphic in anticipation, slightly jazzing up the images as I went along, so all that was left was to replace bits of my code with bits of Ben's and insert the coordinates of the various bits of the new image.

This is a shrunken version of the new image with a ghastly yellow to show up the transparent areas:

The layout looks a bit peculiar because each overlay element needed to occupy its own rectangular area.

Ben's CSS used the z-index attribute to make sure that the hover layer was nearest the user, the overlay layer was next and the background layer (taken from the top part of the gif) was at the bottom. In my fumbled attempts to achieve a result, I got the hover and overlay layers the wrong way round, which meant that the hotspots were often hidden by the overlay element. Ben's code did it right, of course.

The hover layer was the bit that was giving me the most grief because I wanted to associate multiple hover areas with one overlay element. Here's the blended Ben/David answer for the transition element (the loopy thing about halfway down the image on the right):

#tr  .p1  {left:168px; top:301px; width:74px; height:70px; }
#tr  .p2  {left:243px; top:330px; width:46px; height:35px; }
#diagram #tr a:hover span.img
{
  left: 172px; top: 307px;
  width: 407px; height: 124px;
  background-position: -553px -1222px;
}

The first two lines define the hotspots and the third determines the hover action which is to display the overlay element defined in the lower curly braces. The first two lines in these braces determine where the overlay should be placed and the third shows where it can be found in the .gif image.

The HTML part for this same element looks like this:

 

   
       
       
       
   
 

#tr stands for the transition element. The 'a href=' anchor goes nowhere on click (but it could take you off somewhere else). The first two spans deal with the hotspots while the third slides the overlay in between the hotspot layer and the background.

If you want to explore the CSS/HTML and .gif in detail, they're at http://www.tebbo.com/howtohandlethemedia/index.html  and  http://www.tebbo.com/howtohandlethemedia/newarch.gif

Of course, it didn't end there. I offered to give Ben a hand with something he's doing. And, who knows, that may end up the subject of another blog.

Cheers Ben. Cheers Twitter. And good luck to you if you plan to go down the interactive infographics route. I've quite got the taste for it and I'm already planning my next one.

Under the covers of a hand-crafted interactive infographic

In my last blog, I said I’d share the experience of creating an interactive infographic which needed only CSS/HTML and some .gif image files. I used mainly low cost or free PC software.

Two bits took up a lot of time. One was figuring out how to deal with nested (and curved) shapes. The other was capturing all the coordinates for the hotspots. As I mentioned to a pal this morning, “It was mind-bending stuff. A bit like cleaning the windows of a skyscraper with a sponge and a bucket while learning to abseil.” Not one of my most eloquent analogies, perhaps, but it was off the cuff.

The start point was an image of the basic architecture for handling the media plus a header line. The image is quite old, but I’m pretty sure I created it using the GIMP. I typed the elements of the header line into Word, then took a screen shot, pasted it into IrfanView, cut out the bit I wanted and dropped it into the GIMP. This was the base, or background, image for all that followed.

I thought about tarting up the architecture illustration – making the lines three-dimensional, for example, but it was beyond my competence. Having said that, the interactive infographic is intended to mirror my business card and the ‘greybeards’ slide deck. (That’s my post-hoc justification, anyway.)

So, to the task at hand:

I used CSS to recognise and display the three layers: background image, hotspots and replacement image. I’d done it before, but in different ways. (I Googled ‘CSS HTML hover hotspot map’ or similar and found the interesting work of Stu Nicholls.) I liked his idea of redefining the <i> element in CSS to display each replacement image.

If you want to see the actual code, just ‘view source’ of the web page. The CSS and the HTML are all in there together. (You’ll notice some ‘z-index’ references: these determine the stack level of each element: cursor, hotspot, replacement image and background image. The higher the number, the nearer the user.)

I used the GIMP to create separate .gif files for the background and each of the replacement images. I felt it was cheating (compared with other image-switching work I’ve done before where I kept all the elements in a single file and shuffled them around, such as the grid here and the photo here.) Doing it with separate files was fairly quick and straightforward and the files are tiny – less than 50k each.

UPDATE 27 JULY: They’re over five times tinier now. Only the changes to the background image are stored in transparent .gif files.

I created the text boxes and drop shadows in PowerPoint for speed. I scaled the presentation pages to match the iPad-sized ‘architecture’ graphic, then took screen shots of eight boxes at a time and pasted them into IrfanView.

From there I cut and pasted each box in turn into the appropriate GIMP image. (Each lives in its own layer and they can be selectively merged, so they all start off transparent, apart from the background which shows through the whole lot.) Because the cut images were rectangular and the text boxes had curved corners, I had to use the GIMP’s tools to effect a repair when the underlying graphics were obliterated.

To create each .gif, I saved the visible image (the highlighted area and text box on a transparent background with the base, or background, image showing through).

The HTML simply bolted together the hotspots for each image. I used the TextPad text editor for the HTML and the CSS (which I embedded in the HTML header) so it’s all just one file.

The hotspots could only be determined in rectangles, which was okay for the triangles side but a nightmare for the circles side. (I admit I did try to figure out if I could nest HTML’s ‘circle’, ‘rectangle’ and ‘polygon’ image maps to achieve the desired effects – a long story, but I gave up.) The hotspots also needed to be ‘finger aware’ for iPad users, so I made some of them bigger than the underlying image element.

I worked out the hotspot coordinates by cursoring over the GIMP image and taking the top/left height/width readings. To keep myself on track, I temporarily gave the hotspots a light grey background colour and used TextPad’s ‘View/In Web Browser’ option to check progress.

Elegant it is not. But it works well enough.

And that, my friends, is it. No JavaScript, no Flash, no dependencies on anything except an HTML file (with embedded CSS) and a deck of .gif images.