Commons:Ressourcen für verweissensitive Grafiken

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
This page is a translated version of a page Commons:Image map resources and the translation is 100% complete. Changes to the translation template, respectively the source language can be submitted through Commons:Image map resources and have to be approved by a translation administrator.
Other languages:
All categories and pages that start with "Commons" in the name are for internal Commons work. They contain resources, help, tools, instructions, links, FAQs, examples, labs, software, etc.. They are not for categorization of images and media files used outside of internal Commons work. Please do not categorize regular image or media files here. Instead, see the main categories and subcategories at the Main Page and here. See also: Category help and category search. Search the Commons namespace at Special:Search.

Verweissensitive Grafiken. Aufgrund des Problems mit der PNG-Skalierung ist es manchmal besser, ein GIF-Bild für eine verweissensitive Grafik zu nutzen. Siehe Commons:Dateitypen#Bilder für weitere Informationen.

Kategorien

Hilfe, Ressourcen und häufig gestellte Fragen

  • mw:Extension:ImageMap - beschreibt die Erweiterung, die auf Commons installiert ist
  • Image maps - W3C-Spezifikationen für verweissensitive Grafiken in HTML 4.0. Die Wikitext-Syntax für die Erweiterung ImageMap nutzt ähnliche Konzepte, aber eine andere Syntax.

ImageMapEdit auf Commons

Image Map Editor ist ein Code auf Commons, der dich verweissensitive Grafiken in Bildern auf Commons bearbeiten und den von der Erweiterung ImageMap benötigten Wikitext generieren lässt. Füge ihn zu deiner common.js hinzu (siehe Anleitung) und wenn du dir ein Bild auf Commons ansiehst, erscheint ein Link ImageMap > darunter. Sieh dir für die nächsten Schritte die Kurzanleitung auf Category:Clickable maps an.

Andere Editoren für verweissensitive Grafiken

  • Mcc HTML Mapper - Freie Multi-Plattform-Software zur Erstellung von verweissensitiven Grafiken für das Internet.
  • Online-Editor für verweissensitive Grafiken, unterstützt alle Formen, kompatibel mit der Erweiterung ImageMap: http://www.maschek.hu/imagemap/imgmap.
  • Basis-Online-Werkzeug zur Erstellung von verweissensitiven Grafiken von mgwalk.com: http://www.image-maps.com.
  • Clickable Image Map Maker - Diese Webseite erlaubt es dem Benutzer, eine Bild-Datei von seiner eigenen Festplatte auszuwählen, dann eine zweite Seite zu erstellen, die dieses Bild nutzt und erlaubt es dem Benutzer, sehr schnell den HTML-Code für eine verweissensitive Grafik zu generieren, den er in seinen eigenen Dateien nutzen kann. Sie bietet auch praktische Pop-Up-Menüs, um den Prozess zur Codierung von href zu beschleunigen. Komplizierte Grafiken können in weniger als einer Minute erstellt werden (kein Witz). Erfordert einen Browser, der mit Javascript und Frames umgehen kann, entwickelt und getestet auf einem Mac mit Netscape Navigator.
  • GIMP - Das Bildbearbeitungsprogramm von GNU.
  • Wikia Help:ImageMap - Hilfe von einer Seite, die auf MediaWiki basiert.
  • Wikia Help:Image maps (Star-Trek-Wiki) - Einfachere Hilfe von einer Seite, die auf MediaWiki basiert.
  • iMapBuilder = eine Windows-Software, um jedes beliebige Bild in eine anklickbare verweissensitive Flash-Grafik mit anklickbaren Punkten, Symbolen und Effekten beim Überfahren mit der Maus umzuwandeln.

Eine verweissensitive HTML-Grafik in eine verweissensitive Wiki-Grafik umwandeln

Hier sind einige kurze Anleitungen zum manuellen Konvertieren.

Siehe diesen Link zur Wikia-Hilfeseite über verweissensitive Grafiken: [1]. Beachte die verweissensitive Grafik und den Wikicode für diese, die auf der Seite aufgeführt sind. Hier drunter finden sich wichtige Teile dieses Wikicodes. „Foo“ kann der Name jedes Bildes sein, das du in eine anklickbare verweissensitive Grafik umwandeln möchtest. Jedes Bildformat kann genutzt werden (GIF, PNG, JPG, etc.). 

