Problema coordinate tag <map>

**simmop** · 11-11-2011, 23:59

Ciao ragazzi! Volevo farvi innanzi tutto i complimenti per il forum. Spero inoltre di non fare errori nel postare la domanda.

Stò utilizzando il tag <map> per creare immagini "cliccabili", ma stò avendo dei problemi con le coordinate.
Ho creato un immagine con The Gimp di 1400x800 pixel e volevo suddividerla in varie aree cliccabili.
Ma le coordinate che rilevo con The Gimp e le coordinate inserite nel file html non coincidono.
Per esempio : dopo vari esperimenti ho scoperto che il file HTML è come se considerassse l'immagine larga 800 px anzichè i 1400px originali e l'altezza dell'immagine 457px circa invece degli originali 800px, quindi tutte le coordinate preventivamente preparate da me utilizzando The Gimp non funzionano.
Non capisco...

Il tag lo uso nel seguento modo:
<html><head>
<title>immagine cliccabile</title>
</head>
<body>
<map name="homeMap">
<area shape="rect" coords="posizione_x,posizione_y,larghezza,altezza" href="link1">
</map>
[img]miaimmagine.jpg[/img]
</body>
</html>

Grazie preventivamente per il vostro aiuto!

**webdemo** · 12-11-2011, 17:44

per l'utilizzo delle mappe immagine leggi qui

http://forum.html.it/forum/showthrea...67#post9557967

**simmop** · 12-11-2011, 18:21

Grazie mille!Problema risolto!

**MarcoRuna** · 01-12-2011, 11:32

Anche io ho lo stesso problema...puoi dirmi come hai risolto?

**simmop** · 01-12-2011, 15:41

Certo!
Per prima cosa quando crei il tag

[img]tuaimmagine[/img]

ricordati di specificare le dimensioni dell'immagine da mappare, altrimenti il broswer potrebbe caricarla con una dimansione differente, facendoti sballare le misure prese in prcedenza.

Inoltre, inserendo le coordinate come ho trovato sul molti siti(per "rect" ci sono 4 valori :margine destro, margine dal top,larghezza altezza), la mappatura non funzionava(non so perchè).

Ho provato in questo modo e tutto funziona:

<area shape="rect" coords="5,5,221,32" .... />
dove:
a:distanza dal margine destro all'angolo destro in alto
b:distanza dal bordo superiore all'angolo destro in alto
c:distanza dal margine destro all'angolo sinistro in basso
d:distanza dal bordo superiore all'angolo sinistro in basso

Dopo tutto mi ha funzionato.
Spero che questo ti aiuti!
Ciao

**MarcoRuna** · 01-12-2011, 15:57

Ciao,

avrei una domanda da farti: se la tua immagine ha dimensione 1400x800 perchè nel tag img imposti l'attributo width a 700?

Io cmq ho questo problema

http://forum.html.it/forum/showthrea...readid=1487034

E' simile a quello che avevi tu se non sbaglio. Oppure no?

**simmop** · 01-12-2011, 17:55

L'esempio che ho fatto prima è con un immagine di larghezza 700px.
per questo ho settato la larghezza a 700px.
Se ho capito, il problrma risiede nel fatto che la dimensione dell'immagine dipende da volta a volta variando quindi la dimanesione dell'immagine. Per questo motivo il map non potrebbe funzionare correttamente.
Se la tua immagine di partenza è di 2500x1328 pixel, quando la inserisci DEVI imporre la dimensione reale dell'immagine, solo cosi funzionerà.

Se l'immagine è troppo grande, potresi fare un resize dell'immagine e portarla ad esempio a 1250x664 e poi ricalcolare le coordinate dell'area rect(ricordati sempre di imporre la dimensione dell'immagine).

Se non ho capito il problema dimmi pure!

**MarcoRuna** · 01-12-2011, 19:18

Se la tua immagine di partenza è di 2500x1328 pixel, quando la inserisci DEVI imporre la dimensione reale dell'immagine, solo cosi funzionerà.

Io posso anche inserire la dimensione reale, ma l'immagine viene comunque ridimensionata da uno script javascript a seconda della risoluzione del browser in cui si sta visualizzando il sito.

ricalcolare le coordinate dell'area rect

Il punto è proprio questo: dovrei ricalcolare di volta in volta le coordinate dell'area del rettangolo del punto attivo. Ma non so bene come fare!

Mi spiego meglio:

se non faccio ridimensionare l'immagine, le dimensioni sono 2500x1328 e il rettangolo ha coordinate coords="2149,157,2260,170"

se faccio ridimensionare l'immagine, le dimensioni (sul mio computer) sono 1280x679
Le coordinate a questo punto come le imposto??? Che calcoli posso fare?

**simmop** · 01-12-2011, 19:31

Ma a te va bene che l'immagine si ridimensioni, oppure la vorresti sempre delle stesse dimensioni?
Se ti va bene che l'immagine si ridimensioni, dovresti inserire nella ta pagina uno script (ad esempio in PHP) che in base al ridimensionamento ti stampi le coordinate "al volo", ovvero in base a calcoli sul ridimensionamento genera dinamicamente le coordiante.
In questo caso non so bene come potresti recuperare la dimensine dell'immagine, ma non credo sia impossibile.

Se invece vorresti l'immagine sempre della stessa dimensione, nel caso tu la voglia ridimensionare devi innanzitutto ridimensionare l'immagine e poi ricavarti le cooridnate con un software per il disegno. Io per questo utilivvo The Gimp e mi trovo molto bene per tutte e due le operazioni.

**MarcoRuna** · 01-12-2011, 19:35

Se ti va bene che l'immagine si ridimensioni, dovresti inserire nella ta pagina uno script (ad esempio in PHP) che in base al ridimensionamento ti stampi le coordinate "al volo", ovvero in base a calcoli sul ridimensionamento genera dinamicamente le coordiante.

Sono proprio i calcoli sul ridimensionamento che mi mettono in difficoltà.

Cioè metti caso che io so che la foto è stata ridimensionata in 1280x679, a questo punto come cambio le coordinate che in origine sono coords="2149,157,2260,170", ovvero quelle corrispondenti all'immagine non ridimensionata (2500x1328)?

Discussione: Problema coordinate tag <map>

Strumenti discussione

Ricerca discussione

Visualizza

Problema coordinate tag <map>

Permessi di invio