Tutorial Infobox

Die jQuery Tooltip Boxen werden auf dieser Seite leicht transparent angezeigt und ich habe unten drei unterschiedlichen ID-Konfigurationen eingebaut:

  • Slide - bei Mouseover
     
        • Explode - bei Mouseout explodiert diese Box
           
              • Move Down - bei Mouseover bewegt sich die Box nach unten

Hier ist meine CSS für diese Box, die sich auf die Class “box” bezieht und die Ihr natürlich beliebig anpassen könnt. Ich habe diese Style-Anweisung hier, damit man sie auch im Quelltext sieht, “Zwischen Head Tags” meines Layouts kopiert.

<style type="text/css">
  a.box
  {
    background-color: #E0E0E0;
    color: #173C93;
    padding: 0px;
    text-decoration: underline
  }
  a.box:hover
  {
    cursor: help;
    background-color: #E0E0E0;
    color: #808080
  }
  a.box span
  {
    position: absolute;
    visibility: hidden;
    border-radius: 10px;
    margin-left: 2px;
    margin-top: -10px;
    padding: 8px;
    text-decoration: none
  }
  a.box:hover span
  {
    visibility: visible;
    border: 1px solid #808080;
    color: #000;
    background-color: #FDFEFF
  }
</style>

Da die Box innerhalb eines <span> Tags in der CSS definiert ist, kann man dieses <span> Tag in NOF nicht in den Link kopieren, daher habe ich hier den gesamten Link mit der class=”box” in den HTML-Code Editor eines Textfeldes kopiert, was Ihr an dem kleinen T Symbol erkennen könnt.

<a class="box" href="javascript:void();">Infobox<span>Infobox zu diesem Link</span></a>

oben mittels “javascript:void();” (ohne Seiten-Verlinkung). Ein Link, wie meiner hier zum NOF-Forum, würde dann z.B. so aussehen:

<a class="box" href="http://www.nof-schule.de/forum/" target="_blank">NOF-Forum<span>Stellt Eure Fragen bitte<br>in unserem <b>NOF-Forum</b></span></a>

Hier das Skript und meine CSS für diese Box, die Ihr natürlich beliebig anpassen könnt. Ich habe das Skript und die Style-Anweisung 
Zwischen Head Tags” in die HTML meines Layouts kopiert.

<script type="text/javascript" language="JavaScript">
<!--
var offsetx=20
var offsety=0

function InfoBoxAusblenden() {
      document.getElementById('InfoBox').style.visibility = "hidden";
}

function InfoBoxAnzeigen(e,Inhalte,offsetX,offsetY)
{
        if (offsetX) {offsetx=offsetX;} else {offsetx=20;}
        if (offsetY) {offsety=offsetY;} else {offsety=0;}
        var PositionX = 0;
        var PositionY = 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY)
        {
                PositionX = e.pageX;
                PositionY = e.pageY;
        }
        else if (e.clientX || e.clientY)
        {
                PositionX = e.clientX + document.body.scrollLeft;
                PositionY = e.clientY + document.body.scrollTop;
        }
        document.getElementById("BoxInhalte").innerHTML = Inhalte;
        document.getElementById('InfoBox').style.left = (PositionX+offsetx)+"px";
        document.getElementById('InfoBox').style.top = (PositionY+offsety)+"px";
        document.getElementById('InfoBox').style.visibility = "visible";
}
// -->
</script>


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

#InfoBox {
visibility:hidden;
position:absolute;
top:10px;
left:10px;
border-radius: 10px;
z-index:1;

/* diese Angaben können Sie anpassen */
width:200px;
background-color:#FDFEFF;
border:1px solid #808080;
}

/* weitere Box in der Info-Box für padding */
#BoxInnen {
padding:15px;
}

/* Formatierung Texte in der Info-Box */
#BoxInhalte {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color:#5F5F5F;
line-height:130%;
}

-->
</style>

Weiterhin gehört dieser <DIV> Bereich in die HTML des Layout am “Beginn des Haupttextes” (<BODY>).

<!-- Anfang DIV für die InfoBox -->
<div id="InfoBox" style="z-index:1; visibility:hidden;">
   <div id="BoxInnen"><span id="BoxInhalte"></span></div>
</div>
<!-- Ende DIV für die InfoBox -->

Nun setzt Ihr Euren Link (wie gewohnt) über den zu verlinkenden Text oder auch ein Bild. Hier habe ich wieder für die reine Anzeige der Box keine Seite, sondern “javascript:void();” gewählt, oder Ihr verlinkt eben zu einer internen oder externen Seite (wie gewohnt).

Dann gebt Ihr den Befehl “onMouseOver” und “onMouseOut” mit Bezug auf die Javscript-Funktionen in der Link-HTML “innen” an. Hierfür klickt Ihr auf den Button “HTML” (unten links) im Link-Fenster.

onMouseOver="InfoBoxAnzeigen(event,'Hier ist meine Infobox',20,-30);" onMouseOut="InfoBoxAusblenden();"

 

Infobox jQuery - von: jqueryui.com/tooltip/ - diese Box wird bei allen Objekten, die ein “title” Tag tragen (auch die Navi), angezeigt.

Hier ist mein gesamtes Skript für diese Box, oben die Verlinkungen zu den jQuery-Dateien, darunter die Skript-Funktion und dann die CSS, die Ihr natürlich beliebig anpassen könnt. Hier habe ich die Hintergrundfarbe der Box angepasst und eine Opacity von 0.9 (90%) gegeben (volle Deckkraft ist 1.0). Die Breite der Box mit 200px angegeben. Den Schrifttyp habe ich entfernt und dafür eine Schriftgröße von 10px angegeben und auch die Großschreibung innerhalb der Box.

Ich habe diesen gesamten Code unten ...

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
$( document ).tooltip({
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>


<style>
.ui-tooltip, .arrow:after {
background: rgba(244, 244, 244, 1.0);
border: 1px solid grey;
width: 200px;
}
.ui-tooltip {
padding: 10px 20px;
color: #000000;
border-radius: 20px;
font-size: 10px;
/*font: bold 14px "Helvetica Neue", Sans-Serif;*/
/*text-transform: uppercase;*/
box-shadow: 0 0 7px #808080;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>

... in den <>Code Editor der HTML-Seite in den [Custom4] Bereich eingefügt, da NOF nicht mit diesen neuen jQuery-Dateien zurecht kommt, müssen diese unter den jQuery-Dateien von NOF und unter der CSS von NOF stehen.

Dazu klickt Ihr unten links auf der Arbeitsseite auf <>Code.

Bitte guckt Euch weitere Optionen der Animation dieser Tooltip Box bei jqueryui.com/tooltip/ an.

Hier noch die Funktionen der ganz oben gezeigten Animationen, die mittels ID angezeigt werden, also z.B. id=”show-option”. Denkt daran, dass man eine ID immer nur einmalig anwenden kann. Wollt Ihr eine dieser IDs für den gesamten <BODY> verwenden, dann gehört diese “in das Haupttext-Tag” des Layouts.

<script>
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 250
}
});
$( "#hide-option" ).tooltip({
hide: {
effect: "explode",
delay: 250
}
});
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
</script>

Guckt Euch auch als Alternative meine Beschreibungen zu “Overlib Skript” an sowie diese Varianten des jQuery-UI Foto-Managers und einer einfachen CSS.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik