Design Clean
    >> Tipps zum anpassen

Bilder mit Tooltip

Tooltip-Fenster für Bilder

Bei Mauskontakt öffnet sich ein kleines Info-Fenster für weitere Informationen zum Bild.
Bilder können auch verlinkt werden. Mit - Seiten - , oder für Große Ansicht. (Siehe unten).
Hier wurden die beiden Bilder mit der großen Ansicht verlinkt (Thickbox).



Die "Tooltips" lassen sich auch neben - oder auf - Bilder platzieren.
Dazu einfach im CSS Code die Werte bei margin-top: und margin-left: ändern.



  • Schritt 1: Der CSS Code
  • auf "Extras"
  • auf "Eigener <head> Inhalt"
  • und dort den CSS-Code einfügen
  • oder im Feld "Text über Design"

<style type="text/css">
<!--

.tooltip {cursor: help;}

/* Aussehen für Tooltip Fenster */
.tooltip span { 
   position: absolute;
   width: 240px;
   color: #000000;
   margin-top: 180px;
   margin-left: -270px;
   padding: 15px;
   background-color: #FFFFFF;
   border: 1px solid #343434;
   visibility: hidden;z-index:1900; }

/* bei Mauskontakt sichtbar */
.tooltip:hover span { visibility: visible; }
-->
</style>

Bei margin-top: die Höhe deines Bildes angeben. + 10 Pixeldazu geben.
Damit platziert sich das Tooltip unter deinem Bild, mit 10 Pixel Abstand zum Bild.

Bei margin-left: die Breite deines Bildes angeben. Und als Minuszahl einfügen.
Damit beginnt das Tooltip links bündig mit deinem Bild.

Bei width: die Bildbreite angeben, und 30 Pixel davon abziehen.
Das Tooltip-Fenster hat nach Links und Rechts 15 Pixel Innenabstand (= 30 Pixel).
Damit hat das Tooltip-Fenster die gleiche Breite wie das Bild darüber.

Bei background-color: eine Hintergrundfarbe wählen.
Bei color: die Textfarbe im Tooltip angeben.
Bei border: Rahmen und Rahmenfarbe angeben.



  • Schritt 2: Der HTML-Code für Seiteninhalt
  • auf "Seiten"
  • gewünschte Seite wählen
  • im Editor oben links auf "Quellcode"
  • Seite ist nun in HTML-Code Ansicht
  • der HTML-Code für das Bild:

Für Bilder ohne Verlinkung. Nur Tooltip-Fenster:
<a class="tooltip"> 
<img width="270" src="Grafikadresse" alt="Bild" /> <span> HIER INFOTEXT </span> 
</a>

Tipp bei mehrern Bildern:
Wenn Ihr das Tooltip für mehrere Bilder verwenden möchtet, achtet auf Gleiche Bild-Breiten.
Falls das nicht möglich ist, müsstet Ihr das Tooltip-Fenster neben den Bildern öffnen lassen.
Dazu einfach im CSS Code die Werte bei margin-top: und margin-left: ändern.



Die Bilder mit Seiten verlinken :
<a class="tooltip" href="/Seite.htm"> 
<img width="270" src="Grafikadresse" alt="Bild" /> <span> HIER INFOTEXT </span> 
</a>

Oder Bilder mit der großen Ansicht verlinken ?
<a class="tooltip thickbox" href="Grafikadresse"> 
<img width="270" src="Grafikadresse" alt="Bild" /> <span> HIER INFOTEXT </span> 
</a>
Dazu müsst Ihr aber noch das "Thickbox-Script" im Seiteninhalt mit einfügen :
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://wtheme.webme.com/js/thickbox.js"></script>
<link rel="stylesheet" href="http://theme.webme.com/designs/globals/thickbox.css" type="text/css" media="screen">

Oben im Editor auf "Quellcode". Und gleich zu Beginn im Seiteninhalt einfügen.
Und den HTML-Code für das Bild, den platziert Ihr im Seiteninhalt dort, wo das Bild sitzen soll.
Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :9 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben