✔ jQuery Bildwechsel

supercat1510

supercat1510

Erfahrenes Mitglied
Ich beschäftige mich neuerdings etwas mit jQuery.

Hab z.B: einen netten Bildwechsel erstellt - ein großes Bild und daneben ein paar kleinere.
Wenn man nun über ein Thumbnail geht wird das große Bild ausgetauscht.

Leider hab ich es noch nicht hin bekommen, das das große Bild wieder zurückwechselt wenn man mit der Maus vom Bild geht.
Es ver allgemeinern, das ich einfach eintrage welches Bild nach Mouseout auftauchen soll geht auch nicht, da ich das script auf der Seite mehrmals auch für andere Bilder verwende.

HTML: 
<img src="http://www.tutorials.de/forum/images/bad_000.jpg" name="bild" width="400" height="300" class="imggalerie" id="bild" />

<div id="mylink"> <a href="/images/bad_001.jpg"><img src="/images/bad_001t.jpg"  width="100" height="100" border="0"  /></a>
<a href="/images/bad_002.jpg" target="_blank"><img src="/images/bad_002t.jpg" width="100" height="100" border="0"" /></a>
</div>

Hier der JQuery Code:
HTML: 
$(document).ready(function(){

        $("#mylink a").hover(
		function(){
          var largePath = $(this).attr("href");
          $("#bild").attr({ src: largePath });
           return false;
	});


});
 
Zuletzt bearbeitet:
Moin,

http://docs.jquery.com/Events/hover#overout
http://docs.jquery.com/Events/hover#overout hat gesagt.:
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires.
Zum Vergrößern anklicken....

Demnach benötigst du eine zweite Funktion, um wieder das Ursprungsbild zu laden, wenn die Maus das Objekt verlässt.

Leider hab ich es noch nicht hin bekommen, das das große Bild wieder zurückwechselt wenn man mit der Maus vom Bild geht.
Es ver allgemeinern, das ich einfach eintrage welches Bild nach Mouseout auftauchen soll geht auch nicht, da ich das script auf der Seite mehrmals auch für andere Bilder verwende.
Zum Vergrößern anklicken....
Die ID-Bezeichner #mylink und #bild müssen im Dokumentbaum eindeutig sein, dürfen darin also nicht mehrmals vergeben werden.

mfg Maik
 
Wie der code in etwa aussehen soll weiß ich - nur nicht wie man das ursprüngliche Bild wieder herstellt.

HTML: 
        $("#mylink a").hover(
		function(){
          var largePath = $(this).attr("href");
          $("#bild").attr({ src: largePath });
           return false;
		},
		function(){
			$("#bild").attr({ src: largePath }).remove();
		});
 
Javascript: 
$(document).ready(function(){

    $("#mylink a").hover(
        function(){
            var largePath = $(this).attr("href");
            $("#bild").attr({ src: largePath });
            return false;
        },
        function(){
            $("#bild").attr({
            src: "images/bad_000.jpg"
            });
        });
});

mfg Maik
 
Maik hat gesagt.:
Javascript: 
$(document).ready(function(){

    $("#mylink a").hover(
        function(){
            var largePath = $(this).attr("href");
            $("#bild").attr({ src: largePath });
            return false;
        },
        function(){
            $("#bild").attr({
            src: "http://www.tutorials.de/forum/images/bad_000.jpg"
            });
        });
});

mfg Maik
Zum Vergrößern anklicken....

Das kann ich dann aber nur für Bad verwenden - hab aber 10 Seiten auf der ich das Script nutze - Essecken, Küchen, Schlafzimmer etc.

Es müsste doch eigentlich ne möglichkeit geben den Ursprung von #bild wieder herzustellen
 
Hi,

du kannst das Ganze in eine Funktion verpacken, der du die IDs des Div übergibst, das die Links enthält (mylink) und die des Bildelements (bild). Damit ist das Script allgemein einsetzbar.

Zum Ausgangsbild:
Die Quelle des Ausgangsbilds wird beim erstmaligen over-Effekt in einem Atribut (old_src) gesichert. Damit kann die Grafik beim Verlassen des Mauszeigers jeweils wieder hergestellt werden.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
  toggleImg('mylink', 'bild');
});

function toggleImg(strDivID, strImgID){
  $("#"+strDivID+" a").hover(
    function(){
      var largePath = $(this).attr("href");

      // Beim Ersten over-Event das Ausgangsbild in Attribut schreiben
      if(typeof $('#'+strImgID).attr('old_src') == "undefined")
      	$("#"+strImgID).attr({ old_src:  $('#'+strImgID).attr('src')});

      $("#"+strImgID).attr({ src: largePath });
      return false;
    },
    function(){
      $("#"+strImgID).attr({src: $('#'+strImgID).attr('old_src')});
    });
}
</script>

</head>
<body>
<img src="bild1.gif" name="bild" width="400" height="300" class="imggalerie" id="bild" />

<div id="mylink">
  <a href="bild2.gif"><img src="bild2.gif"  width="100" height="100" border="0"  /></a>
  <a href="bild3.gif" target="_blank"><img src="bild3.gif" width="100" height="100" border="0" /></a>
</div>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück