problemi con map

[Draxent]

Ciao a tutti!!!

Ho un problema, e diciamo che non sapevo in che sezione metterlo...
quindi probabilmente ho sbagliato a metterlo in questa sezione....
se così fosse scusatemi.

Allora vi dico cosa ho fatto: ho preso un immagine grande e l'ho messa in una pagina, ma ne ho visualizzato
solo un pezzo attraverso il css... in questo modo :
[img]x.gif[/img]
dove x è una gif trasparente mentre city1 contiene il file immagine e poi
visual contiene il pezzo di sfondo di immagine che deve apparire
grazie a background-position.
Ora però quando vado a trasformare questa immagine in una mappa mi vengono tutti i valori sballati...
perchè probabilmente lui prende come riferimento l'immagine x.gif invece io voglio che l'attributo usemap
si riferisca all'immagine presente in city1 e non a x.gif.

Avete capito? Come posso risolvere il mio problema?

Grazie ancora a tutti.

[Mich_]

Ma l'immagine fa parte del contenuto della pagina o e` un abbellimento?
Da come la usi (per creare una mappa) sembrerebbe che faccia parte del contenuto, per cui inserirla come sfondo e` un errore: tieni presente che in alcuni casi i browser non caricano gli sfondi (ad esempio per risparmiare banda di trasmissione o carico al client).

Anche caricare un'immagine grande e visualizzarne solo un pezzo e` un errore: l'utente perde del tempo (di caricamento) o della banda per una cosa che non viene usata: dovresti fare il "clip" all'immagine lato server. Ci sono dei programmi di grafica interfacciati al linguaggio lato server che possono fare il lavoro in modo trasparente all'utente (se e` questo il problema).

Comuqnue qui siamo fuori tema: a seconda del problema di fondo, il thread e` da spostare in HTML o nel linguaggio che usi sul server.
In pratica probabilmente hai usato una soluzione che non e` adatta al problema: prova a spiegare il problema che la soluzione si trova.

[Draxent]

Tutto quello che voglio realizzare è una mappa tipo google map ma senza ingrandimento. Mi interessa solo che l'utente possa visualizzare l'intera mappa spostandosi con le eventuali frecce. Quindi appena si collega alla pagina l'utente vedrà solo un pezzo dell'immagine e spostandosi con le frecce ha la possibilità di vederla tutta. Non solo... l'immagine deve avere zone cliccabili :
http://www.ludus.info/illustrazioni/...ppa-tesoro.jpg
Ad esempio in quest'immagine nel mio sito si vedrebbe solo la foresta del teschio e spostandosi con le frecce si possono andare a vedere gli altri luoghi della mappa. E tutti i luoghi possono essere resi cliccabili.

Spero di essermi spiegato.

Da quello che ho capito ho sbagliato completamente metodo di approccio al problema... ma a questo punto io non so come devo agire quindi sareste così gentili da consigliarmi cosa devo fare?

Grazie mille

[Mich_]

Solo una precisazione su GoogleMaps e sim. Loro usano JS e Ajax (o tecnologie equivalenti) e l'immagine viene rigenerata (solo per la parte "nuova") ad ogni spostamento.
Mi par di caprie che tu non vuoi/puoi usare una tecnologia di quel tipo.

Quello che vuoi e` avere una finestra, da cui vedi un pezzo di un'immagine piu` grande, e questa immagine deve avere parti cliccabili.
La cosa e` possibile, con alcune limitazioni.

Mi vengono in mente due metodi:
1. Usare un'immagine di sfondo e la mappa sull'immagine trasparente (come hai gia` provato a realizzare), ma ad ogni interazione (click) devi rimappare (lato server con il tuo programma o lato client tramite JS) il punto di interazione. In pratica avrai una "griglia" regolare, fitta quanto vuoi (fino ad arrivare al px, se e` piu` fitta avrai piu` precisione, ma se e` troppo fitta avrai necessita` di un numero molto alto di "celle"): al click un programma leggera` le coordinate (espresse nella unita` della griglia) e calcolera` l'area presente nell'immagine (dovra` pertanto essere noto lo spostamento dell'immagine rispetto alla griglia).

2. Usare le sovrapposizioni di oggetti, realizzate tramite CSS: in pratica sotto avrai l'immagine, e sopra un <div> con la finestra. Ambedue gli oggetti posizionati in modo assoluto, e con z-index opportuno. Nello strato superiore ci saranno anche i bottoni (che controllano le funzioni JS) per gli spostamenti del livello inferiore).
Tieni presente che non si possono fare "buchi" nei livelli, quindi il contenitore del livello superiore avra` sfondo trasparente, e conterra` vari oggetti, di cui almeno uno con sfondo trasparente (la "finestra") ed almeno uno con sfondo opaco che contiene i bottoni.

Pregi e difetti.
Il metodo 1 lo hai gia` in parte realizzato, ma devi creare la mappa, che per sempificarti la vita devi ralizzarla con JS e scriverla nella pagina con i metodi del DOM (avrai una buona compatibilita` tra tutti i browser moderni, con qualche probelma forse con IE6). Il problema e` tutto il programma: se conosci il JS e` solo un giochino complesso (ma non difficile - pero` metti in conto una serie di errori che spaccano la testa); se non consci bene il JS ti sconsiglio di proseguire.

Il metodo 2 e` sicuramente piu` semplice, ma non e` detto che funzioni: credo che il mouse non possa "bucare" il livello superiore (anche se e` trasparente), per cui non interagisce direttamente con l'immagine. Inoltre dovrai eliminare le barre di scorrimento sulla pagina (sul <body>), quindi usare anche gli attributi overflow.

Mi viene in mente ora: il metodo 1 risulterebbe piu` semplice, se l'immagine da mappare fosse il
<input type="image" src="trasp.gif" />
che in modo automatico trasmette la posizione del mouse nell'immagine (da verificare nei vari browser).

Mi rendo conto di aver alzato molta polvere: spero che riuscirai a capirci qualcosa (altrimenti chiedi nuovamente).
E forse ci sono altre soluzioni che ora non mi vengono in mente.

[Draxent]

Grazie intanto per aver risposto!
Ho capito che mi conviene puntare sul metodo 1 perchè il 2 non funziona... il mouse non può bucare le zone trasparenti ne sono più che sicuro.
Certo non sono molto bravo in JS... ma non avendo alternative.
Penso di aver capito cosa mi consigli. In pratica ogni volta che clicco sulla mappa lui mi legge di quanto è spostata la mappa e le cordinate del mouse... e da questi due valori vede se il punto cliccato è una area "rossa" oppure no. Giusto?