TestMap

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 19 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
Diese Seite demonstriert die Möglichkeit, ein Image-Map mit Hilfe von Vorlagen zu erstellen.
+
Diese Seite demonstriert eine einfache Möglichkeit, in MediaWiki ein Image-Map mit Hilfe von Vorlagen zu erstellen. Verwendet wird die Vorlage [[Vorlage:TestMap|TestMap]] die intern die Vorlage [[Vorlage:ImgMap|ImgMap]] nutzt.
-
1. Schritt: Übertragen der Vorlage auf eine Seite durch
+
Dabei wird dem Bild ein Raster aus 10x10 Feldern überlagert. Jedes Feld führt zu einer definierten Seiten und ist durch die Zeile
 +
 
 +
<nowiki>{{ImgMap|X=x%|Y=y%|LINK={{PAGENAME}}-x%-y%|NAME=x%-y%}}</nowiki>
 +
 
 +
definiert.
 +
 
 +
Der Name der verlinkten Seite besteht standardmäßig aus dem Namen der Bildseite (hier z.B. TestMap) und den Koordinaten (z.B. -10-10 entspicht 10%, 10%). Er kann überschrieben werden (LINK=.....)
 +
Einfacher ist es, auf der verlinkten Seite eine Weiterleitung (REDIRECT) zu einer beliebigen Seite zu setzen, sodass der Link jederzeit leicht geändert werden kann.
 +
 
 +
Die Im Bild angezeigte Bezeichnung des Links kann auf der Bildseite geändert werden (NAME=....). Nicht verwendete Link-Felder können gelöscht werden, in dem die jeweilige Zeile gelöscht wird.
 +
 
 +
Um die erforderliche Syntax für die Image-Map auf der Seite zu implementieren geht man wie folgt vor:
 +
 
 +
1. Schritt - Übertragen der Vorlage TestMap auf eine Seite durch
  <nowiki>{{SUBST:TestMap|name_des_bildes.erw|Größe (in Pixel)}}</nowiki>
  <nowiki>{{SUBST:TestMap|name_des_bildes.erw|Größe (in Pixel)}}</nowiki>
Zeile 7: Zeile 20:
zum Beispiel
zum Beispiel
-
  <nowiki>{{SUBST:TestMap|Mensch.gif|800}}</nowiki>
+
  <nowiki>{{SUBST:TestMap|Mensch.gif|400}}</nowiki>
