Infobox mittels jQuery und Bild
Diese jQuery-Box wird nicht korrekt im IE8 oder älter angezeigt. Hier mit deckender Box. Im Tutorial weitere Optionen und mit transparenter Box.
Skript Tooltip von: jqueryui.com/tooltip/ und unten noch ein zusätzliches Skript zum Anzeigen von Bildern als Tooltip.
Diese Links sind ein Beispiel mit dem Bild vom Elefanten und dem Löwen mit der jQuery-UI Box. Hier habe ich für jedes Bild eine eigene Funktion mit einer eigenen ID erstellt, daher bietet sich diese Lösung nicht wirklich optimal an. Für diese Funktion fügt Ihr noch dieses Skript zusätzlich, wie auf meiner Tutorialseite beschrieben, in den <>Code Editor der HTML-Seite ein. Tragt den Pfad zum Bild ein und gebt dann dem Link diese ID.
Hier im Beispiel id=”elefant”.
<script>
$(function() {
$( "#elefant" ).tooltip({
content: '<img src="./Elefant.jpg" />',
position: {
my: "center bottom-15",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
</script>
Zusätzliches Skript und Tutorial “Bild im Tooltip” - von: cssglobe.com
Hallo das ist ein Text für eine Toolbox mit einem Bild und hier geht es zu unserem NOF-Forum. Ebenso kann man das auch mit Bilder machen.
Ladet Euch die Skripte von cssglobe.com herunter und entpackt das Verzeichnis “tooltip.zip”. Ihr erhaltet 3 Verzeichnisse 01, 02 und 03. Meine Beschreibung hier bezieht sich auf die Skripte im Verzeichnis 03.
Ihr benötigt folgende Javascript-Dateien ...
- jquery.js - ich habe diese Datei umbenannt in jquery-bild.js, da NOF ja bereits eine eigene jQuery-Datei verwendet
- main.js
... die Ihr in die Assets-Verwaltung einlest und in die HTML des Layouts “Zwischen Head Tags” einfügt. Achtet auf die relative Pfadangaben.
Weiterhin seht Ihr unten meine CSS mit der ID “screenshot”, die Ihr natürlich beliebig anpassen könnt.
<script src="./jquery-bild.js" type="text/javascript"></script>
<script src="./main.js" type="text/javascript"></script>
<style>
#screenshot{
position:absolute;
border:1px solid #808080;
border-radius: 10px;
box-shadow: 3px 3px 6px #808080;
background: rgba(244, 244, 244, 0.9);
padding:5px;
display:none;
color:#808080;
}
</style>
Jetzt müsst Ihr Eurem Link oder einem Javascript “void” Link (ohne Verlinkung) lediglich die class="screenshot" in der Objekt-HTML (innen) des Links geben. Das rel Attribut verlinkt auf das Bild, hier müsst Ihr natürlich die relative Pfadangabe zu Eurem Bild anpassen. Der Titel des title Attributs wird unten in der Toolbox angezeigt, wobei in diesem Beispiel der Befehl <br> einen Zeilenumbruch in dem Titel erzeugt. Ebenso macht Ihr es auch bei den Bildern.
class="screenshot" rel="../NOF-Hilfe-Tommy.png" title="NOF Tutorials und Hilfe<br>von Tommy"
Viel Erfolg!
