CSS3 InfoBox mit jQuery oder CSS

Heute wollte ich mich kurz damit auseinander setzten, wie man eine InfoBox für Begriffe in einem Text programmiert. Dazu soll unter dem Begriff ein kleines Fenster, entweder mit jQuery oder durch eine einfache CSS verkettung angezeigt werden. Außerdem wollte ich wieder ein wenig CSS3 Effekte für die InfoBox einsetzten. Kommen wir zuerst zu der Gestaltung mit CSS:

/*Der zu erklärende Begriff*/

.info{

color:#444;
background-color:#DDD;
position: relative;
}

/*Die InfoBox*/

.infotext{
font-size:0.75em;
padding:5px;width:200px;display:none;
position:absolute;top:25px;left:0px;
background-color:#000;color:#FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 7px #000;
-webkit-box-shadow: 0px 0px 7px #000;
box-shadow: 0px 0px 7px #000 ;
border:1pt solid #666;
}
Und so sieht der HTML Code dazu aus:
Dies ist ein
<span class=“info“>Flie&szlig;text
<span class=“infotext“>Beschreibung des Wortes</span>
</span>
. Weiter im Text…

CSS Lösung

Für eine einfache CSS Lösung muss die :hover Eigenschaft verwendet werden:

.info:hover .infotext{display:inline;}

jQuery Lösung

Hier wird das hover() Event genutzt und die Box wird mit show() animiert geöffnet. Hier nun der Code:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js“></script&gt;
<script type=“text/javascript“ language=“javascript“ charset=“utf-8″>
// <![CDATA[
$(document).ready(function(){
$(’span.info‘).hover(function(){
$(this).find(’span.infotext‘).show(„fast“);
},function(){
$(this).find(’span.infotext‘).hide(„fast“);
});
});
// ]]>
</script>

Hier nun das Ergebis:

jQuery – Polaroid Galerie

Mein zweiter Versuch mit jQuery bezog sich jetzt auf eine kleine Bildergalerie in Form von Polaroid Fotos mit einer kleinen Beschriftung am Ende des Bildes. Dabei sollten die Bilder auf der Seite verschoben werden und mit einem Doppelklick vergrößert werden können. Die grafische Darstellung wurde wieder mit ein wenig CSS3 verfeinert (Schlagschatten).

Die Dragfunktion ist hier in einer externen jQuery Erweiterung untergebracht „jQuery UI“ (User Interface), die auch wieder unter der Google API zu finden ist:

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js„></script>

Somit konnte einfach ein $(„.polaroid“).draggable({}); angewendet werden um die Bilder verschieben zu können. Alle weiteren Infos können in den Manuals zu jQuery UI gelesen werden. Dort sind auch Beispiele geschrieben.

Hier nun erst einmal das Ergebnis:

Wenn Ihr Fragen, Anmerkungen oder Verbesserungsvorschläge habt könnt Ihr einfach ein Kommentar hinterlassen.