Tutorials von Thomas Frei-Herrmann

Mouseover und Mouseout


... mittels jQuery Fade-Effekt

Hier habe ich noch zusätzlich eine jQuery-Datei mit eingebaut um diesen weichen Übergang zu schaffen und ein kleines Skript von:

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/


Hierfür macht Ihr folgendes:

Zunächst kopiert Ihr Euch die beiden Fotos (hier “garten001.jpg” und “garten002.jpg”), die gewechselt werden sollen, in Euren Ordner “images” im Ordner der “Lokalen Publizierung” (um das auch schon lokal testen zu können) und mit Eurem FTP-Programm auf Euren Server:

/assets/images

Dann fügt Ihr folgende Verlinkung zu einer jQuery-Datei sowie das Skript und die CSS-Anweisung in den “Head-Bereich” Eurer Seite ein.

> auf Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” und das Skript unten “Zwischen Head Tags” einfügen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});
</script>

<style>
 
div.fadehover {
position: relative;
}
 
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
        }
 
img.b {
position: absolute;
left: 0;
top: 0;
}
 
</style>

... nun müsst Ihr lediglich noch einen “DIV-Container” mit den Angaben zur CSS-Class und den Fotos in den “Body-Bereich” Eurer Seite einbringen (dort wo das Wechsel-Foto erscheinen soll).

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Text” klicken
> und anschließend auf den Button “HTML” und das Skript unten einfügen.

Achtet bitte auf die relative Pfadangabe zu dem Ordner “images”. Hier mit einem Punkt ./, da ich das auf meiner Startseite (Home) eingebaut habe und das Verzeichnis “assets/images” sich bereits im gleichen Verzeichnis befindet. Auf einer Unterseite, die sich normalerweise im Ordner “html” befindet, müssten dann dort zwei Punkte hin, also ../ (gehe einen Ordner höher in das Stammverzeichnis)

<div class="fadehover">
   <img src="./assets/images/garten001.jpg" alt="Peonie" title=”im Garten” class="a" />
   <img src="./assets/images/garten002.jpg" alt="Tulpe" class="b" />
</div>

Viel Erfolg !