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.

<header><!-- jQuery einbinden -->
<script type="text/javascript" src="./includes/jquery.js"></script>
 <!-- Hover JS einbinden -->
<script type="text/javascript" src="./includes/hover.js"></script></header>[...]

Dazu erstellen wir uns die Datei hover.js mit folgendem Inhalt:

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");
});

Wir erweitern noch unser obiges HTML mit dem Hover DIV

<!-- Hover Header -->
<div id="fake_hover_header">
    <span class="hover" style="display:none"></span>
    <a href="#" title=""></a>
</div>
<!-- Hover Header End -->

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:

/*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;
}

Das Bild in dem Beispiel hat die Maße 200px x 398px – Da immer nur die hälfte angezeigt werden soll, sagen wir:

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;

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

Dieser Beitrag wurde unter CSS, JavaScript abgelegt und mit , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

3 Antworten auf jQuery Hover Effekt für Bilder / Hover Effekt für div / img Tags

  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.