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

E-Commerce IT-Consulting and Development

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

Fake Hovering a Div
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

 

3 Antworten

  1. Heiko sagt:

    Hi,

    ich finde die Anleitung und Idee großartig, danke dafür! Damit würde ich gern das Captivate Bild auf meiner Band Website (s. Link) ersetzen. Die Idee dabei ist, den Namen eines Musikers beim Hover über den jeweiligen Kopf einzublenden. Aus diesem Beispiel habe ich nicht ableiten können, wie ich den Hover Effekt dreifach platzieren kann. Ist das überhaupt möglich, und wenn ja, wie? Danke für jeden Tipp.

    Beste Grüße,
    Heiko (der Langhaarige auf dem Bild)

  2. du müsstest das Bild dann wirklich dreiteilen und jedes Bild einzeln ansprechen. Per CSS kannst du die Bilder dann wieder aneinander setzen.
    Ich bin gespannt ob du es so hinbekommst 🙂

  3. Cool, danke für den Tipp. Das werde ich probieren.
    Ist es übrigens bekannt, dass die Hover Demo in IE9 nicht sauber überlagert? Das Hover Bild ist um die Hälfte der Bildbreite nach rechts versetzt. Ist das ein Individual Bug in meiner Browser Instanz?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen