WaBis

walter.bislins.ch

Makro: ptr

Die ptr-Makros bieten folgende Möglichkeiten:

  • Rechteckige Bereiche in Bildern oder anderen HTML-Elementen markieren
  • Die Markierungen können mit Text versehen werden
  • Die Markierungen können als Hot-Links zu anderen Seiten dienen
  • Die Markierungen können beim Anklicken beliebige Funktionen auslösen
  • Bildausschnitte können animiert vergrössert werden
  • Die Markierungen können durch Anklicken von Links im Text aufgerufen werden
  • Es können Markierungs-Sequenzen definiert werden
  • Es können gleichzeitig Markierungen in mehreren Bildern und HTML-Elementen animiert werden
  • Die Markierungen werden eingeblendet, wenn mit der Maus über das Element gefahren wird
  • Für die Beschriftung der Markierung wird automatisch eine optimale Position berechnet

 Demonstration von Interkationen mit Bildern

Grundlagen

Jedes Bild auf einer Wiki-Seite wird als Basisbild bezeichnet und erhält intern eine Nummer (BildID) zugewiesen, unter welcher es mit den ptr-Makros referenziert werden kann. Das erste Basisbild einer Seite hat immer die Nummer 0. Die Bilder können aber auch explizit mit einer ID versehen werden, was im Zusammenhang mit Makros empfohlen wird.

Jede Ausschnittsvergrösserung und jede Markierung erhält einen Namen, der innerhalb eines Basisbildes oder HTML-Elementes eindeutig sein muss. Unter diesen Namen können die Vergrösserungen und die Markierungen in den ptr Makros referenziert werden.

 Für Beispiele siehe Tutorial Interaktionen

Nachfolgend werden die einzelnen ptr-Makros detailliert beschrieben. Es gibt 4 ptr-Makros:

ptr def

{{ptr def|BildID:Ptr-Name|Pic-Name|Top,Left,Width,Height|Text}}

oder

{{ptr def|$ID:Ptr-Name|Top,Left,Width,Height|Text}}

Definiert eine rechteckige Markierung für ein Bild oder HTML-Element.

BildID (optional, default = 0)
Nummer oder ID des Basisbildes, für welches eine Markierung definiert werden soll. Das erste Bild jeder Seite hat automatisch die Nummer 0, wenn dem Bild nicht explizit eine ID zugewiesen wurde. Wenn BildID im Makro nicht angegeben wird, wird automatisch Bild 0 verwendet. Es wird empfohlen, dem Basisbild explizit eine ID zuzuweisen und diese im Makro zu verwenden (siehe ID eines Bildes).
ID
ID eines HTML-Elementes, welches markiert werden soll. Um ID von HTML-Element von BildID's zu unterscheiden, muss einer HTML-ID ein $ Zeichen vorangesetzt werden. Das HTML-Element selbst braucht kein $ Zeichen! Das $ Zeichen muss nur bei diesem Makro verwendet werden, bei den anderen Makros kann es weggelassen werden. Um einheitlich zu bleiben, darf man das $ Zeichen aber auch bei den anderen ptr-Makros verwenden.
Ptr-Name
Ein beliebiger, pro BildID oder ID eindeutiger Name für die Markierung. Unter diesem Namen kann die Markierung dann abgerufen werden.
Pic-Name (optional)
Name eines Vergrösserungsbildes (siehe Makro ptr pic). Wenn kein Pic-Name angegeben wird, bezieht sich die Markierung auf das Basisbild, sonst auf das angegebene Bild.
Top, Left, Width, Height
Position und Grösse der Markierung auf dem Bild Pic-Name oder dem Basisbild. "0,0,0,0" kann einfach mit "0" abgekürzt werden. Damit wird kurz (ca. 1 Sekunde) das ganze Element markiert. Wenn "-1" angegeben wird, so wird das ganze Element markiert, ohne dass die Markierung gleich wieder verschwindet.
Text (optional)
Wird Text angegeben, wird der oben angegebene Bereich als Rechteck eingeblendet und mit Text beschriftet, sobald der Benutzer mit der Maus in das Bild fährt. Dieser Bereich wird standardmässig selbst dann auch im Basisbild eingeblendet, wenn er für das Bild Pic-Name definiert ist (nach entsprechender Umrechnung). Soll der Text nur im Bild Pic-Name eingeblendet werden, nicht jedoch im Basisbild, musst du einen Doppelpunkt vor Text setzen.

