wie man eine Imagemap visualisiert/debuggt?

Question

Ich erstelle dynamisch eine Imagemap für ein Diagrammwerkzeug, das ich habe.

Ich hatte gehofft, in der Lage zu sein, einen Rand oder eine Farbe auf den Bereichsumbauten zu setzen, also konnte ich überprüfen, dass alles mit den richtigen coords erzeugt wurde, aber ein wenig Forschung zeigt, dass das nicht möglich ist.

Also, was ist der einfachste Weg, um meine Image Map zu überprüfen ist richtig? Gibt es Browser-Tools, die die Bereiche "visualisieren"?

Answer 1

Was ist mit JavaScript (und jQuery) zu testen?

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

Dieses Plugin wird Imagemap-Bereiche markieren.

Answer 2

Ich hätte nie gedacht, dass ich das jemals sagen würde, aber dies ist einer der wenigen Fälle, in denen Dreamweaver hilfreich sein könnte. Sie haben eine Schnittstelle, Sie können mit Ankerpunkten arbeiten und Ihre Imagemap einfach einstellen.

Answer 3

Sie können FireBug dafür verwenden:

• Rechtsklick auf das Bild und wählen Sie "Inspect Element mit FireBug"
• In der Registerkarte HTML von Firebug, die image Tag markiert ist: suchen und erweitern die assoziierten map-Tag, das in der Regel richtig ist, nachdem es
• Sie jetzt Ihre Maus über die einzelnen area Tags setzen, sie zu sehen hervorgehoben über Ihr Bild

Answer 4

Image Map Editor ist ein Plug-in für Firefox. Es ist das beste Werkzeug, das ich bisher gefunden habe, macht das Erstellen, Inspizieren und Bearbeiten von Bildkarten sehr einfach.

Answer 5

Eine Möglichkeit, ein Bereichs-Tag in Chrome zu visualisieren, ist das Hinzufügen eines tabindex zu den area Tags, die Sie sehen möchten. Klicken Sie dann auf oder Tabulator. Chrome hebt die tatsächliche Kontur des anklickbaren Bereichs hervor.

Diese Lösung funktioniert leider nicht in Firefox.