Witam jak najlepiej generować układ divów pod mapę
wrzucam mój kod html z układem divów
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="imagetoolbar" content="no" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <div id="map_container" style="overflow: visible;"> <div style="position: absolute; width: 265px; height: 190px;"> <div class="map_border" style="z-index: 3; position: absolute; width: 1px; height: 190px; left: 0px; top: 0px;"></div> <div class="map_border" style="z-index: 3; position: absolute; width: 265px; height: 1px; left: 0px; top: 0px;"></div> <img style="position: absolute; z-index: 2; left: 0px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 38px;" src="img/v4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 152px;" src="img/gras4.png"> <div style="position: absolute; width: 265px; height: 190px; left:273px;"> <div class="map_border" style="z-index: 3; position: absolute; width: 1px; height: 190px; left: 0px; top: 0px;"></div> <div class="map_border" style="z-index: 3; position: absolute; width: 265px; height: 1px; left: 0px; top: 0px;"></div> <img style="position: absolute; z-index: 2; left: 0px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 0px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 53px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 106px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 38px;" src="img/v4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 159px; top: 152px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 0px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 38px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 76px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 114px;" src="img/gras4.png"> <img style="position: absolute; z-index: 2; left: 212px; top: 152px;" src="img/gras4.png">
stworzenie mapy składającej się z tysięcy takich prostokątów zajmie dużo czasu i plik będzie strasznie wielki
[PHP]generowanie mapy z divami i zdjęciami
