plot Punkte für Image Map
Ich möchte den Bildkarten auf meiner Webseite eine automatische Bereichshervorhebung hinzufügen. Ich habe herausgefunden, dass die Bibliothek mapper.js sehr nützlich ist, um dies zu erreichen, jedoch ist das Erstellen der x, y-Plots um eine regionale Karte sehr zeitaufwendig.
Gibt es eine schnelle Möglichkeit, Begrenzungskoordinaten eines unregelmäßigen Polygons zu erstellen, wie sie auf regionalen Karten zu finden sind?
BEARBEITEN
Es muss einen Weg geben, dies zu tun. Ich habe Fireworks 8 sowie Photoshop CS3 auf meinem Windows-PC, aber ich bin vertrauter mit Fireworks.
Wenn ich ein Auswahlrechteck erstelle, kann ich mit der rechten Maustaste auf & gt; Ändern Sie das Auswahlrechteck & gt; In Pfad konvertieren Das erzeugt einen Pfad mit mehreren Punkten, aber ich weiß nicht, wie ich zum nächsten Schritt komme, der die Koordinaten dieser Punkte extrahiert.
Ich habe versucht, einen Hotspot, ein Polygon-Slice einzufügen und dann nach "HTML und Bilder" zu exportieren. Beides gibt mir quadratische Hotspots, kein Polygon. Ich habe auch versucht mit der rechten Maustaste auf den Pfad und Bearbeiten & gt; Copy Path Outlines, sowie Bearbeiten & gt; Kopieren Sie den HTML-Code. Gib mir auch nicht die Polygonkoordinaten.
Ich kann Polygon-Coords nur für ein Slice bekommen. Gibt es vielleicht eine Möglichkeit, den Pfad zu einem Slice in Fireworks 8 zu konvertieren?
6 Antworten
Für Fireworks 8:
1) Erstellen Sie Ihr Zelt mit dem Zauberstab & amp; Auswahlrechteck.
2) Rechtsklick & gt; Ändern Sie das Auswahlrechteck & gt; In Pfad umwandeln
3) Klicken Sie mit der rechten Maustaste auf den Pfad und wählen Sie "Hotspot einfügen" (oder drücken Sie Strg + U)
4) Wählen Sie Datei & gt; Exportieren
5) Wählen Sie "HTML und Bilder" für "Dateityp"
Gimp bietet ein Plugin / Filter namens Gimp Image Map , das über eine nette Oberfläche verfügt, um eine Imagemap zu erstellen. Ich denke, es wird die Funktionalität bieten, nach der Sie suchen. Wählen Sie Filters -> Web -> Image Map... , um den Dialog aufzurufen
Sobald Sie den Imagemap-Dialog geöffnet haben, können Sie nach Herzenslust Polygonflächen erstellen:
Sie können Bereiche erstellen und anpassen, wenn Sie den Link, den Alternativtext, die Rahmen, das Polygon selbst oder sogar die Einrichtung von JavaScript-Ereignissen ändern möchten.
Nachdem Sie fertig sind, speichern Sie es und Sie können das Fragment verwenden, das Sie gerade in Ihrem HTML gespeichert haben
%Vor%Dies ist für die frustrierte Person, die versucht, aus einem Bild einer Karte Coords zu generieren.
Öffnen Sie Ihre Karte in Photoshop. Verwende den Zauberstab, um die Bildkante auszuwählen Wandle das Auswahlrechteck in einen Pfad um Exportieren Sie diesen Pfad zum Illustrator Öffnen Sie die Datei im Illustrator 'save as ...' SVG-Datei (Hinweis: NICHT svgcompressed) Im Optionsmenü wählen Sie 'Link' Hit speichern
Öffnen Sie Ihre .svg-Datei in einem Texteditor und Sie werden Ihre Koordinaten haben.
Hier ist eine einfache, einfach zu bedienende Web-App zum Erstellen von Image Maps. Dadurch sparen Sie sich die zusätzlichen Programme (DreamWeaver, PhotoShop, Gimp, etc.).
Wie es scheint, waren die anderen Antworten, wie man es manuell macht (die Frage überhaupt nicht beantworten). Da dieser Beitrag in den Google-Ergebnissen zu diesem Thema erscheint, aktualisiere ich mit einigen Informationen, die ich zumindest gefunden habe ein Ausgangspunkt dafür, wie dies automatisiert geschehen kann:
Ich spreche PHP aus, das ich untersuche: Ссылка
Weitere Ressourcen, die ich gefunden habe:
Im Grunde scheint die Suche nach Schlüsselwörtern wie "image edge detector" und solchen Dingen zu relevanteren Ergebnissen zu führen. Ich suche immer noch nach einer, die ich benutzen kann, aber ich bin nur ein bisschen überrascht, dass so viele Leute scheinen zu denken, dass dies etwas ist, das manuell gemacht werden sollte, wenn es viel effektiver wäre, programmatisch zu tun.
Wenn Sie es vorziehen, in Adobes Lager zu bleiben, kann ImageReady Imagemaps ähnlich wie Gimp erstellen. Sie haben ein Tutorial zur Verwendung, um Image Maps online zu erstellen , aber das CSS auf der Die Seite ist derzeit defekt und Sie können die Seite nur sehen, wenn Sie sie ausdrucken. Dann wird es wie diese pdf aussehen.
Tags und Links javascript imagemap fireworks