HTML mappe cliccabili

Salve^^ premetto che di html so davvero poco :)

Devo creare un'immagine con una mappa cliccabile in determinati punti da cui si aprono finestrelle pop-up (che poi sono altri file altervista)

ho provato con questo

Citazione:

---

<IMG SRC="http://immagineesempio.jpg" USEMAP="#esemap">

<MAP NAME="#esemap">

<AREA SHAPE="rect" COORDS="10,7,555,472" HREF="http://sitoesempio.html">

<AREA SHAPE="rect" COORDS="56,7,544,472" HREF="http://sitoesempio.html">

<AREA SHAPE="rect" COORDS="112,7,455,472" HREF="http://sitoesempio.html">

</MAP>

---

ma non funziona, oltretutto non mi farebbe aprire le finestre in popup nè scegliere la dimensione stessa dei popup

e non capisco come dovrei mettere le coordinate se non mi chiede quanto è grande l'immagine di sfondo... help ç_ç

Risposte un po' così al volo:

- per la dimensione dell'immagine, devi specificare gli attributi width e height sul tag <img>

- se quelli sono i valori effettivi delle coordinate cliccabili, è (relativamente) chiaro perché non funzionano: si tratta di aree sovrapposte. Quando clicchi su un punto appartenente a più aree definite, qual è la pagina corrispondente che viene aperta?

Un consiglio: progettare una mappa cliccabile non è affatto una cosa semplice con il solo HTML, ti consiglio di utilizzare strumenti che ti permettano una progettazione grafica e ti restituiscano alla fine codice (questo dovrebbe essere uno di quelli che intendo, anche se non l'ho provato: http://www.image-maps.com/).

Alternativa migliore? Un approccio "à la Fireworks": con un programma di grafica (lo faceva Macromedia Fireworks, appunto) prova a scomporre in varie parti rettangolari l'immagine e salvane le singole componenti. Usando poi il codice HTML costruisci una tabella con l'obiettivo di ricomporre l'immagine (dovrai un po' "abusare" degli attributi rowspan e colspan), inserendo ogni segmento dell'immagine in una cella (con il normale tag <img>) e assegnando direttamente al segmento il collegamento.

Stammi bene...

Per una soluzione più "portabile" e forse più facile da implementare, c'è un modo alternativo via css. Ad esempio, vedi questo articolo:

:arrow: http://www.frankmanno.com/ideas/css-imagemap/