jQuery Hover Effekt für Bilder / Hover Effekt für div / img Tags

jQuery ist eine feine Sache – Es ermöglicht unter anderem die Fancy Fancybox aber auch alle anderen tollen Dinge im Web.

Wie es mit jQuery möglich ist, einen fancy Hover Effekt zu erstellen, erfährt man nach dem Klick.

Demo

Demo

Erklärung

Zuerst einmal wird jQuery benötigt (bevorzugt in der aktuellsten Version).
Diese wird zusammen mit dem Javascript für den Hover Effekt im Header Bereich der HTML Datei eingebunden.

[code lang=“html“]

[…][/code]

Dazu erstellen wir uns die Datei hover.js mit folgendem Inhalt:
[code lang=“javascript“]var Header = {
addFade : function(selector){
$(„“).css(„display“, „none“).prependTo($(selector));
$(selector+“ a“).bind(„mouseenter“,function(){
$(selector+“ .hover“).fadeIn(„slow“);
});
$(selector+“ a“).bind(„mouseleave“,function(){
$(selector+“ .hover“).fadeOut(„slow“);
});
}
};

$(function(){
Header.addFade(„#fake_hover_header“);
});[/code]

Wir erweitern noch unser obiges HTML mit dem Hover DIV
[code lang=“html“]

[/code]

Somit wird über dem div „fake_hover_header“ das span Element hover gelegt – Da dies aber beim Aufruf der Seite nicht angezeigt werden soll, sondern erst wenn mit der Maus darüber gefahren wird, sagen wir display:none.
Über den a href kann dann noch ein Link gesetzt werden.

Das Stylesheet muss noch an dem gegebenen Bild angepasst werden:
[code lang=“css“]/*Fake Hover Header */
#fake_hover_header {
width: 200px;
height: 199px;
position: relative;
background: url(./images/hover.png) no-repeat 0 0;
margin: 0 auto;
margin-top: 100px;
}
#fake_hover_header a {
position: absolute;
width: 200px;
height: 199px;
display: block;
border: none;
background: transparent;
overflow: hidden;
}
#fake_hover_header .hover{
width: 200px;
height: 199px;
display: block;
position: absolute;
background: url(./images/hover.png) no-repeat 0 -199px;
}[/code]

Das Bild in dem Beispiel hat die Maße 200px x 398px – Da immer nur die hälfte angezeigt werden soll, sagen wir:
[code lang=“css“]width: 200px;
height: 199px;
background: url(./images/hover.png) no-repeat 0 0;
/* Der Hover soll dann den Bildbereich ab 199px abwaerts anzeigen */
background: url(./images/hover.png) no-repeat 0 -199px;
[/code]

Siehe hierzu folgendes Bild:

Es ist sinnvoll die zwei Bilder in einem zu kombinieren – Dies schließt aus, dass das Bild erst geladen wird, wenn der Benutzer mit der Maus über das Bild fährt – Und somit eine Verzögerung der Darstellung erhält aufgrund des Nachladens des Bildes.

Sämtliche Höhen und Längenangaben im StyleSheet sind daher auf das eigene Bild anzupassen.

Download

Das Beispiel steht natürlich auch als fertiges Paket zum Download bereit.
Download