Question

For an project I need to as efficiently as possible make a world map out of little square divs of approximately 20x20px.

However because I need the div sizes to scale with the browser I am currently using div’s with a width of 1% and height of 2%, which on a 16:10 screen looks roughly square.

I have a div called “world” filled with lots of little divs like:

<div id="world1" onclick="">&nbsp;</div>

each of these divs is paired with css as follows:

#world1 {
    background: url(/images/1.png) 0 0 no-repeat;
    float: left;
    width: 1%;
    height: 2%;
    position: absolute;
    top: 79%;
    left: 91%;
    z-index: -1;
    margin-top: -10px;
    margin-left: -10px;
}

#world1:hover {
    background-position: 0 -20px;
    cursor: pointer;
}

I figured that the easiest way to make the map is to generate the code for the divs and corresponding css so that divs with names “world1” through to “world20000” are placed at positions ranging from

top:1%;
left: 1%;

to

top:100%;
left: 100%;

and then I would go through by hand and delete divs covering the oceans on my map to create a world map.

How can I generate all this code, or better still is there an easier way to do this, because my solution certainly is not elegant or efficient.

Also does anyone have a more elegant solution for keeping the div’s square in all browser sizes and just scaling the squares with the browser window?

Answer 1

A few lines in Perl will do the dirty job for you.

I figured that the easiest way to make the map is to generate the code
for the divs and corresponding css so that divs with names “world1”
through to “world20000” are placed at positions ranging from…

It would be easier if you do not place it in absolute positions, but used float:left, added as many squares you want to fill an entire row, and later use clear:left to jump to another row. Not more than 20 line in Perl.