Bild bei gleichbleibenden Außenmaßen onmousover zoomen

[Sven]

Hallo zusammen!

Habt ihr Ideen, wie ich die Zoom-Funktion von [1] ohne Flash (also mit JavaScript?) nachbilden kann? Es geht darum beim mousover ein Stück in das Bild hinzuzoomen, wobei das Bild an sich gleich groß bleibt.

Ich kenne mich im Bereich JavaScript leider nur sehr wenig aus. Über Code-Beispiele würde ich mich deshalb besonders freuen. Selbstverständlich ist mir aber jeder Link oder Suchbegriff eine Hilfe.

Danke,
Sven

[1] http://www.templatehelp.com/preset/pr_preview.php?i=29916&pr_code=VkFvI7uOg5ZRCiGP2FzEvXjI17v0Pu

[bleicher]

Grüße,
würdest du auch css akzeptieren?
MFG
bleicher

[Sven]

würdest du auch css akzeptieren?

Na klar, umso besser! Dann muss ich auch kein JavaScript voraussetzen.

[Gunnar Bittersmann]

@@Sven:

nuqneH

würdest du auch css akzeptieren?
Na klar, umso besser!

Gib dem Bild einen Rahmen ('div') entsprechender Größe und sorge dafür, dass auch das vergrößerte Bild <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=nicht aus dem Rahmen> fällt.

Dem http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=gehoverten Bild gibst du die gewünschte Größe und wählst per <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=relativer Positionierung> den gewünschten Ausschnitt.

Qapla'

[Sven]

Gib dem Bild einen Rahmen ('div') entsprechender Größe und sorge dafür, dass auch das vergrößerte Bild <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=nicht aus dem Rahmen> fällt.

Dem http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=gehoverten Bild gibst du die gewünschte Größe und wählst per <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=relativer Positionierung> den gewünschten Ausschnitt.

Ok, danke soweit für die schnelle Antwort. Das Vergrößern klappt nun auch. Lediglich der "Zooming"-Effekt fehlt noch. Jetzt springt das Bild von normal sofort auf einen vergrößerten Ausschnitt. Auf der Beispiel-Seite passiert dies jedoch langsam. Wie kann ich diesen Effekt mit CSS/JavaScript nachbilden?

[Gunnar Bittersmann]

@@Sven:

nuqneH

Lediglich der "Zooming"-Effekt fehlt noch. Jetzt springt das Bild von normal sofort auf einen vergrößerten Ausschnitt. Auf der Beispiel-Seite passiert dies jedoch langsam. Wie kann ich diesen Effekt mit CSS/JavaScript nachbilden?

Mit CSS 3. [CSS3-TRANSITIONS] Irgendwann.

Ansonsten musst du halt die sich ändernden Werte (width und/oder height, left, top) per JavaScript in kleinen http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=Intervallen schrittweise ändern.

Im einfachsten Fall linear: Wenn du vom Wert [latex]a_0[/latex] in [latex]n[/latex] Schritten zum Wert [latex]a_n[/latex] gelangen willst, musst du halt in jedem Schritt [latex]\frac{a_n - a_0}{n}[/latex] dazuadddieren.

Beim 'mouseover'-Event beendest du ein eventuell noch laufendes Intervall (das den Zoom-out-Effekt realisiert) und startest eins, das den Zoom-in-Effekt realisiert. Beim 'mouseout'-Event andersrum.

Qapla'

[Sven]

Ansonsten musst du halt die sich ändernden Werte (width und/oder height, left, top) per JavaScript in kleinen http://de.selfhtml.org/javascript/objekte/window.htm#set_interval@title=Intervallen schrittweise ändern.

Ich hab das jetzt mal in einer Schleife realisiert, die das Bild pixelweise auf die gewünschte Größe zoomt. Allerdings scheint die Schleife so schnell abzulaufen, dass es immer noch springt.

for( i=1; i<=100; i=i+5 ) {  
	image.style.width = (200 + i) + "px";  
	image.style.height = (300 + i) + "px";  
}

Via [1] bin ich zu folgender Modifikation gekommen. Allerdings wird das Bild hier um 1 Pixel vergrößert und anschließend stoppt das Zoomen. Denkfehler?

function countdown (i) {  
  	if (i == undefined) {  
    		i = 1;  
    	}  
    	if (i <= 100) {  
    		i++;  
    		var timeout = window.setTimeout("countdown(" + i + ")", 100);  
    		image.style.width = (200 + i) + "px";  
		image.style.height = (300 + i) + "px";  
    	}  
}  
countdown();

Danke,
Sven

[1] http://aktuell.de.selfhtml.org/artikel/javascript/timer/

[Sven]

function countdown (i) {

if (i == undefined) {
     i = 1;
     }
     if (i <= 100) {
     i++;
     var timeout = window.setTimeout("countdown(" + i + ")", 100);
     image.style.width = (200 + i) + "px";
image.style.height = (300 + i) + "px";
     }
}
countdown();

  
Sorry, die Größenänderungen müssen zwischen die beiden if-Schleifen. Bei obigem Code passiert gar nichts.