Persönliche Werkzeuge

Vorlage:ToolTip

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „<noinclude> {|style="background:#F0F0F0" cellpadding="4" cellspacing="1" |-style="background:white" valign="top" | Name: | ToolTip |-style="background:white" vali…“)
 
(Der Versionsvergleich bezieht 34 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
<noinclude>
<noinclude>
-
{|style="background:#F0F0F0" cellpadding="4" cellspacing="1"
+
{|style="background:#D0D0D0" cellpadding="4" cellspacing="1"
|-style="background:white" valign="top"
|-style="background:white" valign="top"
| Name:
| Name:
Zeile 6: Zeile 6:
|-style="background:white" valign="top"
|-style="background:white" valign="top"
| Beschreibung:
| Beschreibung:
-
| Erzeugt ein ToolTip oberhalb des Elements ...
+
| Erzeugt ein ToolTip unterhalb des Elements ...
|-style="background:white" valign="top"
|-style="background:white" valign="top"
| Parameter:
| Parameter:
|  
|  
-
; (1): CSS, start, end
+
; (1): <tt>CSS&nbsp;&nbsp;</tt> Fügt den CSS-Code für ToolTips auf der Seite ein
-
; (2): Eindeutige ID des ToolTips
+
:      <tt>Start</tt>          Markiert den Anfang des Textes der im ToolTip angezeigt werden soll.
 +
:      <tt>Ende&nbsp;</tt>      Markiert das Ende des Textes der im ToolTip angezeigt werden soll.
 +
:      <tt>Bild&nbsp;</tt>      ToolTip bestehend aus Text (optional) und ein bis drei Bildern
 +
; (2): Wenn (1)=<tt>Start</tt> oder <tt>Bild</tt>: Text (Wort, Abkürzung etc.) für den der ToolTip angezeigt werden soll.
 +
; (3): Wenn (1)=<tt>Bild</tt>:  Dateiname des Bildes
 +
; (4): Wenn (1)=<tt>Bild</tt>:  Text (wird über dem Bild angezeigt)
 +
; (5): Wenn (1)=<tt>Bild</tt>:  Dateiname des zweiten Bildes
 +
; (6): Wenn (1)=<tt>Bild</tt>:  Dateiname des dritten Bildes
|}
|}
-
{{Button|Caption=Test-Button 1|ID=TestBtn1|OnEvent=TestBtnEvent}}
+
{{ToolTip|CSS}}
-
{{Button|Caption=Test-Button 2|ID=TestBtn2|OnEvent=TestBtnEvent}}
+
(1) = Start/Ende: Unter dem Wort {{ToolTipTest|Start|hier}}Die ist ein ToolTip...{{ToolTipTest|Ende}} wird ein ToolTip angezeigt.<br>
-
<html><script type="text/javascript">
+
(1) = Bild: {{ToolTipTest|Bild|EST 28.9.53.-19, BERLIN W8, z|ddr0380.1js.small_st.jpg|'''Ersttagsstempel 28.9.53.-19, BERLIN W8, z'''}}
-
sActiveBtnID = '';
+
 
-
sActiveBgColor = '#808080';
+
{{ToolTip|Bild|TS-F3|ddr0538.4.small_pfTS-F3f3a.jpg|Begrenzung ausgebuchtet über "KR"<br>von "DEMOKRATISCHE" (Feld 3)}},<nowiki
-
sActiveCaColor = 'white';
+
/>{{ToolTip|Bild|F6|ddr0538.4.small_pfTS-F6f6a.jpg|Strich in der Begrenzungslinie<br>zwischen "DEUTSCHE" und<br>"DEMOKRATISCHE" (Feld 6)}},<nowiki
-
sInactiveBgColor = '#E0E0E0';
+
/>{{ToolTip|Bild|F10|ddr0538.4.small_pfTS-F10f10a.jpg|"R" von "NATIONALER" links/unten<br>eingekerbt (Feld 10)}}
-
sInactiveCaColor = 'black';
+
-
sHoverBgColor = '#D0D0D0';
+
-
sHoverCaColor = 'black';
+
-
function TestBtnEvent(sID,sEvent) {
+
-
  eButton = document.getElementById(sID);
+
-
  switch (sEvent) {
+
-
  case 'onmouseenter':
+
-
    if (sID != sActiveBtnID) {
+
-
      eButton.style.background=sHoverBgColor;
+
-
      eButton.style.color=sHoverCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onmouseleave':
+
-
    if (sID != sActiveBtnID) {
+
-
      eButton.style.background=sInactiveBgColor;
+
-
      eButton.style.color=sInactiveCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onclick':
+
-
    // alert('Button "'+sID+'" angeklickt !!!');
+
-
    if (sID != sActiveBtnID) {
+
-
      if (sActiveBtnID != '') {
+
-
        eButtonOld = document.getElementById(sActiveBtnID);
+
-
        eButtonOld.style.background=sInactiveBgColor;
+
-
        eButtonOld.style.color=sInactiveCaColor;
+
-
      }
+
-
      sActiveBtnID = sID;
+
-
      eButton.style.background=sActiveBgColor;
+
-
      eButton.style.color=sActiveCaColor;
+
-
    } else {
+
-
      sActiveBtnID = '';
+
-
      eButton.style.background=sInactiveBgColor;
+
-
      eButton.style.color=sInactiveCaColor;
+
-
    }
+
-
    break;
+
-
  case 'onload':
+
-
    eButton.style.background=sInactiveBgColor;
+
-
    eButton.style.color=sInactiveCaColor;
+
-
    break;
+
-
  }
+
-
}
+
-
</script></html>
+
</noinclude><includeonly><nowiki
</noinclude><includeonly><nowiki
-
/><html><div id="</html>{{{ID}}}<html>" onload="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onload')" onclick="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onclick')" onmouseenter="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseenter')" onmouseleave="</html>{{{OnEvent}}}<html>('</html>{{{ID}}}<html>','onmouseleave')" style="display:inline-block;padding:4px 8px 3px 8px;background:#E0E0E0;border:solid #D0D0D0 1px;color:black;cursor:pointer;"><b></html>{{{Caption}}}<html></b></div></html><nowiki
+
/>{{#switch:{{{1|XXX}}}
-
/></includeonly>
+
|CSS=<html>
 +
<style type="text/css" media="screen">
 +
  .tooltip {
 +
    #color: #c32e04;
 +
    text-decoration: underline dotted blue;
 +
    cursor: help;
 +
    position: relative;
 +
  }
 +
  .tooltip span[role=tooltip] {
 +
    display: none;
 +
  }
 +
  .tooltip:hover span[role=tooltip] {
 +
    display: block;
 +
    position: absolute;
 +
    top: 10em
 +
    #bottom: 1em;
 +
    left: -1em;
 +
    #width: 15em;
 +
    padding: 4px;
 +
    z-index: 100;
 +
    color: #000;
 +
    background-color: white;
 +
    border: solid 2px #808080;
 +
    border-radius: 0.2em;
 +
  }
 +
</style></html>
 +
|Start=<html><span class="tooltip"></html>{{{2|<span style="color:red">ToolTip: 2. Parameter fehlt !!!</span>}}}<html><span role="tooltip"></html><nowiki
 +
  />{{Print|NoPrint|begin}}
 +
|Ende={{Print|NoPrint|end}}<html></span></span></html>
 +
|Bild=<html><span class="tooltip"></html>{{{2|<span style="color:red">ToolTip: 2. Parameter fehlt !!!</span>}}}<html><span role="tooltip"></html><nowiki
 +
  />{{#if:{{{4|}}}|{{{4}}}<br>}}[[Image:{{{3}}}]]{{#if:{{{5|}}}|&nbsp;[[Image:{{{5}}}]]}}{{#if:{{{6|}}}|&nbsp;[[Image:{{{6}}}]]}}<nowiki
 +
  /><html></span></span></html>
 +
|Bildxxx={{Print|NoPrint|begin}}<nowiki
 +
  /><html><span class="tooltip"></html>{{{2|<span style="color:red">ToolTip: 2. Parameter fehlt !!!</span>}}}<html><span role="tooltip"></html><nowiki
 +
  />{{#if:{{{4|}}}|{{{4}}}<br>}}[[Image:{{{3}}}]]{{#if:{{{5|}}}|&nbsp;[[Image:{{{5}}}]]}}{{#if:{{{6|}}}|&nbsp;[[Image:{{{6}}}]]}}<nowiki
 +
  /><html></span></span></html><nowiki
 +
  />{{Print|NoPrint|end}}
 +
|DEFAULT=<span style="color:red">ToolTip: 1. Parameter falsch ({{{1}}}) !!!</span>
 +
}}</includeonly>

Aktuelle Version vom 20:53, 23. Sep. 2024

Name: ToolTip
Beschreibung: Erzeugt ein ToolTip unterhalb des Elements ...
Parameter:
(1)
CSS   Fügt den CSS-Code für ToolTips auf der Seite ein
Start Markiert den Anfang des Textes der im ToolTip angezeigt werden soll.
Ende  Markiert das Ende des Textes der im ToolTip angezeigt werden soll.
Bild  ToolTip bestehend aus Text (optional) und ein bis drei Bildern
(2)
Wenn (1)=Start oder Bild: Text (Wort, Abkürzung etc.) für den der ToolTip angezeigt werden soll.
(3)
Wenn (1)=Bild: Dateiname des Bildes
(4)
Wenn (1)=Bild: Text (wird über dem Bild angezeigt)
(5)
Wenn (1)=Bild: Dateiname des zweiten Bildes
(6)
Wenn (1)=Bild: Dateiname des dritten Bildes

(1) = Start/Ende: Unter dem Wort hierDie ist ein ToolTip... wird ein ToolTip angezeigt.
(1) = Bild: EST 28.9.53.-19, BERLIN W8, zErsttagsstempel 28.9.53.-19, BERLIN W8, z
Image:ddr0380.1js.small_st.jpg

TS-F3Begrenzung ausgebuchtet über "KR"
von "DEMOKRATISCHE" (Feld 3)
Image:ddr0538.4.small_pfTS-F3f3a.jpg,F6Strich in der Begrenzungslinie
zwischen "DEUTSCHE" und
"DEMOKRATISCHE" (Feld 6)
Image:ddr0538.4.small_pfTS-F6f6a.jpg,F10"R" von "NATIONALER" links/unten
eingekerbt (Feld 10)
Image:ddr0538.4.small_pfTS-F10f10a.jpg


Von „https://www.nugman.info/bogenwiki/index.php?title=Vorlage:ToolTip“