ergibt:
ergibt:
-
{|width=800
+
{|with=800 cellpadding=20
 +
||
 +
{|width=400
||
||
-
<div style="position: relative">[[Bild:Mensch.gif|800px]]
+
<div style="position: relative">[[Bild:Mensch.gif|400px]]
{{ImgMap|X=0|Y=0|LINK={{PAGENAME}}-0-0|NAME=0-0}}
{{ImgMap|X=0|Y=0|LINK={{PAGENAME}}-0-0|NAME=0-0}}
{{ImgMap|X=10|Y=0|LINK={{PAGENAME}}-10-0|NAME=10-0}}
{{ImgMap|X=10|Y=0|LINK={{PAGENAME}}-10-0|NAME=10-0}}
Zeile 29: Zeile 44:
{{ImgMap|X=30|Y=10|LINK={{PAGENAME}}-30-10|NAME=30-10}}
{{ImgMap|X=30|Y=10|LINK={{PAGENAME}}-30-10|NAME=30-10}}
{{ImgMap|X=40|Y=10|LINK={{PAGENAME}}-40-10|NAME=40-10}}
{{ImgMap|X=40|Y=10|LINK={{PAGENAME}}-40-10|NAME=40-10}}
-
{{ImgMap|X=50|Y=10|LINK={{PAGENAME}}-50-10|NAME=50-10}}
 
{{ImgMap|X=60|Y=10|LINK={{PAGENAME}}-60-10|NAME=60-10}}
{{ImgMap|X=60|Y=10|LINK={{PAGENAME}}-60-10|NAME=60-10}}
{{ImgMap|X=70|Y=10|LINK={{PAGENAME}}-70-10|NAME=70-10}}
{{ImgMap|X=70|Y=10|LINK={{PAGENAME}}-70-10|NAME=70-10}}
Zeile 39: Zeile 53:
{{ImgMap|X=20|Y=20|LINK={{PAGENAME}}-20-20|NAME=20-20}}
{{ImgMap|X=20|Y=20|LINK={{PAGENAME}}-20-20|NAME=20-20}}
{{ImgMap|X=30|Y=20|LINK={{PAGENAME}}-30-20|NAME=30-20}}
{{ImgMap|X=30|Y=20|LINK={{PAGENAME}}-30-20|NAME=30-20}}
-
{{ImgMap|X=40|Y=20|LINK={{PAGENAME}}-40-20|NAME=40-20}}
+
{{ImgMap|X=50|Y=20|LINK={{PAGENAME}}-50-20|NAME=Tassen im Schrank}}
-
{{ImgMap|X=50|Y=20|LINK={{PAGENAME}}-50-20|NAME=50-20}}
+
 
-
{{ImgMap|X=60|Y=20|LINK={{PAGENAME}}-60-20|NAME=60-20}}
+
-
{{ImgMap|X=70|Y=20|LINK={{PAGENAME}}-70-20|NAME=70-20}}
+
{{ImgMap|X=80|Y=20|LINK={{PAGENAME}}-80-20|NAME=80-20}}
{{ImgMap|X=80|Y=20|LINK={{PAGENAME}}-80-20|NAME=80-20}}
{{ImgMap|X=90|Y=20|LINK={{PAGENAME}}-90-20|NAME=90-20}}
{{ImgMap|X=90|Y=20|LINK={{PAGENAME}}-90-20|NAME=90-20}}
Zeile 51: Zeile 63:
{{ImgMap|X=30|Y=30|LINK={{PAGENAME}}-30-30|NAME=30-30}}
{{ImgMap|X=30|Y=30|LINK={{PAGENAME}}-30-30|NAME=30-30}}
{{ImgMap|X=40|Y=30|LINK={{PAGENAME}}-40-30|NAME=40-30}}
{{ImgMap|X=40|Y=30|LINK={{PAGENAME}}-40-30|NAME=40-30}}
-
{{ImgMap|X=50|Y=30|LINK={{PAGENAME}}-50-30|NAME=50-30}}
 
{{ImgMap|X=60|Y=30|LINK={{PAGENAME}}-60-30|NAME=60-30}}
{{ImgMap|X=60|Y=30|LINK={{PAGENAME}}-60-30|NAME=60-30}}
{{ImgMap|X=70|Y=30|LINK={{PAGENAME}}-70-30|NAME=70-30}}
{{ImgMap|X=70|Y=30|LINK={{PAGENAME}}-70-30|NAME=70-30}}
Zeile 61: Zeile 72:
{{ImgMap|X=20|Y=40|LINK={{PAGENAME}}-20-40|NAME=20-40}}
{{ImgMap|X=20|Y=40|LINK={{PAGENAME}}-20-40|NAME=20-40}}
{{ImgMap|X=30|Y=40|LINK={{PAGENAME}}-30-40|NAME=30-40}}
{{ImgMap|X=30|Y=40|LINK={{PAGENAME}}-30-40|NAME=30-40}}
-
{{ImgMap|X=40|Y=40|LINK={{PAGENAME}}-40-40|NAME=40-40}}
+
{{ImgMap|X=50|Y=40|LINK={{PAGENAME}}-50-40|NAME=XXX}}
-
{{ImgMap|X=50|Y=40|LINK={{PAGENAME}}-50-40|NAME=50-40}}
+
-
{{ImgMap|X=60|Y=40|LINK={{PAGENAME}}-60-40|NAME=60-40}}
+
{{ImgMap|X=70|Y=40|LINK={{PAGENAME}}-70-40|NAME=70-40}}
{{ImgMap|X=70|Y=40|LINK={{PAGENAME}}-70-40|NAME=70-40}}
{{ImgMap|X=80|Y=40|LINK={{PAGENAME}}-80-40|NAME=80-40}}
{{ImgMap|X=80|Y=40|LINK={{PAGENAME}}-80-40|NAME=80-40}}
Zeile 73: Zeile 82:
{{ImgMap|X=30|Y=50|LINK={{PAGENAME}}-30-50|NAME=30-50}}
{{ImgMap|X=30|Y=50|LINK={{PAGENAME}}-30-50|NAME=30-50}}
{{ImgMap|X=40|Y=50|LINK={{PAGENAME}}-40-50|NAME=40-50}}
{{ImgMap|X=40|Y=50|LINK={{PAGENAME}}-40-50|NAME=40-50}}
-
{{ImgMap|X=50|Y=50|LINK={{PAGENAME}}-50-50|NAME=50-50}}
 
{{ImgMap|X=60|Y=50|LINK={{PAGENAME}}-60-50|NAME=60-50}}
{{ImgMap|X=60|Y=50|LINK={{PAGENAME}}-60-50|NAME=60-50}}
{{ImgMap|X=70|Y=50|LINK={{PAGENAME}}-70-50|NAME=70-50}}
{{ImgMap|X=70|Y=50|LINK={{PAGENAME}}-70-50|NAME=70-50}}
Zeile 83: Zeile 91:
{{ImgMap|X=20|Y=60|LINK={{PAGENAME}}-20-60|NAME=20-60}}
{{ImgMap|X=20|Y=60|LINK={{PAGENAME}}-20-60|NAME=20-60}}
{{ImgMap|X=30|Y=60|LINK={{PAGENAME}}-30-60|NAME=30-60}}
{{ImgMap|X=30|Y=60|LINK={{PAGENAME}}-30-60|NAME=30-60}}
-
{{ImgMap|X=40|Y=60|LINK={{PAGENAME}}-40-60|NAME=40-60}}
 
-
{{ImgMap|X=50|Y=60|LINK={{PAGENAME}}-50-60|NAME=50-60}}
 
{{ImgMap|X=60|Y=60|LINK={{PAGENAME}}-60-60|NAME=60-60}}
{{ImgMap|X=60|Y=60|LINK={{PAGENAME}}-60-60|NAME=60-60}}
{{ImgMap|X=70|Y=60|LINK={{PAGENAME}}-70-60|NAME=70-60}}
{{ImgMap|X=70|Y=60|LINK={{PAGENAME}}-70-60|NAME=70-60}}
Zeile 136: Zeile 142:
</div>
</div>
|}
|}
 +
|valign=top|
 +
Es erscheint das ausgewählte Bild in der festgelegten Größe. Dem Bild wird ein Raster aus 10x10 Feldern überlagert. Jedes Feld ist in der Voreinstellung mit den prozentualen Koordinaten bezeichnet (z.B. 10-10) und führt auf eine definierte (leere) Seite. Verwendete Felder können angeklickt werden. Auf der entsprechenden Seite kann dann z.B. eine Weiterleitung eingetragen werden. Man kann natürlich die verlinkte Seite auch direkt in der Liste eintragen. (In diesem Fall bei LINK=''Name der Seite'' eintragen) Nicht verwendete Linkfelder sollten aus der Liste gelöscht werden.
 +
 +
Zur Erleichterung kann man sich die Seite ausdrucken und zunächst die geplanten Links von hand eintragen. Anschließend arbeitet man sich nach dieser Vorlage durch die Liste in der Wikisyntax.
 +
 +
Der Vorteil bei der Nutzung einer solchen Vorlage mit vordefiniertem Raster ist die schnelle Festlegung der Link-Positionen. Es enfällt das mühsame Anpassen der einzelnen Links an die Position im Bild.
 +
|}
 +
 +
 +
 +
