WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— Add-On auf WorldWideScripts.net

@de1wwsAbonniere den Feed um auf dem neuesten Stand zu bleiben!

Neu! Folge uns, wie Du es möchtest!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dies ist ein Bild html-Mapping für Web-Entwickler konzipiert.

Das Werkzeug wurde mit dem HTML5 Leinwand entwickelt, so dass ihre Verwendung ist auf die Browser, die die Leinwand zu unterstützen, sondern auch die Datei-API:

IE10 +, FF3.6 +, FF14-, FF18 + (der FF15 haben Probleme mit einigen Leinwand Funktionalitäten, Bug 787623, die in FF18 aufgelöst wird), Chrome6 +, Safari6 +, Opera11.1 +

Da es sich um ein Werkzeug für Entwickler, ich denke, dass dies keine große Einschränkung, denn ich nehme an, dass ein Web-Entwickler hat kein Problem, einen geeigneten Browser wählen.

Ich habe FF14 verwendet werden, um das Werkzeug zu entwickeln, so ist dies die beste Wahl, aber das Werkzeug wurde auch in Chrome22 und Opera12 getestet


Hinweis: Die Version des Tools, die Sie in der Live-Vorschau-Link sehen können, ist eine limitierte Version des Tools. Mit dieser Version können Sie nur eine bestimmte Gruppe von Bildern auf der Homepage gelistet zu laden. Nach dem Laden eines Bildes können Sie alle Formen zu zeichnen, aber nur die ersten 6 Formen werden im HTML-Code generiert werden. Diese Beschränkung gilt nicht verhindern, dass Sie alle Funktionalitäten des Tools zu testen.


Was ist ein Bild der Karte?

Eine Imagemap ist ein HTML-Code, der vom Benutzer angeklickt verschiedene Bereiche eines Bildes macht. Der HTML-Code besteht aus der Karte HTML-Tag in Verbindung mit dem Bereich Tag, die Sie in Gebiete mit rechteckig, polygonal und Kreisformen zu definieren.
Als Beispiel, wenn Sie die image1.png Bild in Ihre HTML-Seite haben, können Sie den folgenden Code schreiben:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

Wie Sie sehen können, müssen Sie das Attribut usemap im img-Tag, die den gleichen Wert des Attributs Name in der Karte-Tag haben wird eingestellt. Zwischen dem <map> und </ map> können Sie so viele <area> -Tags definieren, wie Sie wollen, jede, die eine benutzer klickbare Bereich auf dem zugehörigen Bild. Jeder Bereich muss eine Form-Attribut, das einer der 3 Werte haben kann: rect, Poly und Kreis. Rect Form vollständig durch 2 Punkte definiert ist, ist ein Poly Form durch eine Folge von Punkten definiert, und eine Kreisform ist durch einen Punkt, der die Mitte darstellt, und einen Radius definiert sind. Alle Punkte werden durch ein Paar von Koordinaten definiert ist, ausgedrückt in Pixel, Verwandten der oberen linken Ecke des Bildes. Die Form-Attribut kann auch die "default" Wert, die zu den Teilen des Bildes nicht mit einem der vorhergehenden Formen abgebildet beziehen. Berücksichtigen Sie, anstatt, dass die Reihenfolge, in der die Formen sind in der Karte definiert sind sehr wichtig: Wenn Sie die "default" Form als erste Form in der Karte zu definieren, wird es alle späteren Formen zu überschreiben, weil der "default" Form bezieht sich auf das gesamte Bild. Dies gilt auch bei den Formen, die einander überlappen, du kannst ein wenig Form in eine größere Form zu definieren, aber Sie müssen zuerst die kleine Form zu definieren und dann die größeren. Wenn 2 Formen einen Teil des Bildes zu teilen, die Form zuerst definiert, gewinnt.

Wenn Sie manuell eine Imagemap festlegen möchten, müssen Sie die Koordinaten aller benötigt, um die verschiedenen Formen definieren Punkte kennen. Wahrscheinlich ist dies kein großes Problem, wenn Sie einige Bereiche zur Karte haben, vor allem wenn man runde oder rechteckige Bereiche haben. Aber wenn Sie mehrere Bereiche mit einer polygonalen Form, stellen Sie sie manuell ist keine einfache Aufgabe.

Das Image Mapper Tool erlaubt Ihnen, Formen wie rect, Poly, und Kreis auf dem ausgewählten Bild, das automatisch in der entsprechenden HTML-Code, der die Bereiche des Bildes benutzer anklickbare macht übersetzt werden zu zeichnen.

Nach dem Zeichnen der Formen auf der gegebenen Bild, können Sie den HTML-Code zu generieren einfaches Klicken auf eine Schaltfläche, und der Code wird in einer Textarea displayied werden. Sie können den HTML-Code kopieren und in Ihre HTML-Seite (n). Sie können auch den umgekehrten Vorgang: Einfügen der HTML-Code in das Textfeld können Sie diesen Code einfach auf Knopfdruck laden; Dies wird sich in den Formen auf das Bild übersetzt werden und Sie können sie ändern, fügen Sie neue Formen und neu generiert den HTML-Code. Diese umgekehrte Mechanismus ist nützlich, um Ihnen zu erlauben, eine teilweise Mapping-Prozess zu speichern und weiter, um das Bild später zuordnen. Es ist auch nützlich, um "von Hand" die Form der Gestaltung / Positionierung verfeinern: nach dem Generieren Sie den Code in das Textfeld können Sie die Koordinaten in das Textfeld auf der fly ändern und neu zu laden.

Haupteigenschaften:

  • Sie können einen lokalen oder entfernten Bild auswählen
  • Sie können die Zielbildgrößen festgelegt: Das sind die Größen, dass das Bild in Ihre HTML-Seite haben
  • Sie können in und aus dem Bild in jedem Moment zu vergrößern und das wird nicht mit den realen Koordinaten, die generiert werden, die nur auf die Zielgrößen des Bildes hängt stören. Die Zoom-Funktion ist nur nützlich, um Ihnen zu helfen, um die Formen zu zeichnen.
  • Verschiedene Parameter für jede Form, wie beispielsweise die "href" -Attribut, das "alt" -Attribut, das "id" und "Klasse" Attribute und schließlich das "Ziel" Attribut können Sie festlegen. Um den Parameter müssen Sie die Form wählen gesetzt: eine Form, müssen Sie die obere linke Pfeil in der Werkzeugleiste auswählen und dann auf der Form zu wählen.
  • Die Karte "name", die Standard-URL und das Ziel: einige Parameter für die Karte können Sie einstellen.
  • Sie können eine Form der Auswahl der Form aus einer Werkzeugleiste ziehen.
  • Um eine Form zu zeichnen, nachdem Sie sie aus der Symbolleiste, können Sie einfach mit der Maus klicken Sie auf das Bild, in dem Sie die Form starten möchten.
  • Wenn die Form ist ein Kreis, der firts Punkt die Mitte: Bewegen der Maus (angeklickt oder freigegeben), können Sie einen Kreis, der den Cursor folgen sehen. Nochmaliges Klicken mit der Maus stoppt Zeichnen des Kreises.
  • Wenn die Form eine rect. der erste Punkt ist einer der Ecke. Bewegen der Maus (angeklickt oder freigegeben) wird eine rect ziehen. Nochmaliges Klicken mit der Maus stoppt zeichnen.
  • Wenn die Form ist ein Poly der Prozess ist ein wenig anders: Jeder Klick der Maus einen Punkt gesetzt; der aktuelle Punkt wird immer mit der Tannen einem verbunden, so dass die Poly immer eine geschlossene Form; zu stoppen, um das Poly ziehen (um den letzten Punkt zu setzen) Sie einen Doppelklick auf die Maus zu haben.
  • Für alle Formen können Sie auch aufhören, ziehen sie Sie auf die Schaltfläche "Stop" (die obere linke Pfeil in der Symbolleiste).
  • Sie können die Mauskoordinaten, wenn Sie es auf dem Bild zu bewegen.
  • Wie es so ist, kann man an der Grenze während des Formzeichnung klicken, jus: Sie können die grau-gestrichelten Rahmen um das Bild zu verwenden, um die Randkoordinaten des Bildes zu bestimmen, so dass Sie die Grenze verwenden können, wie es war Teil des Bildes war ein Teil des Bildes. Zum Beispiel, wenn Sie auf der oberen linken Ecke des Rahmens klicken, erhalten Sie einen Punkt, an gesetzt (0, 0) koordiniert. Wenn Sie die linke Grenze klicken, wird in jedem Punkt, erhalten Sie einen Punkt, an dem (0, y) gesetzt Koordinaten etc.
  • Sie können eine bereits gezeichnete Form auszuwählen und zu ändern / Größe verändern / entfernen. Um sie zu entfernen, müssen Sie die "Gummi" in der Werkzeugleiste, die angezeigt wird, als lehnte Bleistift nur die Auswahl einer Form zu verwenden.
  • Sie können die Farbe der Kontur der Formen aus einem Satz von 5 Farben auswählen (dies ist keine Design-Tool, so habe ich die Anzahl der Farben beschränkt und auch Sie können eine andere Farbe für jede Form nicht wählen).
  • Sie können auf der "Karte" klicken, das ist nur sichtbar, wenn Sie die "Stop" auf der Symbolleiste auswählen und keiner Form ausgewählt ist: wenn Sie einige Formen auf das Bild gezeichnet haben, werden Sie den HTML-Code in ein Textfeld zu sehen, wenn Sie noch nicht erstellt haben, eine Form, werden Sie ein leeres Textfeld sehen, aber Sie in es einige HTML-Code können Vergangenheit und laden Sie es.
  • Durch Klicken auf die Schaltfläche "Laden" (dass Sie nur, sobald Sie auf "Karte" Button sehen kann), wird in das Textfeld die vorliegende HTML-Code in verschiedenen Formen auf das Bild übersetzt werden.

Sie können das komplette Handbuch des Werkzeugs an dem folgenden Link unter: Online-Handbuch

Wenn Sie irgendwelche Fragen haben, lassen Sie einfach einen Kommentar oder schreiben Sie mir eine E-Mail!


Herunterladen
Weitere Komponenten in dieser KategorieAlle Komponenten dieses Autors
KommentareHäufige Fragen und Antworten

Eigenschaften

Erstellt:
10. Oktober 12

Letzte Aktualisierung:
N / A

Hohe Auflösung:
Nein

Unterstützte Browser:
Firefox, Opera, Chrome

Dateien enthalten:
JavaScript JS, HTML, CSS

Software Version:
HTML5

Stichworte

eCommerce, eCommerce, Alle Elemente, App, Bereich, Leinwand, Kreis, Koordinate, HTML5, Bild, Karte, Mapper, Poly, rect, Form, Ziel, Werkzeug, Zoom