Tooltips (4)

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Tooltips (4)

Beitrag von Admin » Do 21. Aug 2014, 16:32

Tooltips (IV)

Da Bilder mehr sagen als viele Worte nutzen wir diesen Umstand natürlich gerne für die Tooltips.
Anhand von zwei Beispielen zeige ich den Einbau von Bildern in den Tooltips.

Hier die Vorschau auf Beispiel1.
Und hier die Vorschau auf Beispiel2.

Beginnen wir mit Beispiel1.
Zuerst bauen wir uns ein Menü (ähnlich dem in Tooltips (III)). Dazu übernimmst du den unten stehenden Code (CSS + HTML). Nähere Info's zum Menü findest du hier -> http://www.kompozer-web.de/forum/viewto ... ?f=18&t=43
CSS-Code

Code: Alles auswählen

#menu {
    width: 150px;
    height: 250px;
    }

#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

#menu li {
    text-align: center;
    }

#menu li a {
    background-image: url(button.gif);
    background-repeat: no-repeat;
    background-position: left center;
    display: block;
    height: 30px;
    text-decoration: none;
    font-size: 1em;
    color: black;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 1.8em;
    }

#menu li a:hover {
    background-image: url(button.gif);
    background-position: left bottom;
    background-repeat: no-repeat;
    }
HTML-Code

Code: Alles auswählen

<body>
    <div id="menu">
      <ul>
        <li>
          <a href="#nogo">Home</a>
        </li>
        <li>
          <a href="#nogo">Anfahrt</a>
        </li>
        <li>
          <a href="#nogo">Reservierung</a>
        </li>
        <li>
          <a href="#nogo">Sehenswertes</a>
        </li>
        <li>
          <a href="#nogo">Impressum</a>
        </li>
      </ul>
    </div>
  </body>
So sieht die Seite aus.

Als nächstes fügst du die Einträge für die Bilder in den Tooltips hinzu. Dafür erweiterst du obigen HTML-Code wie folgt:
<body>
<div id="menu">
<ul>
<li>
<a href="#nogo">Home<span><img src="bild1.png"></span></a>
</li>
<li>
<a href="#nogo">Anfahrt<span><img src="bild2.png"></span></a>
</li>
<li>
<a href="#nogo">Reservierung<span><img src="bild3.png"></span></a>
</li>
<li>
<a href="#nogo">Sehenswertes<span><img src="bild4.png"></span></a>
</li>
<li>
<a href="#nogo">Impressum<span><img src="bild5.png"></span></a>
</li>
</ul>
</div>
</body>
Die Seite sieht danach so aus. Nicht besonders schön da sich die Bilder überlagern. Also „verstecken“ wir den span-Bereich. Dies geschieht mit folgender Regel:

Code: Alles auswählen

#menu a span {
    display: none;
    } 
Jetzt sieht die Seite so aus. Aber vom Tooltip ist noch nichts zu sehen. Die folgende Regel dient zur Sichtbarmachung der Tooltips und zur Platzierung am Ende des Menüs.

Code: Alles auswählen

#menu a:hover span {
  display: block;
    position: absolute;
    z-index: 20;
    color: black;
    text-align: left;
    width: 142px;
    left: 10px;
    top: 170px;
}
So sollte jetzt deine Seite aussehen.

Weiter geht’s mit Beispiel2.
Erstelle eine neue Datei und füge folgendem HTML-Code (body-Bereich) ein.

Code: Alles auswählen

<body>
    Das könnte ein Satz aus einer Bauanleitung sein.<br>
    <br>
    "Nehmen Sie die Schraube, den Federring und die große Unterlegscheibe und ............"<br>
    <br>
    <br>
    <br>
    "Nehmen Sie die Schraube, den Federring und die große Unterlegscheibe und ............"
</body>
Markiere in beiden Sätzen die Worte „Schraube“, „Federring“ und „Unterlegscheibe“ und erstelle einen Link (#nogo).
Im CSS-Editor erstellst du folgende Regeln.

Code: Alles auswählen

a.tip_anzeigen {
    color: #0000ff;
    position: relative;
    text-decoration: none;
    font-style: italic;
    }
a.tip_anzeigen:hover {
    background-color: transparent;
    color: #0000ff;
    }
Teile die Klasse „tip_anzeigen“ allen Links (<a>) zu.

Deine Seite sollte jetzt so aussehen.

Erweitere deinen HTML-Code um die Einträge für die Bilder.
<body>
Das könnte ein Satz aus einer Bauanleitung sein.<br>
<br>
"Nehmen Sie die
<a class="tip_anzeigen" href="#nogo">Schraube<span><img src="schraube.png"></span></a>, den
<a class="tip_anzeigen" href="#nogo">Federring<span><img src="ring.png"></span></a> und die große
<a class="tip_anzeigen" href="#nogo">Unterlegscheibe<span><img src="scheibe.png"></span></a> und ............"<br>
<br>
<br>
<br>
"Nehmen Sie die
<a class="tip_anzeigen" href="index_a.html#nogo">Schraube<span><img src="schraube.png"></span></a>, den
<a class="tip_anzeigen" href="index_a.html#nogo">Federring<span><img src="ring.png"></span></a> und die große
<a class="tip_anzeigen" href="index_a.html#nogo">Unterlegscheibe<span><img src="scheibe.png"></span></a> und ............"
</body>


Die Seite sieht danach so aus. Beide Sätze sind noch gleich und die Bilder der Tooltips sind noch zu sehen. Diese „versteckst“ du mit folgender Regel.

Code: Alles auswählen

a.tip_anzeigen span {
    display: none;
    text-decoration: none;
    }
Mit der nächsten Regel steuerst du die Platzierung, Sichtbarkeit und Aussehen der Tooltips.

Code: Alles auswählen

 a.tip_anzeigen:hover span {
    border: 1px solid #000000;
    background-color: #ffffcc;
    display: block;
    position: absolute;
    top: 20px;
    left: 0;
    color: #000000;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    text-align: left;
    z-index: 20;
    }
Die Seite sieht so aus. Und beide Sätze incl. Tooltips sehen immer noch gleich aus.
Nun kannst du die in den Tooltips angezeigten Bilder noch um detaillierte Infos erweitern.
Dazu editierst du den Html-Code des zweite Satzes wie folgt.
"Nehmen Sie die
<a class="tip_anzeigen" href="index_a.html#nogo">Schraube<span>
<img src="schraube.png"> Schraube M6 x 50</span></a>, den
<a class="tip_anzeigen" href="index_a.html#nogo">Federring<span>
<img src="ring.png"><br> Federring 6</span></a> und die große
<a class="tip_anzeigen" href="index_a.html#nogo">Unterlegscheibe<span>
<img src="scheibe.png"><br><b>U-Scheibe 6,4 x 25</b></span></a> und ............"

So bis auf ein bisschen Feinschliff bist du jetzt fertig und deine Seite sollte so aus sehen.

Nun hast du im Tooltip für die Schraube keinen Zeilenumbruch eingefügt und trotzdem wird der Text umgebrochen. Das kommt daher, dass wir keine feste Breite vergeben haben. Möchtest du den Tooltip mit Bild und Text in einer Reihe so erstellst du folgende Klasse...

Code: Alles auswählen

.laenge {
    width: 175px;
    }
...und fügst sie so in den HTML-Code ein.
<a class="tip_anzeigen" href="index_a.html#nogo">Schraube<span class="laenge">
<img src="schraube.png"> Schraube M6 x 50</span></a>

Und so sieht es am Schluss aus. Viel Spaß beim Nachbauen und Experimentieren.
Dieses Tutorial wurde am 29. Feb 2008 von gimp-michel auf KompoZer-Web veröffentlicht.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste