html - About replicating/generating a lot of div css -
for project need as efficiently possible make world map out of little square divs of approximately 20x20px.
however because need div sizes scale browser using div's width of 1% , height of 2%, on 16:10 screen looks square.
i have div called "world" filled lots of little divs like:
<div id="world1" onclick=""> </div>
each of these divs paired css 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 easiest way make map generate code divs , corresponding css divs names "world1" through "world20000" placed @ positions ranging
top:1%; left: 1%;
to
top:100%; left: 100%;
and go through hand , delete divs covering oceans on map create world map.
how can generate code, or better still there easier way this, because solution not elegant or efficient.
also have more elegant solution keeping div's square in browser sizes , scaling squares browser window?
a few lines in perl dirty job you.
i figured easiest way make map generate code divs , corresponding css divs names "world1" through "world20000" placed @ positions ranging from...
it easier if not place in absolute
positions, used float:left
, added many squares want fill entire row, , later use clear:left
jump row. not more 20 line in perl.
Comments
Post a Comment