Keskustelu: Nettisivujen teko: PHP: Suorakulmio diveillä

Eli tein koodinpätkää jonka tarkoitus olisi tehdä 1x1 kokooisista mustan värisistä diveistä 114*57 kokoinen laatikko josta lähden soveltamaan isometristä neliötä.
Ongelmana on se, että mitä pidemmälle mennään sitä isommaksi välimatkat kasvavat.

ELi jos sen pitäisi olla näin:
_________________
Se onkin
(x vastaa väliä=
_x_xx_xxx_xxxx_xxxxx_xxxxxx_xxxxxxx_xxxxxxx_xxxx­xxxx_xxxxxxxxx_ jne.

Tässä koodi:

<?php
	//114
	//57
	$resoluutio=114*57;
	$top=0;
	$left=0;
	for($i=0;$i<$resoluutio+1;$i++){

		echo '<div style="
		position:absolute;
		background-color:black;
		width:1px;
		height:1px;

		left:'.$left.';
		top:'.$top.';">';

		$left++;

		if($left>114){
			$left=0;
			$top++;
		}
	}

?>

Piirtovirhe johtuu siitä, että et lainkaan sulje div-elementtejä. Laita lopettava div-tagi heti aloittavan perään, niin ongelma korjaantuu. Lisäksi muuta ehdoksi ($left>=114), jotta vaakariveistä tulee oikean pituisia.

Tämä div-toteutus on kyllä aika raskaan tuntuinen, olisikohan nopeampaa käyttää jotain muita elementtejä (esim. taulukkoa?).

No mulla on php:lla toteutettu isometrinen "kartta", ongelmana vain on se, että en saa mitenkään isometristä elementtiä "kosketusalaksi" siihen ruutuun.

Tuossa tapauksessa kannattaa käyttää map- ja areatageja, joilla voi määrittää linkkialueen koordinaattien avulla.

<img src ="kuva.png"
usemap ="#kuva" />

<map id ="kuva"
name="kuva">
  <area shape ="poly" coords ="32,0, 64,16, 32,32, 0,16"
  href ="index.html" />

</map>

http://koti.mbnet.fi/winuus/imagemap.php

Toinen vaihtoehto (tarkoituksesta riippuen) on tuo, jonka avulla T.M. on toteuttanut muokkaustoiminnon. Formilla oleva image-tyyppinen kenttä nimeltä "kuva" lähettäisi siis PHP-skriptille muuttujat kuva_x ja kuva_y (_GET- tai _POST-tauluun toteutuksen mukaan).

Taas pikku ongelma.
Tein ton TM:n antamalta sivulta sen koodin, ja lisäsin sen siihen mun isometriseen kartaan jokaiseen ruutuun.
Nyt on ongelmana se, että koska isometristen ruutujen läpinäkyvä osa leikkaa toisiaan jolloin se läpinäkyvä osa peittää puolet ruudusta, eikä siitä kohtaa imagemap toimi.

Voitko näyttää sen isometrisen kartan, niin ongelman ymmärtää paremmin?

http://84.248.222.106/riski/start.php <- tuossa on se kartta
http://84.248.222.106/riski/start.phps <- Lähdekoodi

sitten kuten huomaatte, tossa on myös se ongelma, että kun laittaa hiiren tollasen ruudun päälle, niin punainen rinkula tuleekin ensimmäiseen ruutuun aina.
tuo laittaa myös ruutuja päällekkäin, en tiedä mistä se johtuu (sen takia teiden viivat on kummallisia)

Kaikilla mapeillasi on sama nimi. Numeroi ne samalla kaavalla kuin muutkin osat.

Noniin, nyt oikea ruutu tulee punaiseksi mutta ongelmina vielä päällekäisyys ja se että puolet ruudusta on "käyttökelvoton" koska alempien kahden ruudun transparent alue peittää sen.

EDIT: Ei se teekkään päällekkäisiä ruutuja, sinne jää vaan tyhjää tilaa väliin :D

Eli ongelmana onkin se käyttökelvoton tila ja se että sinne jää aina välillä yhden pikselin rakoja

Pikselin kokoiset raot johtuvat luultavasti epätarkkuuksista koordinaateissa. Päällekkäisten alueiden ongelmaan en tiedä ratkaisua: vaikka kuvat piirtäisi missä järjestyksessä, aina jokin jää toisen alle.

Yksi ratkaisu olisi näyttää koko kartta yhtenä suurena kuvana, jolloin napsautuskohtien kanssa ei tulisi hankaluuksia. Tällöin kartta muodostettaisiin PHP:llä esim. GD-kirjaston avulla. Tässä ongelmana voi olla kuvatiedoston suuri koko.

PHP ja JavaScript eivät välttämättä ole paras valinta tällaisen järjestelmän toteutukseen. Nykyisenkin version IE ja Opera näyttävät hieman virheellisesti (talot ovat maan sisässä ja ruudut katoilevat hiiren liikkuessa).

Kuulostaa ihan että Flashiä tarvittaisiin tässä hommassa.