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:
<div id="tr">
<a href="#">
<span class="p1"></span>
<span class="p2"></span>
<span class="img"></span>
</a>
</div>
#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.
RSS feed
Comments