ich hab ein ärgerliches Problem mit einem Javascript Zoom-Effekt. Vorweg gleich mal: Ich hab das Script nicht selber geschrieben und bin auch nicht gerade der Experte für JS.
Wie dem auch sei... das Script an sich funktioniert Auch mit 2 oder mehr Bildern. Nur hab ich jetzt eigentlich das Problem, dass wenn ich ein Bild im Hochformat habe, dieses wie ein Querformatiges gezoomt wird.
Ich habe schon versucht, das Script zwei mal einzubinden, sodass das eine script für quer und das andere für hoch ist. Dummerweise funktioniert immer nur eines Also nur ein Bild wird gezoomt.
Hoffe mir kann jemand zeigen, wie ich das hinbekomme, dass die unterschiedlichen Bilder gezoomt werden können.
// JavaScript Bilder Zoom function zoomImages(PIXEL) { function getAllImages() { images = document.getElementsByTagName('img'); // Alle Bilder for(i = 0;i < images.length;i++) // Bilder einzeln durchgehen { image = images[i]; // Momentanes Bild in Variable für einfachere Schreibweise if(image.className) // Wenn das Attribute class vorhanden ist { if(image.className.match(/zoom/i)) // Wenn in der Klasse / den Klassen zoom vorhanden ist { image.onmouseover = function() // Beim überfahren { zoomIn(this); // Funktionsaufruf mit aktivem Bild als Parameter } image.onmouseout = function() // Beim verlassen des Bildes { zoomOut(this); // Funktionsaufruf mit aktivem Bild als Parameter } } } } } function zoomIn(IMAGE) { n = 0; for(i = 1;i <= PIXEL;i++) // Pixel für Pixel window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3); } function zoomOut(IMAGE) { n = 0; for(i = 1;i <= PIXEL;i++) // Pixel für Pixel window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4); } getAllImages(); } window.onload = function() { zoomImages(100); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll }
Dieser Beitrag wurde von J000S bearbeitet: 21. November 2011 - 09:10