Mappa "interattiva" di isole per browsergame

[Malware]

Ciao a tutti

Caldo anche da voi?


Sto cercando il modo ottimale per creare una mappa in javascript, contenente delle isole, posizionate secondo un x e un y.
La mappa sarà dentro un div, e la si potrà spostare in alto, destra, sinistra e in basso trascinandola.

Il posizionamento delle isole so come posso farlo, ma non ho idea di come rendere il tutto movibile.
Un'esempio in modo da capir meglio? Iscrivetevi a ikariam.it e cliccate su MAPPA.
Lì c'è un'esempio completo.


I dati delle isole li prendo dalla tabella "isole" così composta:

ID----X----Y----NOME----Posto1----Posto2----...Posto15----Posto 16
1-----1----1----Isolotta--1---------24---------...12---------34------

Quello che interessa è la coordinata X e Y.
Un'ulteriore esempio lo potete vedere in questo video.
http://www.youtube.com/watch?v=A6A8Uz8NFIs

Poi cliccando su un'isola si apre una pagina...ma questa è già fatta.

Non voglio la pappa pronta, ma almeno degli spunti da cui partire.
grazie

 

[criric]

Ne sparo una in jquery
è solo una bozza di idea

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">            
    $(document).ready(function(){
        $('#map').draggable();
    });
</script>
<style>
    #cornice {
        margin:auto;
        width:500px;
        height:500px;
        overflow: hidden;
        cursor:move;
    }
</style>
<div id="cornice">
    <div id="map">
        <img src="../img/immagine.jpg" alt="map"/>
    </div>
</div>

ovviamente l'immagine dovra essere piu grande del div che la contiene

 

[Malware]

Ciao e grazie per la risposta

Ho provato a fare una cosa del genere, ma il div map si sposta solo quando clicco e muovo il cursore sopra le 4 immagini e non nel resto del div map.
Non riesco a capire il perchè.

<?php
$coordx[1]=50;
$coordy[1]=50;
$coordx[2]=100;
$coordy[2]=50;
$coordx[3]=100;
$coordy[3]=50;
$coordx[4]=100;
$coordy[4]=100;
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">            
    $(document).ready(function(){
        $('#map').draggable();
    });
</script>
<style>
    #cornice {
        margin:auto;
        width:800px;
        height:600px;
        overflow: hidden;
		border: 1px solid #FF0000;
		cursor:move;
    }
	#island1 {
		position: absolute;
		margin-left: 50px;
		margin-top: 50px;
	}
	#island2 {
		position: absolute;
		margin-left: 100px;
		margin-top: 50px;
	}
	#island3 {
		position: absolute;
		margin-left: 50px;
		margin-top: 100px;
	}
	#island4 {
		position: absolute;
		margin-left: 100px;
		margin-top: 100px;
	}
</style>

<div id="cornice">
    <div id="map">
		<div id="island1"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island2"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island3"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island4"><img src="buskiriam/images/game/small/el.png"></div>
    </div>
</div>

 

[criric]

non capisco perche la position: absolute; sui div

quanto è grande l'immagine?

 

[Malware]

Ho messo una piccolissima immagine di prova

Le immagini delle isole devo posizionarle in base alle coordinate di ognuna
Io estraggo le coordinate dal db, le passo in javascript, e le moltiplico per 10

Es la x è 5 e la y è 10 diventano rispettivamente 50 e 100, che saranno le due posizioni in px
Ho usato absolute perchè mi sembra il più adatto
Fixed no, static neanche e relative nemmeno.
Sbaglio? Dimmi pure che errori faccio

 

[criric]

la sintassi giusta per la position è questa

#island1 {
        position: absolute;
        left: 50px;
        top: 50px;
    }

senza margin- come hai messo

poi aggiungi questo

#map {
       width:100%;
       height:100%;
    }

in modo che il div map si estenda in tutto il contenitore

 

[Malware]

Perfetto...quasi
Non mi accontento mai
Così va bene, ma se sposto il div in basso a destra non sarà più width: 100% e height: 100% (se metti un bordo 1px solid green capisci meglio forse)
Quindi se clicci in alto a sinistra per tascinarlo non cliccherai più nel div map e quindi non funzia.

Ho provato a risolvere così ma non me lo fa:

<script type="text/javascript">            
    $(document).ready(function(){
        $('#map').draggable()(function(){
		document.getElementById('map').style.width=100%;
		document.getElementById('map').style.height=100%;
		});
    });
</script>

Thanks

 

[Malware]

Ho modificato il codice facendo in modo che javascript sistemi le isole in base alle coordinate estratte con php dal database

<?php
$coordx[1]=50;
$coordy[1]=50;
$coordx[2]=100;
$coordy[2]=50;
$coordx[3]=50;
$coordy[3]=100;
$coordx[4]=100;
$coordy[4]=100;
?>

<style>
    #cornice {
        margin:auto;
        width:800px;
        height:600px;
        overflow: hidden;
		border: 1px solid #FF0000;
    }
	#map {
	    width:100%;
        height:100%;
		border: solid 1px green;
		cursor:move;
	}
	#island1 {
		position: absolute;
	}
	#island2 {
		position: absolute;
	}
	#island3 {
		position: absolute;
	}
	#island4 {
		position: absolute;
	}
</style>








<div id="cornice">
    <div id="map">
		<div id="island1"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island2"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island3"><img src="buskiriam/images/game/small/el.png"></div>
		<div id="island4"><img src="buskiriam/images/game/small/el.png"></div>
    </div>
</div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">            
    $(document).ready(function(){
        $('#map').draggable()(function(){
		document.getElementById('map').style.width=100+'%';
		document.getElementById('map').style.height=100+'%';
		});
    });	
	
	var coordx = new Array;
	var coordy = new Array;
	
<?php
for ($n=1; $n<=4; $n++) {
     echo'
          coordx['.$n.']='.$coordx[$n].';
          coordy['.$n.']='.$coordy[$n].';
     ';
} 
?>	

for (n=1; n<=4; n++) {
     document.getElementById('island'+n).style.left=coordx[n]+'px';
     document.getElementById('island'+n).style.top=coordy[n]+'px';
}	

</script>

Purtroppo niente da fare per la parte javascript che dovrebbe dare al div map larghezza e altezza sempre uguale al div cornice.
Consigli?
Grazie mille!