Text kann auch als Hot-Link ausgezeichnet werden und zwar sowohl als Wiki-Link, als auch als externer Link. Dazu muss Text in entsprechende eckige Klammern gesetzt werden. Es gelten die allgemeinen Regeln für Links.

Wird Text als Link ausgezeichnet, wird der oben angegebene Bereich als Rechteck eingeblendet, sobald der Mauszeiger ins Bild bewegt wird. Das Rechteck wird zu einem Hot-Link. Das heisst, wenn der Benutzer in das Rechteck klickt, wird zur entsprechenden (Wiki)-Seite gesprungen. Wenn du einen unbeschrifteten Hot-Link erzeugen willst, musst du als Text einen Doppelpunkt verwenden: [[Link|:]].

 Siehe auch Spezielle Hot-Link-Aktionen

Beispiele

[[Bild:Synapse.jpg|id=Syn|300px|framed|Synapse]]

{{ptr pic|Syn:Zoom|SynapseZoom.jpg|172,118,125,129}}

{{ptr def|Syn:V|75,151,45,45|Vesikel}}
{{ptr def|Syn:R|45,125,12,43|[[Rezeptor|5HT-Rezeptor]]}}
{{ptr def|Syn:NT|Zoom|38,114,8,8|[[Neurotransmitter]]}}

ptr pic

{{ptr pic|BildID:Pic-Name|Bild-URL|Top,Left,Width,Height|Text}}
{{ptr apic|BildID:Pic-Name|Bild-URL|Top,Left,Width,Height|Text}}

Bindet ein Vergrösserungsbild (ptr pic) oder ein alternatives Bild (ptr apic) ein. Der Unterschied liegt in der Art, wie die Markierung animiert wird. Ein Vergrösserungsbild zeigt ja immer einen Ausschnitt eines Basisbildes an, hat also eine optische Beziehung zum Basisbild, während ein beliebiges anderes Bild diese Beziehung nicht hat und daher auch die Markierung unabhängig vom Basisbild animiert werden muss. Du musst dich nicht weiter verwirren lassen, verwende einfach ptr pic, wenn das einzubindende Bild einen Ausschnitt aus dem Basisbild darstellt, andernfalls verwendest du ptr apic.

BildID (optional)
Nummer oder ID des Basisbildes, auf welchem die Vergrösserung dargestellt werden soll. Das erste Bild jeder Seite hat automatisch die Nummer 0, wenn dem Bild nicht explizit eine ID zugewiesen wurde. Wenn BildID im Makro nicht angegeben wird, wird automatisch Bild 0 verwendet. Es wird empfohlen, dem Basisbild explizit eine ID zuzuweisen und diese im Makro zu verwenden (siehe ID eines Bildes).
Pic-Name (optional)
Ein beliebiger, pro Basisbild eindeutiger Name für das Vergrösserungsbild. Wird Pic-Name nicht angegeben, so wird der Dateiname von Bild-URL (ohne Erweiterung) als Pic-Name verwendet.
Bild-URL
Dateiname eines Vergrösserungsbildes, das im Medienverzeichnis gespeichert ist.
Top, Left, Width, Height
Position und Grösse dieses Bildausschnittes im Basisbild.
Text (optional)
Wird Text angegeben, wird der oben angegebene Bereich als Rechteck eingeblendet und mit Text beschriftet, sobald der Benutzer mit der Maus in das Bild fährt. Durch einen Klick in diesen Bereich wird dann das Bild Bild-URL animiert eingeblendet (Zoom-Effekt). Ohne Angabe von Text kann die Animation nur mit dem unten beschriebenen Makro ptr bzw. ptr link eingeblendet werden. Wenn du zwar das Rechteck eingeblendet haben willst, aber keinen Text dazu, dann gib einfach einen Doppelpunkt als Text ein. Ein einzelner Doppelpunkt als Text wird nicht dargestellt.

Beispiele

Unter Verwendung einer Bild-ID NTBild

[[Bild:NT.jpg|id=NTBild|300px|framed|Neurotransmitter]]
 
{{ptr pic|NTBild:Zoom|NTZoom.jpg|172,118,125,129|Zoom}}

Ohne explizite BildID: die folgenden Beispiele sind alle gleichbedeutend:

[[Bild:NT.jpg|300px|framed|Neurotransmitter]]
 
{{ptr pic|0:NTZoom|NTZoom.jpg|172,118,125,129|Zoom}}
{{ptr pic|NTZoom|NTZoom.jpg|172,118,125,129|Zoom}}
{{ptr pic|NTZoom.jpg|172,118,125,129|Zoom}}

{{ptr|BildIDs:Ptr-Namen|Linktext}}
{{ptr link|BildIDs:Ptr-Namen|Linktext}}

Erzeugt einen Link, der beim Anklicken die entsprechende Markierung einblendet und dabei nötigenfalls auch zugehörige Vergrösserungsbilder einzoomt.

BildIDs (optional, default = 0)
Durch Kommas getrennte Liste aus Bild-IDs, für welche gleichzeitig eine bestimmte Markierung aufgerufen werden soll. Wenn BildIDs nicht angegeben wird, wird Bild 0 verwendet.
Ptr-Namen
Durch Kommas getrennte Liste von Markernamen (siehe Makro ptr def) oder Namen von Vergrösserungsbildern (siehe Makro ptr pic). Wird kein Ptr-Name angegeben, wird das Basisbild ohne Markierung angezeigt. Werden mehrere Namen angegeben, werden die Markierungen hintereinander mit einer kurzen Pause dazwischen in einer Sequenz abgespielt.
Linktext
Text, den der Leser anklicken soll, um diese Markierung angezeigt zu bekommen.

Das Makro ptr wird wie eine kleine Schaltfläche dargestellt, während das Makro ptr link wie ein normaler Link angezeigt wird.

Es kann eine Reihe von Markierungen mit einem Makro aktiviert werden. Die verschiedenen BildIDs/Ptr-Namen Paare müssen durch ; von einander getrennt werden.

Spiezialfälle:

  • Wird als Ptr-Name ein Bildname (siehe Makro ptr pic) angegeben, so wird das entsprechende Vergrösserungsbild mit einer Zoom-Animation angezeigt. Dieses Bild enthält keine Markierung, bzw. das ganze Bild wird markiert.
  • Wird als Ptr-Name nichts angegeben, wird das Basisbild ohne Markierung angezeigt.
  • Ist Ptr-Name der Name einer Markierung auf einem Zoom-Bild, so wird das dort referenzierte Bild eingezoomed (falls nötig) und der entsprechende Ausschnitt darin markiert.
  • Wird kein Linktext angegeben, so wird die Markierung(-sequenz) automatisch beim Laden der Seite aufgerufen.

Beispiele

[[Bild:ControlStand.jpg|id=CS|300px|framed|Control Stand]]
 
{{ptr|CS:|Control Stand}}            zeigt Basisbild ohne Marker
{{ptr|CS:PicSchubhebel|Schubhebel}}  zeigt Bild PicSchubhebel ohne Marker
{{ptr|CS:AT|A/T Disengage}}          zeigt Schubhebel mit Markierung AT

Mehrere Markierungen hintereinander automatisch abrufen:

{{ptr|PID:mark1,mark2,mark3|Irgendwas}}

Wie oben, aber als letzten Schritt die Markierung wieder auf das ganze Bild setzen:

{{ptr|PID:mark1,mark2,mark3,|Irgendwas}}

Je eine Markierung auf zwei Bildern gleichzeitig anzeigen (setzt voraus, dass für beide Basisbilder eine Markierung mit dem selben Namen definiert worden ist):

{{ptr|PID1,PID2:Mark|Irgendwas}}

Mehrere Absätze gleichzeitig Markieren:

{{div|id=Teil1}}
Text
{{end div}}
 :
{{div|id=Teil2}}
Text
{{end div}}

{{ptr def|$Teil1:A|-1|Absatz 1}}
{{ptr def|$Teil2:B|-1|Absatz 2}}

{{ptr|$Teil1:A;$Teil2:B|Absätze markieren}}

Die Makros ptr def und ptr pic sind weit flexibler, als dass nur zu einer Seite gesprungen werden kann, wenn ein Bereich in einem Bild angeklickt wird. Du kannst als Link ein ptr- oder sel-Makro oder sogar JavaScript-Code ausfüren.

Die Gross-/Kleinschreibung der Keywörter sel, ptr und JavaScript wird nicht beachtet.

Beispiel für das Ausführen eines ptr-Makros

{{ptr def|Syn:V|75,151,45,45|[[#ptr=Syn:R|Vesikel]]}}
{{ptr def|Syn:R|45,125,12,43|Rezeptor}}

Im Beispiel wird als Link #ptr=Syn:R angegeben. Dies hat dieselbe Wirkung wie das Makro {{ptr|Syn:R|...}} und wird ausgelöst, wenn der entsprechende Bildbereich angeklickt wird. In diesem Beispiel wird beim Anklicken des Vesikels der Rezeptor markiert.

Beispiel für das Ausführen eines sel-Makros

{{ptr def|Syn:V|75,151,45,45|[[#sel=Brain:Ventrikel|Vesikel]]}}

Im Beispiel wird als Link #sel=Brain:Ventrikel angegeben. Dies hat dieselbe Wirkung wie das Makro {{sel|Brain:Ventrikel|...}} und wird ausgelöst, wenn der entsprechende Bildbereich angeklickt wird. So kannst du durch Anklicken von Bildbereichen Seitenelemente ein- und ausblenden (siehe Makro: sel).

Beispiel für beliebigen JavaScript-Code

{{ptr def|Syn:V|75,151,45,45|Vesikel|[[#JavaScript=alert('Ventrikel geklickt')|Klick mich]]}}

Im Beispiel wird als Link #JavaScript=alert('Ventrikel geklickt') angegeben. Sobald du in den entsprechenden Bildbereich klickst, wird das JavaScript ausgeführt. In diesem Fall wird eine Alert-Box mit der Meldung «Ventrikel geklickt» angezeigt.

Rahmen und Text Style ändern

Die Darstellung des Rahmens und Textes können geändert werden:

Text Style

Der Text Style kann mit CSS verändert werden, indem der Standardwert mit dem Attribut !important überschrieben wird:

<style>
#HotSpotText { 
  font-size: bigger !important;
  padding: 3px !important;
  background-color: #00f !important;
  border: 1px solid black !important;
}
</style>

Rahmen Style

Der Style des Rahmens kann geändert werden, indem eine entsprechende globale Variable definiert wird, deren Wert übernommen wird, sobald die Pointer Objekte erzeugt werden (sobald die Seite erstellt ist):

<jscript>
HotSpotsFrameStyles = [ '2px solid #bbf', '2px solid #00f', '2px solid #00f' ];
</jscript>

Pointer deaktivieren

Wenn man Bilder tum Beispiel mit den Tabs-Makros übereinander legt, so dass von einem Bild zum nächsten gewechselt werden kann, werden die Pointer nicht automatisch deaktiviert wenn ein anderes Bild ausgewählt wird. Man kann mit mit Javascript erzwingen, dass die Pointer deaktiviert werden, wenn ein Bild mit definierten Pointern unsichtbar wird:

<jscript>
function SelectObsTab( ix ) {
  Tabs.Select( 'ObsTabs', ix );
  // pointer deaktivieren, wenn ein anderer Tab als 0 gewählt wird
  if (ix > 0) HotSpots.Finish();
}
</jscript>

More Page Infos / Sitemap
Created Donnerstag, 9. Februar 2006
Scroll to Top of Page
Changed Dienstag, 4. August 2020