|
|||
jquery Bild-Src tauschen und ein"faden"
Hallo,
ich tausche mit jquery über Code:
$(document).ready(function(){ $('.haro').click(function(){ $("#teambild").attr('src',"bilder/team/haro.jpg"); }); $('.jukl').click(function(){ $("#teambild").attr('src',"bilder/team/jukl.jpg"); }); $('.karo').click(function(){ $("#teambild").attr('src',"bilder/team/karo.jpg"); }); }); ...nur: wie bekomm ich es jetzt hin, dass das neue Bild mit fadeIn soft eingeblendet wird? Auch googleln half mir leider nicht weiter...hat jemand von Euch eine Tip? Denkbar dankbar über Hilfe Michael |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Viele Grüße Michael |
|
||||
Hi,
ich würde es so machen. Code:
<!DOCTYPE HTML> <html> <head> <title>Image</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> function change_image(bild){ $('#teambild').fadeOut('slow', function() { $("#teambild").attr("src", bild); $('#teambild').fadeIn('slow'); }); } </script> </head> <body> <div class="haro" onclick="change_image('Bild1.png')">haro</div> <div class="jukl" onclick="change_image('Bild2.png')">haro</div> <div class="karo" onclick="change_image('Bild3.png')">haro</div> <img src="Bild.png" id="teambild" alt="image" > </body> </html> |
|
|||
Zitat:
|
|
|||
Bilder austauschen
Zitat:
Danke erstmal fürs Spicken dürfen Habe versucht mir dieses Script zu klauen und in meines zu integrieren, da ich so etwas auch machen will. Aber ich kriegs nicht wirklich hin, weil a) Anfänger b) ich es vermischen will mit einem anderen recht komplexen jQuery Scirpt, das zugleich die Bilder an die Browserfenstergröße anpasst, auch wenn man dieses live verändert, was ich sehr klasse finde. Nun möchte ich aber noch, dass diese sich skalierenden Bilder – genau in der Art wie Ihr es hier gemacht habt – faden und abwechseln. Ich habe das Gefühl das geht, habe auch viel probiert, habs aber leider nicht hinbekommen Habt Ihr7bzw. Du, Chris2011 Lust da mal draufzuschauen und mir einen Tipp zu geben? Mein bisheriger Code ist komplett: <!DOCTYPE html> <html> <head> <style> body { background-color: #ffffff; } * { padding-left:6px; padding-right:6px; margin-top: 0.24%; } .fit { max-width: 100%; max-height: 100%; } .center { display: block; margin-left:auto; margin-right:auto; } img { border-style: none; } a:focus { outline: 0; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="JavaScript"> function nextLetter() { $('#a').fadeOut(300, 'linear') } function set_body_height() { var wh = $(window).height(); $('body').attr('style', 'height:' + wh + 'px;'); } $(document).ready(function() { if (document.width > 1000) { window.resizeTo(document.width/2.7, document.height/1.2); } else { window.resizeTo(document.width/1.9, document.height); } set_body_height(); $(window).bind('resize', function() { set_body_height(); }); }); </script> </head> <body> <div id="a"><img id="the_pic_3" class="center fit" src="images/Memoir_a.gif"></div> <div id="g"><img id="the_pic" class="center fit" src="images/Memoir_g.gif"></div> <div id="y"><img id="the_pic_2" class="center fit" src="images/Memoir_y.gif"></div> <div style="position: fixed; right: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;"><a href="javascript:top.window.close()"><img src="images/Arrow_left_pos.png"></a></div> <div style="position: fixed; left: 50%; bottom: 5%; height: 47px; width: 50px; cursorointer;" onclick="nextLetter()"><img src="images/Arrow_right_pos.png"></div> </body> </html> Die unteren divs mit den Pfeilen (arrows) sind erstmal uninteressant. (über die Pfeile will ich das dann via onclick steuern) Was mir schleierhaft ist, ist das mit den Bild src, Bild1, Bild2 etc. das will mir nicht in den Kopf. Meine 3 Bilder heissen „Memoir_a.gif“, „Memoir_g.gif“ und „Memoir_y.gif“. habe auch versucht sie in Bild1 etc. umzutaufen, hat aber auch nicht geklappt. Komplex wahrscheinlich, weil ja beide Funktionen parallel laufen müssen. Geht das überhaupt Eurer Ansicht nach? Schöne Grüße und herzlichen Dank schon vorab für Euer Interesse! Garavani |
Sponsored Links |
|
|||
Hallo Chris2011,
vielen Dank für dein kleines Bildwechselscript Auf der Basis habe ich folgenden Bildwechsel erstellt. Bei Klick auf Kunden wir das Headerbild gewechselt, nun möchte ich aber auf erneuten Klick auf Kunden wieder zum ursprünglichen Bild zurück. Kriege es zum Verrecken nicht hin, kannst du oder gerne jemand anderes mir einen Tipp geben? Wäre echt prima ... Code:
<script> function change_image(bild){ $('#header').fadeOut('slow', function() { $("#header").attr("src", bild); $('#header').fadeIn('slow'); }); } </script> <div id "top_píc"><img src="_pics/top_erfahrung.jpg" id="header" alt="image" width="960" height="250" alt="Vertrauen ist die Basis unserer Zusammenarbeit." /></div> <span class="header" onclick="change_image('_pics/top_kunden.jpg')"><span class="underline"><a href="#" class="underline_red">Kunden</a></span></span> Viele Grüße, Jürgen |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jQuery: Bild an Div anpassen | sepp88 | Javascript & Ajax | 3 | 22.07.2011 10:22 |
jQuery - Neuen DIV erzeugen und anzeigen | EntenMann | Javascript & Ajax | 0 | 11.08.2009 21:07 |
Imagemap Zugriff bei einer Gallery | Sarah14 | Javascript & Ajax | 3 | 12.11.2007 15:06 |
Anfänger: Bild mit Link - Bild tauschen wenn visited | oli | CSS | 3 | 26.09.2004 14:03 |