<imagemap>
Image:Foo.jpg
poly
poly 
rect 
circle 
</imagemap>

Finde eine verweissensitive Grafik auf einer Internetseite oder erstelle eine. Wenn das Bild gemeinfrei ist, lade es nach Commons hoch, um es in der verweissensitiven Wiki-Grafik zu nutzen. Suche auf der Webseite nach dem HTML-Quellcode für die verweissensitive Grafik (Menü/Quelltext in Firefox). Er wird Poly-, Rechteck- und Kreis-Koordinaten enthalten. Kopiere diese Koordinaten in einen einfachen Text-Editor wie Microsoft Editor, der bei Windows-Betriebssystemen enthalten ist. Nutze den Ersetzungsbefehl, um alle Kommas durch Leerzeichen zu ersetzen. Es sollte zwischen jeder Zahl ein Leerzeichen geben. Kopiere die Koordinaten nach den Poly-, Rechteck- und Kreis-Namen in das Wikicode-Beispiel oben. Die Poly-Zeilen müssen die ersten sein. Es können mehrere Poly-, Rechteck- und Kreis-Namen erforderlich sein. Stelle sicher, dass sie für jeden anklickbaren Bereich der verweissensitiven Grafik den Zeilenanfang darstellen. Die Zahlen können Zeilenumbrüche enthalten. Füge nach jeder Liste von Zahlen einen Wikilink ein, entweder einen Wikilink auf eine andere Seite oder auf einen Abschnitt innerhalb der Seite, auf der die verweissensitive Grafik genutzt werden wird. Um auf Abschnitte auf der aktuellen Seite zu verlinken, füge das Zeichen # vor dem Titel des Unterabschnitts ein und umfasse den Titel des Unterabschnitts in doppelten eckigen Klammern, wie bei einem Wikilink: [[#Titel des Unterabschnitts]]. Sieh dir die Vorschau an oder speichere die Seite und probiere die verweissensitive Grafik aus, indem du Teile von ihr anklickst. Du kannst auch Spielwiesen nutzen, um die verweissensitive Grafik auszuprobieren.

Weitere Funktionen, Tooltips und so weiter

Diese freien Werkzeuge bieten weitere Möglichkeiten, um Grafiken für weitere Informationen, Tooltips und so weiter anzuklicken.

  • JQVMap - jQuery Vector Maps. - „JQVMap ist ein jQuery-Plugin, das Vector-Grafiken darstellt.“ Die Seite jQuery sagt, dass „jQuery auch in MediaWiki seit Version 1.16 genutzt wird.“
  • ImageMapster.
  • jVectorMap. „Viele Karten der Welt, von Regionen der Welt, Ländern und Städten stehen auf dieser Seite zum herunterladen zur Verfügung. Sie wurden alle aus gemeinfreien Daten oder Daten unter freien Lizenzen erstellt, sodass du sie kostenlos für alle Zwecke nutzen kannst.“


Erweiterte Möglichkeiten

Siehe diese anklickbare und scrollbare Weltkarte:

  • Weltkarte des Kriminalitätsindex für das Halbjahr 2015. Beachte, wie die Farbspektren zum Thema passen. „Gute“ und „schlechte“ Bereiche. Grün für „gut“. Rot für „schlecht“. Fahre über die Karte und beachte die Pop-Ups. Beachte auch das glatt ineinander übergehende Spektrum der Legende und wie es einen großen Bereich abdeckt. Diese Art von Karten wäre ein nützliches Modell für einige Karten auf Wikipedia-Seiten.

Eine verweissensitive Grafik mit GIMP generieren

Dieser Prozess beinhaltet 3 Schritte:

  1. Das Bild herunterladen und in GIMP öffnen
  2. Die Koordinaten-Daten generieren
  3. Die Koordinaten-Daten extrahieren und in eine verweissensitive Grafik im Wikiformat umwandeln

Die Schritte werden unten detaillierter beschrieben. Beachte, dass es zwei Varianten von Schritt 2 gibt (Schritt 2a und Schritt 2b) und entsprechende Varianten von Schritt 3 (Schritt 3a und Schritt 3b).

Beachte, dass die GIMP-Anweisungen auf GIMP 2.8.10 basieren, wobei es sich zum Zeitpunkt des Verfassens dieser Seite um die aktuelle Version handelte.

