Place grid over map using CSS?

Question

I have a world map image. I would like to place a SQUARE GRID over the entire map. I would like each square (cell grid) to change via mouseover with a border color change and background color change.

The grid needs to be layered over the map, transparent except the borders (which is the grid).

Can I achieve this using CSS or there a better way to do this?

Many thanks.

Erik

Answer 1

I'd suggest using a CSS grid framework as an easy way to produce the grid layout. I'd go for this one as you can easily use create a grid with 0px gutters.

You will need to modify the CSS to make the grid absolute positioned so it sits over the top of your map.

Each element in the grid is a DIV so you can easily attach Javascript events to each one to allow users to control the map. If it's a simple colour change on hover then just use css.

You can make the grid transparent using css too: http://css-tricks.com/css-transparency-settings-for-all-broswers/