come visualizzare/eseguire il debug di una mappa immagine?

Question

Sto generando dinamicamente una mappa di immagini per uno strumento grafico che ho.

Speravo di essere in grado di impostare un bordo o un colore sulle etichette di area in modo da poter verificare che tutto fosse generato con le giuste coordinate, ma una piccola ricerca dimostra che ciò non è possibile.

Quindi qual è il modo più semplice per controllare la mia mappa immagine è corretta? Esistono strumenti per il browser che "visualizzeranno" le aree?

Answer 1

Che dire dell'utilizzo di JavaScript (e jQuery) per testarlo?

http://davidlynch.org/js/maphilight/docs/demo_usa.html

Questo plugin evidenziare le aree della mappa immagine.

Answer 2

Non avrei mai pensato di dirlo, ma questo è uno dei pochi casi in cui Dreamweaver potrebbe essere utile. Avrai un'interfaccia, sarai in grado di lavorare con i punti di ancoraggio e impostare facilmente la tua imagemap.

Answer 3

È possibile utilizzare FireBug per questo:

• tasto destro del mouse l'immagine e scegliere "Inspect Element con Firebug"
• Nella scheda HTML di Firebug, il tag image viene evidenziata: individuare ed espandere la Associated map tag, che di solito è subito dopo
• ora è possibile posizionare il mouse su ogni area tag vederli evidenziato sopra la vostra immagine

Answer 4

Image Map Editor è un plug-in per Firefox. È lo strumento migliore che ho trovato finora, facilita la creazione, l'ispezione e la modifica delle mappe di immagini.

Answer 5

Un modo per visualizzare un tag di area in Chrome consiste nell'aggiungere uno tabindex ai tag area che si desidera visualizzare, quindi fare clic sulla scheda o su di esso. Chrome evidenzierà bene il contorno reale dell'area cliccabile.

Questa soluzione purtroppo non funziona in Firefox.