Mr. Tommes Geschrieben 21. März 2013 Geschrieben 21. März 2013 Hallo zusammen, mein Chef ist letztens auf eine Seite gestoßen: TWILIGHT | BELUX und hat dort einen Effekt gesehen. Bei einem Bild hat man einen Button "ON" und einen "OFF". Wenn man dort drauf klickt, dann wird ein anderes Bild geladen. Hat dann den Effekt, als würde man das Licht an bzw. aus machen. Er meinte zu mir, ich solle das mal nachbauen. Leider habe ich bislang keine Ahnung. Habe herausgefunden, dass das mit ner brainbox in Verbindung mit jQuery geht. Kann mir jemand weiterhelfen? Oder vielleicht sogar so ein Beispiel mal zukommen lassen? Ich verzweifel langsam ein wenig. Vielen Dank schonmal. Gruß Thomas Zitieren
Patrick_C64 Geschrieben 21. März 2013 Geschrieben 21. März 2013 (bearbeitet) <!-- header ?? nö heute nich --> <html> <head> <style> .btn{ background-color:blue; display:inline-block; padding:20px; border:1px solid black; position:absolute; bottom:5px; } .btn:hover{ background-color:#aaa; } #on{ left:10px; z-index:2; } #off{ right:10px; z-index:2; } #container{ position:absolute; top:200px; left:200px; border:1px solid black; display:inline-block; width:200px; height:200px; } #imgDsp{ width:200px; height:200px; } </style> </head> <body> <div id="container"> <img id="imgDsp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9toBtHaB_krIcw6ayQlMpr_1d-t3nR_yFsmngHB3ylA6tKhXWlg"/> <div id="on" class="btn" onClick="imgOn()"> On </div> <div id="off" class="btn" onClick="imgOff()"> Off </div> </div> </body> <script type="text/javascript"> function imgOn(){ document.getElementById("imgDsp").src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_on.jpg"; } function imgOff(){ document.getElementById("imgDsp").src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_off.jpg"; } </script> </html> [/code] Getestet in IE & FF! Du schuldest mir jetzt 20 minuten *grins! Guck ob Du's als Inspiration verwenden kannst, Anregung genug sollte es sein! PS: Finger weg von Erdnüssen! Bearbeitet 21. März 2013 von Patrick_C64 Zitieren
Mr. Tommes Geschrieben 22. März 2013 Autor Geschrieben 22. März 2013 Vielen Dank !!!! Das hilft mir wirklich sehr weiter! Genau so was habe ich gesucht. Und danke für deine 20 Minuten ! Zitieren
Mr. Tommes Geschrieben 25. April 2013 Autor Geschrieben 25. April 2013 Hallo nochmal, hänge doch noch an diesem Problem. Ich habe mir jetzt Snippets zusammengesucht und auch die Sachen von Patrick_C64 eingebaut und folgendes (s. Anhang) zusammenbekommen. Leider bekomme ich es nicht hin, dass sich das Bild verändert wenn ich ein Beispielbild anklicke. Dieses wird dann groß angezeigt und ich habe dort auch zwei Button hin bekommen. Einen On und einen OFF Button. Nur leider verändert sich nicht das Bild, das sich verändern soll. Es liegt an der Bezeichnung der ID, aber ich weiss nicht, was ich da abändern soll. Also wenn noch jemand 20 Minuten seiner Zeit opfern mag, fänd ich es klasse, wenn sich jemand meinen Anhang mal angucken könnte. neuer Test.rar Zitieren
rny Geschrieben 27. April 2013 Geschrieben 27. April 2013 Hi, ich hab mal kurz drübergeschaut und ein paar Punkte fallen dann doch auf: 1. Auf belux.com werden jeweils zwei verschiedene Bilder (xyz_on.jpg & xyz_off.jpg) benutzt. Mit einem Klick auf On/Off wird dann das entsprechende Bild geladen. Im Moment benutzt du jeweils nur eins, daher kann das im Moment mit den Bildern in deinem Ordner nicht funktionieren. Ausnahme ist das eine funktionierende Bild, hier verlinkst du direkt auf belux.com, daher sind "on" und "off" Variante verfügbar. Um dieses Problemchen zu lösen könntest du erstmal von jedem großen Bild das du benutzt eine Kopie machen und es mit Paint (oder einem ähnlich professionellem Bildbearbeitungsprogramm) etwas verändern und entsprechend umbenennen. 2. Deine imgOff() und imgOn() Funktion holt sich das Bild über die ID ('imgDsp') und trifft daher nur das Bild von belux.com. Um das zu umgehen könntest du dir als Workaroung das Bild zum Beispiel über die Klasse holen, in dem Fall wäre das 'fancybox-image'. Das ist allerdings eher hässlich, optimal wäre eine ID für die fancybox. 3. In den Funktionen ist im Moment auch direkt auf ein Bild auf belux verlinkt. Du musst hier eigentlich nur das src-Attribut des Bildes entsprechende ändern um das jeweils andere Bild anzuzeigen. ("src.replace('off','on')" oder so) Ist keine Patentlösung, ich würds allgemein etwas anders machen, aber sollte schonmal etwas weiterhelfen. Wenn noch Fragen da sind, einfach fragen Zitieren
Mr. Tommes Geschrieben 30. April 2013 Autor Geschrieben 30. April 2013 Hallo rny, vielen Dank für deinen Beitrag. Das mit den unterschiedlichen Bildern ist mir bewusst. Ich weiss nur nicht, wie ich das mit der ID umsetzen kann, bzw. wo ich dem "vergrößerten" Bild eine ID geben kann, damit das Bild in der fancybox geändert wird. Das Bild, das momentan klappt, ist ja in einem div und das image hat direkt eine ID. Das kann ich nachvollziehen. Wenn man jetzt aber auf ein kleines Bild klickt, wird dieses ja vergrößert. Dort möchte ich ja die Funktion einbauen. Leider weiss ich nicht, wo ich da eine ID einbauen kann oder wie ich die Klasse ansprechen kann. Vielleicht hast du da noch ein paar Tips für mich. Zitieren
rny Geschrieben 30. April 2013 Geschrieben 30. April 2013 (bearbeitet) Ich schau von zuhause nochmal genauer, aber mit etwas in dieser Richtung solltest du das große Bild über die Klasse treffen. document.getElementsByClassName("fancybox-image")[0] edit: Achja, IE8 und niedriger kommt mit getElementsByClassName wohl nicht klar. Nicht sicher ob das für dich wichtig ist. Bearbeitet 30. April 2013 von rny Zitieren
Mr. Tommes Geschrieben 16. Mai 2013 Autor Geschrieben 16. Mai 2013 Hallo, vielen Dank. Das Ansprechen über die Klasse hat geklappt. Jetzt habe ich nur noch ein Problem. Wenn ich auf ein kleines Bild klicke öffnet sich das große Bild. Wenn ich dort auf ON oder OFF klicke ändert sich das Bild, jedoch ist das neue Bild fest angegeben, egal welches große Bild angezeigt wird: document.getElementsByClassName("fancybox-image")[0].src="http://www.belux.com/media/products/photographs/TWILIGHT/TWILIGHT_480px/TWI_227_on.jpg"; Wie bekomme ich es hin, dass sich das Zielbild je nach Quellbild entsprechend ändert? Über den Index scheint es nicht zu klappen. Also wenn ich Bild 1 groß habe und auf OFF klicke soll Bild 1 dunkel angezeigt werden (Bild als dunkle Version ist im Beispiel noch nicht enthalten). Entsprechend soll bei Bild 2 das Bild 2 dunkel angezeigt werden. Ich habe nochmals meinen Code als Anhang angefügt. Sorry für die vielen Fragen, aber auf dem Gebiet bin ich absoluter Laie neuer Test.rar Zitieren
rny Geschrieben 16. Mai 2013 Geschrieben 16. Mai 2013 Bin auf Arbeit und komme wegen der Firewall nicht an den Code. Aber im Prinzip musst du die erstmal Bilder sinnvoll benennen, (bild1_on, bild1_off, bild2_on, bild2_off etc..). Dann kannst du mit den click-funktionen jeweils das src Attribut des Elements ändern indem du "on" mit "off" ersetzt bzw umgekehrt. Der Code ist jetzt einfach runtergeschrieben und wahrscheinlich hab ich was essentielles vergessen, aber die Idee sollte klar werden: var img = document.getElementsByClassName("fancybox-image")[0]; function imageOn() { img.src = img.src.replace('off','on'); } function imageOff() { img.src=img.src.replace('on','off'); } Zitieren
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.