Tutorial JavaScript Funktion zum Einblenden eines Bildes

Dieses FadeIn und FadeOut (Ein- Ausblenden) beruht auf einer CSS und einem JavaScript. Beispiel mehrerer Hover Bilder mit Erklärung unten.

Zieht Euch zunächst das Bild auf, bei dem der Hover-Effekt angewendet werden soll und gebt diesem Bild die IDdiv1” aus dem JavaScript:

div1

Bild ID

Fügt die Style-Anweisung (CSS) unten in die HTML von Eurem Layout “Zwischen Head Tags” ein. Hier als Beispiel von meinen “NOF-Tutorials Logo”, welches 400px breit und 400px hoch ist und bei Mausüber einfaden soll.

Dieses Bild kennt NOF noch nicht und es muss daher zunächst in der “Assets-Verwaltung” mittels der rechten Maustaste eingelesen werden und das Häkchen muss bei “Datei immer publizieren” gesetzt sein. So wird NOF dieses Bild auch sogleich lokal und entfernt mit publizieren. Achtet hier auf die korrekte relative Pfadangabe zu diesem Bild, was in meinem Beispiel im gleichen Verzeichnis wie meine Seite liegt.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<style>
    #div2 {
        width: 400px;
        height: 400px;
        background: url('logo.png');
        position: absolute;
        display: none;
    }
</style>

Das JavaScript mit der Funktion, die das Bild ‘logo.png’ erscheinen lassen soll, sieht hier so aus. Dieses Skript gehört auch in die HTML vom Layout:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Ende des Haupttextes

<script>
       $(function() {
       $('#div1').hover(function() {
           $('#div2').fadeIn(1000);
       }, function() {
           $('#div2').fadeOut(1000);
       });
       });
</script>

Kurze Erklärung zum Skript:

  • #div1 ist die ID vom aufgezogenem kleinen Bild von meinem Buch, die ich diesem Bild als ID gegeben habe
  • #div2 ist die ID vom großen Bild (logo.png) was ein- und ausfaden soll. Hierbei wird die Zeit in Millisekunden eingetragen - hier 1000

... unten ein Screenshot der Seiten-HTML vom Layout.

Seiten HTML

Jetzt zieht Ihr Euch ein Textfeld an beliebiger Stelle auf Eurer Seite auf, dort wo das große Bild bei Maus über dem kleinen Bild erscheinen soll und tragt die in der CSS und im JavaScript definierte DIV-ID vom “div2” (logo.png) ein.

<div id="div2"></div>

HTML Code

 

Noch eine kurze Erklärung zu meinem 2. Beispiel mit mehreren Hover-Bildern. Hier habe ich genau die gleichen Einstellungen vorgenommen, nur eben hat jedes Bild und jedes Icon seine eigene ID erhalten und ich habe die CSS, das DIV und das Script entsprechend erweitert. Die HTML-Ausgabe habe ich auf “HTML5” (festes Seitenlayout) gestellt, damit ich das Textfeld mit den DIVs direkt auf dem Bild platzieren kann.

Die CSS der 3 Bilder:

<style>

    #div1 {
        width: 840px;
        height: 640px;
        background: url('harfe.jpg');
        position: absolute;
        display: none;
    }
   
    #div2 {
        width: 840px;
        height: 640px;
        background: url('baum.jpg');
        position: absolute;
        display: none;
    }
   
    #div3 {
        width: 840px;
        height: 640px;
        background: url('wegweiser.jpg');
        position: absolute;
        display: none;
    }
       
</style>

Die DIV IDs in der HTML vom Textfeld, die den 3 Bildern zugeordnet sind:

<div id="div1"></div><div id="div2"></div><div id="div3"></div>

Das Script mit der jeweiligen ID der 3 Icons:

<script>
       $(function() {
      
       $('#divharfe').hover(function() {
           $('#div1').fadeIn(2000);
       }, function() {
           $('#div1').fadeOut(1000);
       });
      
       $('#divbaum').hover(function() {
           $('#div2').fadeIn(2000);
       }, function() {
           $('#div2').fadeOut(1000);
       });
      
       $('#divwegweiser').hover(function() {
           $('#div3').fadeIn(2000);
       }, function() {
           $('#div3').fadeOut(1000);
       });
      
       });
</script>

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik