Vergroesserung einer Grafik mit JavaScript und via MouseOver und MouseOut geht nicht.

[dsolianyi]

Hallo!

Habe folgendes Problem: ich habe eine Page, wo ein Grafik eingebettet ist (z.B. ein Portrait von jemanden). Wenn man jetzt mit der Maus darüberfährt wird aus einer Thumb-Grafik eine vergrösserte Version (sowas könnte man z.B. bei Modellagenturen oder Online-Shops verwenden). Jetzt möchte ich es aber, dass dieser Grafik - wenn man darüber mit dem Maus fährt - nicht sofort, sondern langsam von der Thumb-Grösse zu der Original-Grösse "wächst". Das soll heissen, dass wenn z.B. ein Thumb-Foto 120x160 ist und das Original doppelt so gross ist (also 240x320), dann soll es von 120x160 bis 240x320 "anwachsen", wobei die Breite und Höhe natürlich proportionell bleiben.
Jetzt habe ich es geschafft, dass es sich sofort vergrössert, wenn ich mit der Maus darüberfahre und sich auch sofort verkleinert, wenn den Maus von dem Grafik wegtue. Wie schaffe ich aber, dass es "wächst" (so wie ich es beschrieben habe)?

Hier finden Sie die Dateien für diesen Skript.
Es besteht aus: 1xHTML-Datei, 1xCSS-Datei, 1xJS-Datei und 2xJPG-Dateien.

Wäre euch für jede Hilfe dankbar.

Danke in Voraus!

Mit freundlichen Grüßen
SOLIANYI Dmitri

 

[Sven Mintel]

Re: Vergroesserung einer Grafik mit JavaScript und via MouseOver und MouseOut geht ni

Dazu muss man die Grössenänderung zeitversetzt vornehmen.

Momentan machst du das innerhalb einer Schleife in einer Funktion.... um diese Schleife abzuarbeiten, braucht JS ein paar Millisekunden... deswegen siehst du nichts von dem gewünschten Effekt.

Die Methoden, um eine Anweisung zeitversetzt bzw. in bestimmten Zeitabständen auszuführen, heissen
setTimeout() und setInterval()

 

[dsolianyi]

Könntet Ihr mir vielleicht etwas vorschlagen, wie ich das Skript verändern soll?

Danke!

 

[Sven Mintel]

Ändere die Grösse innerhalb der Funktion immer nur um einen kleinen Schritt.
Die Funktion selbst rufe dann mittels der oben genannten Methoden mehrmals auf... solange, bis die gewünschte Grösse erreicht ist.

 

[dsolianyi]

Hi!

Hat jemmand von Euch eine Idee, wie der Skript aussehen soll? Ich meine: hat jemmand einen Quellcode-Vorschlag, den man ins Forum dann posten könnte?