Ik probeer een soort van spelletje te maken, maar daarvoor heb ik een plattegrond met gebouwtjes erop nodig. Ik kende een site waar dat zat, dus daar keek ik een beetje in de bron. Het blijkt dat ze dat met MAP, AREA en IMG doen. Alleen krijg ik het niet voor elkaar. Ik krijg wel een plaatje en een area gepositioneerd enzo, maar dan komt het plaatje voor de area te staan, waardoor de area niet meer klikbaar is. Maar als ik het plaatje weghaal of een eindje opschuif kun je wel gewoon op die area klikken...

Weet iemand hoe dit werkt?

Ik heb nu dit:

<DIV STYLE="position:absolute; z-index:2;"><IMG SRC="files/knop_geel.gif" STYLE="position:absolute; width: 61px; height: 61px; left: 100px; top: 100px; z-index:6;">
<MAP NAME="plattegrond">
<AREA ALT="Gebouw" COORDS="130,130,29" HREF="index.php" SHAPE="circle" STYLE="z-index: 3;">
</MAP></DIV>
<IMG SRC="files/map.gif" USEMAP="#plattegrond" BORDER="0">


Zie hier het resultaat...

Tot vandaag kende ik die hele functie van HTML nog niet, dus ik weet niet of jullie er ervaring mee hebben, maar ik hoop van wel!
Nee, want bij dat plaatje wat daar staat hebben ze het ook met MAP en AREA gedaan, en daar zijn alle gebouwtjes losse plaatjes op een achtergrond. Dit is een stukje van hun bron (of mag ik dat niet plaatsen?)

<div style="position:absolute; width:440px; height:40px; z-index:2; left:156px; top:138px;"><h1>Noob city</h1></div><img class="d1" src="img/nl/g/iso.gif" width="75" height="100"><img class="d2" src="img/nl/g/iso.gif" width="75" height="100"><img class="d3" src="img/nl/g/iso.gif" width="75" height="100"><img class="d4" src="img/nl/g/iso.gif" width="75" height="100"><img class="d5" src="img/nl/g/iso.gif" width="75" height="100"><img class="d6" src="img/nl/g/iso.gif" width="75" height="100"><img class="d7" src="img/nl/g/iso.gif" width="75" height="100"><img class="d8" src="img/nl/g/g15.gif" width="75" height="75"><img class="d9" src="img/nl/g/g18.gif" width="75" height="75"><img class="d10" src="img/nl/g/g10.gif" width="75" height="75"><img class="d11" src="img/nl/g/g11.gif" width="75" height="75"><img class="d12" src="img/nl/g/iso.gif" width="75" height="100"><img class="d13" src="img/nl/g/iso.gif" width="75" height="100"><img class="d14" src="img/nl/g/iso.gif" width="75" height="100"><img class="d15" src="img/nl/g/g23.gif" width="75" height="75"><img class="d16" src="img/nl/g/iso.gif" width="75" height="100"><img class="d17" src="img/nl/g/iso.gif" width="75" height="100"><img class="d18" src="img/nl/g/iso.gif" width="75" height="100"><img class="d19" src="img/nl/g/iso.gif" width="75" height="100"><img class="d20" src="img/nl/g/iso.gif" width="75" height="100">
<div class="d2_x d2_11"><img usemap="#map2" src="img/nl/a/x.gif" width="540" height="450" border="0"></div>

<map name="map2">
<area href="build.php?id=40" title="Muur Niveau 1" coords="325,225,180" shape="circle">
<area href="build.php?id=40" title="Muur Niveau 1" coords="220,230,185" shape="circle">
</map>

<map name="map1">
<area href="build.php?id=39" title="Verzamelpunt" coords="270,158,303,135,316,155,318,178,304,211,288,227,263,238,250,215" shape="poly">0<area href="build.php?id=19" title="Bouwplaats" coords="47,89,85,69,121,89,85,110" shape="poly"><area href="build.php?id=20" title="Bouwplaats" coords="132,64,170,44,206,64,170,85" shape="poly"><area href="build.php?id=21" title="Bouwplaats" coords="192,54,230,34,266,54,230,75" shape="poly"><area href="build.php?id=22" title="Bouwplaats" coords="267,69,305,49,341,69,305,90" shape="poly"><area href="build.php?id=23" title="Bouwplaats" coords="327,117,365,97,401,117,365,138" shape="poly"><area href="build.php?id=24" title="Bouwplaats" coords="14,129,52,109,88,129,52,150" shape="poly"><area href="build.php?id=25" title="Bouwplaats" coords="97,137,135,117,171,137,135,158" shape="poly"><area href="build.php?id=26" title="Hoofdgebouw Niveau 3" coords="182,119,182,65,257,65,257,119,220,140" shape="poly"><area href="build.php?id=27" title="Ambassade Niveau 1" coords="337,156,337,102,412,102,412,156,375,177" shape="poly"><area href="build.php?id=28" title="Pakhuis Niveau 1" coords="0,199,0,145,75,145,75,199,38,220" shape="poly"><area href="build.php?id=29" title="Graansilo Niveau 1" coords="127,164,127,110,202,110,202,164,165,185" shape="poly"><area href="build.php?id=30" title="Bouwplaats" coords="92,189,130,169,166,189,130,210" shape="poly"><area href="build.php?id=31" title="Bouwplaats" coords="345,196,383,176,419,196,383,217" shape="poly"><area href="build.php?id=32" title="Bouwplaats" coords="17,238,55,218,91,238,55,259" shape="poly"><area href="build.php?id=33" title="Schuilplaats Niveau 1" coords="162,232,162,178,237,178,237,232,200,253" shape="poly"><area href="build.php?id=34" title="Bouwplaats" coords="289,251,327,231,363,251,327,272" shape="poly"><area href="build.php?id=35" title="Bouwplaats" coords="92,274,130,254,166,274,130,295" shape="poly"><area href="build.php?id=36" title="Bouwplaats" coords="222,284,260,264,296,284,260,305" shape="poly"><area href="build.php?id=37" title="Bouwplaats" coords="77,307,115,287,151,307,115,328" shape="poly"><area href="build.php?id=38" title="Bouwplaats" coords="199,316,237,296,273,316,237,337" shape="poly">
<area href="build.php?id=40" title="Muur Niveau 1" coords="312,338,347,338,377,320,406,288,421,262,421,222,396,275,360,311" shape="poly">
<area href="build.php?id=40" title="Muur Niveau 1" coords="49,338,0,274,0,240,33,286,88,338" shape="poly">
<area href="build.php?id=40" title="Muur Niveau 1" coords="0,144,34,88,93,39,181,15,252,15,305,31,358,63,402,106,421,151,421,93,378,47,280,0,175,0,78,28,0,92" shape="poly">
</map>
Nee, zo bedoel ik niet. Ik bedoel dat je dit hebt:



En dat je daar dan dit soort dingen op gaat zetten:





Dus niet dat je één plaatje hebt waar een paar gebouwen op staan, maar dat je één plaatje hebt waar je in de browser gewoon een paar huizen overheen plakt.
Ooooooooh...

Ik zou gewoon een div met achtergrond dat eiland, ik in die div die huisjes plaatsen. Ookal zal je dan met inline styles moeten werken denk ik.

Een andere oplossing is GD gebruiken, maar ik heb geen idee hoe :)
Ik heb nu alles in een tabel gedumpt. In de database heb ik voor elk vakje een kolom met de naam van het plaatje dat hij moet laden. Dan verander ik in de DB gewoon de inhoud van die kolom en dan komt er een ander plaatje. Bedankt voor de ideeën!

Reageren