[[Kategorie:Ideen]]
 +
[[Kategorie:Hilfe]]

Aktuelle Version vom 09:03, 7. Mär. 2008

Diese Seite demonstriert eine einfache Möglichkeit, in MediaWiki ein Image-Map mit Hilfe von Vorlagen zu erstellen. Verwendet wird die Vorlage TestMap die intern die Vorlage ImgMap nutzt.

Dabei wird dem Bild ein Raster aus 10x10 Feldern überlagert. Jedes Feld führt zu einer definierten Seiten und ist durch die Zeile

{{ImgMap|X=x%|Y=y%|LINK={{PAGENAME}}-x%-y%|NAME=x%-y%}}

definiert.

Der Name der verlinkten Seite besteht standardmäßig aus dem Namen der Bildseite (hier z.B. TestMap) und den Koordinaten (z.B. -10-10 entspicht 10%, 10%). Er kann überschrieben werden (LINK=.....) Einfacher ist es, auf der verlinkten Seite eine Weiterleitung (REDIRECT) zu einer beliebigen Seite zu setzen, sodass der Link jederzeit leicht geändert werden kann.

Die Im Bild angezeigte Bezeichnung des Links kann auf der Bildseite geändert werden (NAME=....). Nicht verwendete Link-Felder können gelöscht werden, in dem die jeweilige Zeile gelöscht wird.

Um die erforderliche Syntax für die Image-Map auf der Seite zu implementieren geht man wie folgt vor:

1. Schritt - Übertragen der Vorlage TestMap auf eine Seite durch

{{SUBST:TestMap|name_des_bildes.erw|Größe (in Pixel)}}

zum Beispiel

{{SUBST:TestMap|Mensch.gif|400}}

ergibt:

Es erscheint das ausgewählte Bild in der festgelegten Größe. Dem Bild wird ein Raster aus 10x10 Feldern überlagert. Jedes Feld ist in der Voreinstellung mit den prozentualen Koordinaten bezeichnet (z.B. 10-10) und führt auf eine definierte (leere) Seite. Verwendete Felder können angeklickt werden. Auf der entsprechenden Seite kann dann z.B. eine Weiterleitung eingetragen werden. Man kann natürlich die verlinkte Seite auch direkt in der Liste eintragen. (In diesem Fall bei LINK=Name der Seite eintragen) Nicht verwendete Linkfelder sollten aus der Liste gelöscht werden.

Zur Erleichterung kann man sich die Seite ausdrucken und zunächst die geplanten Links von hand eintragen. Anschließend arbeitet man sich nach dieser Vorlage durch die Liste in der Wikisyntax.

Der Vorteil bei der Nutzung einer solchen Vorlage mit vordefiniertem Raster ist die schnelle Festlegung der Link-Positionen. Es enfällt das mühsame Anpassen der einzelnen Links an die Position im Bild.

Persönliche Werkzeuge