Mappa "interattiva" di isole per browsergame

Malware

Utente Attivo
19 Lug 2012
112
0
0
Ciao a tutti :cool:

Caldo anche da voi?
caldo-350.jpg

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:

Codice:
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ne sparo una in jquery
è solo una bozza di idea
Codice:
<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

Utente Attivo
19 Lug 2012
112
0
0
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è.


Codice:
<?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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non capisco perche la position: absolute; sui div

quanto è grande l'immagine?
 

Malware

Utente Attivo
19 Lug 2012
112
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la sintassi giusta per la position è questa
Codice:
#island1 {
        position: absolute;
        left: 50px;
        top: 50px;
    }
senza margin- come hai messo

poi aggiungi questo

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

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

Malware

Utente Attivo
19 Lug 2012
112
0
0
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:
Codice:
<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

Utente Attivo
19 Lug 2012
112
0
0
Ho modificato il codice facendo in modo che javascript sistemi le isole in base alle coordinate estratte con php dal database

Codice:
<?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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
O Mappa Interattiva PHP 3
asevenx [HTML] Creare mappa interattiva con Illustrator HTML e CSS 5
M Creare mappa immagine interattiva con dati forniti da database PHP 0
emanuelevt mappa interattiva - problema jQuery 1
M Mappa interattiva con jquery ajax e php. jQuery 0
A Help..Mappa Interattiva HTML e CSS 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
A [Javascript] Marker personalizzati su mappa leaflet Javascript 0
C [PHP] Punto su mappa PHP 0
J [Wordpress] Mappa WordPress 2
M [Javascript] Visualizzazione mappa Javascript 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
Trapano [PHP] Mappa con gli indirizzi PHP 3
ecosito [WordPress] Visualizzare una mappa con i pin dei post tramite GPS? WordPress 4
S [Javascript] Creare mappa per ogni utente Javascript 5
felino [Google MyBusiness] Maker non presente durante l'esplorazione della mappa Google+ 3
F Aggiornare marker su mappa google con una funzione ajax richiamata al cambio di una select Ajax 2
I Salve, ho un probelma con una mappa d'immagini usata come sfondo HTML e CSS 3
L Array multidimensionale mappa browsergame PHP 1
L Overlapping marker mappa google Javascript 0
P modificare mappa sito Javascript 0
P modificare mappa sito Javascript 0
E realizzare una mappa personale e responsive HTML e CSS 6
G Mappa Javascript Presentati al Forum 0
M Mappa all'interno del sito con ricerca delle filiali Javascript 8
L Problema Inserimento Azioni Su mappa vettoriale Javascript 0
M Mappa immagine...vi prego è urgente, devo farlo quanto prima HTML e CSS 5
F zoom jquery mappa jQuery 1
J Mappa che visualizza daove sei PHP 7
F mappa jquery con effetto hover + fancybox Javascript 1
L Problemi a interagire con la mappa sul mio sito jQuery 1
felino Plugin per Mappa del sito WordPress 5
G Scaricare kml da una mappa incorporata in un sito web HTML e CSS 5
U [javascript] visualizzare marker su mappa di google Javascript 10
J Mappa con dati da db PHP 0
S [risolto] Creare una mappa Google per ogni indirizzo Javascript 14
M Mappa immagine con elenco di link reciproci Javascript 0
P Popolare un Database da una mappa di google map PHP 7
P Mostrare punti interesse du una mappa di google maps Javascript 1
M Guida su come inserire la mappa di Goggle con Jumi Joomla 1
A creare una mappa del sito in frame HTML e CSS 0
unkus_nob marker dinamici in mappa google Javascript 3
M mappa generata da librerie gd modificabile tramite form PHP 51
L Centri Media in Italia: mappa dei clienti (aggiornata) SEO e Posizionamento 9
V Mappa di Google su explorer funziona, su CHROME e FIREFOX NO! Javascript 1
A mappa del sito nascosta HTML e CSS 6
G creare mappa + legenda Webdesign e Grafica 13
voldemort Mappa con jQuery jQuery 0
M Gestione di una mappa PHP 3
E Visualizzare mappa al passaggio del mouse Javascript 2

Discussioni simili