Comments on: Pure CSS Rollover Map Demo – England Regions http://www.consil.co.uk/blog/2009/04/07/pure-css-rollover-map-demo/ Tue, 10 May 2011 09:14:14 +0000 hourly 1 http://wordpress.org/?v=3.3 By: Jason http://www.consil.co.uk/blog/2009/04/07/pure-css-rollover-map-demo/#comment-30 Jason Sun, 21 Nov 2010 20:32:05 +0000 http://www.consil.co.uk/blog/?p=358#comment-30 Mitch - I won't have time to write a tutorial for a few weeks at least, but there are a few clues if you take a look at the image that is used to display the map: http://www.consil.co.uk/blog/wp-content/uploads/2009/04/uk_regions_rollovers_pics.png In short, this is how it works: 1. All required pictures are put into one big image with a transparent background. 2. Displaying any part of the image involves positioning a block where we want the image to be seen, setting it to the size of the bit of the image we want it to display, then setting the block's background to display the main image. The trick is to move the background image using negative positioning so that the block acts like a window onto a rectangle of the main image. 3. The overall map is one block, and each rollover area are individual blocks. All blocks are given the same background image, but the CSS hover selector is used to move the background image into view. That's it really. The difficult part is knowing what positions to set everything to. The way I did that was to chop the image up in Inkscape using a pixel-based grid. I could then read off the pixel positions and sizes of each part of the image and plug them into the CSS stylesheets. Think about the mechanism this way: it is constructed entirely of rectangle blocks positioned and sized absolutely within an overall rectangle block. A background image can be given to each block and that image can be slid up and down to display the bit we want that block to show. The CSS :hover pseudo-class is them used to do the shifting of that image. It would be nice to be able to automate the creation of the whole thing, and I believe that Adobe Illustrator *does* do this now, and with polygonal rather than rectangle shapes, but that product is out of reach of many people. It does, however, involve messing around with tables of pixels in a spreadsheet at the moment. In theory the pixels can all be extracted from an image file (saved in SVG format) but that would involve a lot of work to put together. Well, diagrams will certainly help to explain that a lot better, but I hope that overview helps to understand enough to maybe try it out for yourself. You can save this page and play around with the stylesheet yourself to see how it works. Mitch – I won’t have time to write a tutorial for a few weeks at least, but there are a few clues if you take a look at the image that is used to display the map:

http://www.consil.co.uk/blog/wp-content/uploads/2009/04/uk_regions_rollovers_pics.png

In short, this is how it works:

1. All required pictures are put into one big image with a transparent background.

2. Displaying any part of the image involves positioning a block where we want the image to be seen, setting it to the size of the bit of the image we want it to display, then setting the block’s background to display the main image. The trick is to move the background image using negative positioning so that the block acts like a window onto a rectangle of the main image.

3. The overall map is one block, and each rollover area are individual blocks. All blocks are given the same background image, but the CSS hover selector is used to move the background image into view.

That’s it really. The difficult part is knowing what positions to set everything to. The way I did that was to chop the image up in Inkscape using a pixel-based grid. I could then read off the pixel positions and sizes of each part of the image and plug them into the CSS stylesheets.

Think about the mechanism this way: it is constructed entirely of rectangle blocks positioned and sized absolutely within an overall rectangle block. A background image can be given to each block and that image can be slid up and down to display the bit we want that block to show. The CSS :hover pseudo-class is them used to do the shifting of that image.

It would be nice to be able to automate the creation of the whole thing, and I believe that Adobe Illustrator *does* do this now, and with polygonal rather than rectangle shapes, but that product is out of reach of many people. It does, however, involve messing around with tables of pixels in a spreadsheet at the moment. In theory the pixels can all be extracted from an image file (saved in SVG format) but that would involve a lot of work to put together.

Well, diagrams will certainly help to explain that a lot better, but I hope that overview helps to understand enough to maybe try it out for yourself.

You can save this page and play around with the stylesheet yourself to see how it works.

]]> By: Mitch http://www.consil.co.uk/blog/2009/04/07/pure-css-rollover-map-demo/#comment-29 Mitch Sun, 21 Nov 2010 20:13:30 +0000 http://www.consil.co.uk/blog/?p=358#comment-29 These maps are great! Any chance you have a tutorial or something for a novice like me? Can't seem to find any solution (jquery or css) that actually provides instructions. It's like everyone assumes everyone else knows how to do all this. Thanks! These maps are great! Any chance you have a tutorial or something for a novice like me? Can’t seem to find any solution (jquery or css) that actually provides instructions. It’s like everyone assumes everyone else knows how to do all this.

Thanks!

]]>