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).
-
Schloss in Glücksburg
Die Aufanhme entstand im August 2014 mit einer Canon EOS 600D -
Mühle bei Munkbrarup
Typ Kellerholländer. Erbaut 1870.
Fotografiert im August 2014.
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.
Info zum Login
Auf der Seite "Forum" habe ich den Login in die rechte Box platziert. Alle anderen rechte Boxen sind nur hier "unsichtbar".Beschreibung: Login in Box
FB Messenger:
Anklicken und im Messenger schreiben
weitere Tutorials :
Seitentipps
Testbox 1
Testbox 2