Schritt 1: Die Original-Datei auf deinen Computer herunterladen

  • Klicke auf das Bild im Artikel. Dies sollte dich auf die „Datei“-Seite führen.
  • Klicke auf das Bild auf der „Datei“-Seite. Dies sollte dich zum Original führen, das eine URL hat, die mit https://upload.wikimedia.org/wikipedia/commons beginnt.
  • Speichere die Datei auf deinem Computer.
  • Öffne die Datei in GIMP.

Schritt 2a: Generierung mit dem Werkzeug ImageMap

Das Werkzeug ImageMap ist einfacher zu nutzen. Beachte, dass jede Form manuell gezeichnet werden muss, was fehleranfällig und umständlich sein kann -- insbesondere wenn es viele ungewöhnliche Formen gibt.

  • Wähle über die Menüleiste Filter -> Web -> ImageMap aus.
  • Wähle aus der linken Seite eine Form aus: Rechteck, Kreis, Poly
  • Zeichne die entsprechenden Formen in deinem Bild.
  • Wähle, wenn du fertig bist, Ansehen -> Quelle aus.

Schritt 3a: Koordinaten aus dem Werkzeug ImageMap extrahieren

  • Kopiere die Quelle in einen Text-Editor.
  • Finde für jede Form die Attribute „Form“ und „Koordinaten“ und setze sie in eine eigene Zeile.

Schritt 2b: Generierung über den Ansatz der Fuzzy-Auswahl

Der Ansatz der Fuzzy-Auswahl ist schwieriger zu verwenden. Er hat jedoch den Vorteil, dass schnell extrem genaue Formen gezeichnet werden. Er ist insbesondere hilfreich für Bilder mit klar definierten Grenzen, wie geografischen Grenzen. Siehe https://en.wikipedia.org/w/index.php?title=Benin&oldid=618376512 für ein Beispiel.

  • Wähle über die Menüleiste Werkzeuge -> Auswahl-Werkzeuge -> Fuzzy-Auswahl aus. Auf dem Bild werden mehrere Formen dargestellt.
  • Öffne die Pfad-Werkzeugkiste über Windows -> Andockbare Dialoge -> Pfade.
  • Wähle Auswählen -> auf Pfad. Beachte, dass nun eine Auswahl in der Pfad-Werkzeugkiste erscheinen wird.
  • Klicke mit der rechten Maustaste auf die Auswahl und wähle Pfad exportieren aus.
  • Speichere die Datei. Beachte, dass es sich um eine SVG-Datei handelt.

Schritt 3a: Koordinaten aus dem Ansatz der Fuzzy-Auswahl extrahieren

  • Öffne die Datei in einem Texteditor.
  • Suche nach dem Attribut, das mit „d=“ beginnt.
  • Extrahiere alles zwischen den Zitaten in ein neues Dokument.
  • Ersetze alle Kommas durch Leerzeichen.
  • Entferne alle Leerzeichen von den Zeilenanfängen, indem du den ganzen Abschnitt markierst und wiederholt die Umschalttaste drückst.
  • Entferne alle neuen Zeilen (du benötigst einen Text-Editor, der reguläre Ausdrücke ersetzt).
  • Entferne alle „M“s. Beachte, dass dies der Beginn des Pfads ist. (M bedeutet Verschieben nach).
  • Entferne alle „C“s. Beachte, dass dies der zweite Punkt in dem Pfad ist. (C steht für Biegen nach).
  • Ersetze alle „Z“s durch eine neue Zeile. Beachte, dass Z die Endmarkierung ist. (Z steht für Pfad schließen).
  • Du hast nun jeden Pfad in einer einzelnen Zeile.
  • Füge „poly“ zum Beginn jeder Zeile hinzu.
  • Füge am Ende jeder Zeile einen temporären Anker ein. Zum Beispiel [[a]] zu Zeile 1; [[b]] zu Zeile 2; etc.
  • Füge auch die benötigten <imagemap>-Markierungen und die erste Zeile für den Namen der Datei (Bsp.: File:A.png) ein.
  • Kopiere die Quelle in die Wikipedia-Spielwiese und sieh dir die Vorschau an.
  • Fahre über jede Form und nutze die temporären Anker, um jede Form zu identifizieren.
  • Ersetze die temporären Anker durch den tatsächlichen Anker.
Retrieved from "https://commons.wikimedia.org/w/index.php?title=Commons:Image_map_resources/de&oldid=795359558"