Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP]generowanie mapy z divami i zdjęciami
Forum PHP.pl > Forum > Przedszkole
ghastblood
7.05.2011, 10:18:35
Witam jak najlepiej generować układ divów pod mapę

wrzucam mój kod html z układem divów


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. 	<meta http-equiv="imagetoolbar" content="no" />
  6. 	<title>Mapa</title>
  7. 	<link rel="stylesheet" type="text/css" href="styles.css" />
  8. </head>
  9. <body>
  10. <div id="map_container" style="overflow: visible;">
  11. 	<div style="position: absolute; width: 265px; height: 190px;">
  12. 		<div class="map_border" style="z-index: 3; position: absolute; width: 1px; height: 190px; left: 0px; top: 0px;"></div>
  13. 		<div class="map_border" style="z-index: 3; position: absolute; width: 265px; height: 1px; left: 0px; top: 0px;"></div>
  14. 		<img style="position: absolute; z-index: 2; left: 0px; top: 0px;" src="img/gras4.png">
  15. 		<img style="position: absolute; z-index: 2; left: 0px; top: 38px;" src="img/gras4.png">
  16. 		<img style="position: absolute; z-index: 2; left: 0px; top: 76px;" src="img/gras4.png">
  17. 		<img style="position: absolute; z-index: 2; left: 0px; top: 114px;" src="img/gras4.png">
  18. 		<img style="position: absolute; z-index: 2; left: 0px; top: 152px;" src="img/gras4.png">
  19. 		<img style="position: absolute; z-index: 2; left: 53px; top: 0px;" src="img/gras4.png">
  20. 		<img style="position: absolute; z-index: 2; left: 53px; top: 38px;" src="img/gras4.png">
  21. 		<img style="position: absolute; z-index: 2; left: 53px; top: 76px;" src="img/gras4.png">
  22. 		<img style="position: absolute; z-index: 2; left: 53px; top: 114px;" src="img/gras4.png">
  23. 		<img style="position: absolute; z-index: 2; left: 53px; top: 152px;" src="img/gras4.png">
  24. 		<img style="position: absolute; z-index: 2; left: 106px; top: 0px;" src="img/gras4.png">
  25. 		<img style="position: absolute; z-index: 2; left: 106px; top: 38px;" src="img/gras4.png">
  26. 		<img style="position: absolute; z-index: 2; left: 106px; top: 76px;" src="img/gras4.png">
  27. 		<img style="position: absolute; z-index: 2; left: 106px; top: 114px;" src="img/gras4.png">
  28. 		<img style="position: absolute; z-index: 2; left: 106px; top: 152px;" src="img/gras4.png">
  29. 		<img style="position: absolute; z-index: 2; left: 159px; top: 0px;" src="img/gras4.png">
  30. 		<img style="position: absolute; z-index: 2; left: 159px; top: 38px;" src="img/v4.png">
  31. 		<img style="position: absolute; z-index: 2; left: 159px; top: 76px;" src="img/gras4.png">
  32. 		<img style="position: absolute; z-index: 2; left: 159px; top: 114px;" src="img/gras4.png">
  33. 		<img style="position: absolute; z-index: 2; left: 159px; top: 152px;" src="img/gras4.png">
  34. 		<img style="position: absolute; z-index: 2; left: 212px; top: 0px;" src="img/gras4.png">
  35. 		<img style="position: absolute; z-index: 2; left: 212px; top: 38px;" src="img/gras4.png">
  36. 		<img style="position: absolute; z-index: 2; left: 212px; top: 76px;" src="img/gras4.png">
  37. 		<img style="position: absolute; z-index: 2; left: 212px; top: 114px;" src="img/gras4.png">
  38. 		<img style="position: absolute; z-index: 2; left: 212px; top: 152px;" src="img/gras4.png">
  39. 	</div>
  40. 	<div style="position: absolute; width: 265px; height: 190px; left:273px;">
  41. 		<div class="map_border" style="z-index: 3; position: absolute; width: 1px; height: 190px; left: 0px; top: 0px;"></div>
  42. 		<div class="map_border" style="z-index: 3; position: absolute; width: 265px; height: 1px; left: 0px; top: 0px;"></div>
  43. 		<img style="position: absolute; z-index: 2; left: 0px; top: 0px;" src="img/gras4.png">
  44. 		<img style="position: absolute; z-index: 2; left: 0px; top: 38px;" src="img/gras4.png">
  45. 		<img style="position: absolute; z-index: 2; left: 0px; top: 76px;" src="img/gras4.png">
  46. 		<img style="position: absolute; z-index: 2; left: 0px; top: 114px;" src="img/gras4.png">
  47. 		<img style="position: absolute; z-index: 2; left: 0px; top: 152px;" src="img/gras4.png">
  48. 		<img style="position: absolute; z-index: 2; left: 53px; top: 0px;" src="img/gras4.png">
  49. 		<img style="position: absolute; z-index: 2; left: 53px; top: 38px;" src="img/gras4.png">
  50. 		<img style="position: absolute; z-index: 2; left: 53px; top: 76px;" src="img/gras4.png">
  51. 		<img style="position: absolute; z-index: 2; left: 53px; top: 114px;" src="img/gras4.png">
  52. 		<img style="position: absolute; z-index: 2; left: 53px; top: 152px;" src="img/gras4.png">
  53. 		<img style="position: absolute; z-index: 2; left: 106px; top: 0px;" src="img/gras4.png">
  54. 		<img style="position: absolute; z-index: 2; left: 106px; top: 38px;" src="img/gras4.png">
  55. 		<img style="position: absolute; z-index: 2; left: 106px; top: 76px;" src="img/gras4.png">
  56. 		<img style="position: absolute; z-index: 2; left: 106px; top: 114px;" src="img/gras4.png">
  57. 		<img style="position: absolute; z-index: 2; left: 106px; top: 152px;" src="img/gras4.png">
  58. 		<img style="position: absolute; z-index: 2; left: 159px; top: 0px;" src="img/gras4.png">
  59. 		<img style="position: absolute; z-index: 2; left: 159px; top: 38px;" src="img/v4.png">
  60. 		<img style="position: absolute; z-index: 2; left: 159px; top: 76px;" src="img/gras4.png">
  61. 		<img style="position: absolute; z-index: 2; left: 159px; top: 114px;" src="img/gras4.png">
  62. 		<img style="position: absolute; z-index: 2; left: 159px; top: 152px;" src="img/gras4.png">
  63. 		<img style="position: absolute; z-index: 2; left: 212px; top: 0px;" src="img/gras4.png">
  64. 		<img style="position: absolute; z-index: 2; left: 212px; top: 38px;" src="img/gras4.png">
  65. 		<img style="position: absolute; z-index: 2; left: 212px; top: 76px;" src="img/gras4.png">
  66. 		<img style="position: absolute; z-index: 2; left: 212px; top: 114px;" src="img/gras4.png">
  67. 		<img style="position: absolute; z-index: 2; left: 212px; top: 152px;" src="img/gras4.png">
  68. 	</div>
  69.  
  70. </div>
  71. </body>
  72. </html>
[HTML] pobierz, plaintext


stworzenie mapy składającej się z tysięcy takich prostokątów zajmie dużo czasu i plik będzie strasznie wielki
ixpack
7.05.2011, 10:30:22
Ok. Nie znam się. Ale dzięki pewnej dyskusji natrafiłem na blog #luq'a O Ten, w którym pisze o swoich przemyśleniach etc. na temat mapy... Może się przyda.

Ps. nie klikaj "pomógł" - bo to nie moje ;0
ghastblood
7.05.2011, 13:50:37
nie wiem czy to jest akurat to bo konstrukcyjnie przypomina to mapę do gry rpg w 2d gdzie wielkość mapy jest ograniczona w tym przypadku muszę tworzyć obiekty na osi współrzędnych x,y

może jakieś inne sugestie ?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.