JavaScript Dynamisches Effekte

[MaxXx007]

Hi,

ich hab ein Problem mit der JS-Funktion animate().
Ich möchte auf miener Webseite ein Bild haben, dass sich bei mouseover vergrößert und bei mouseout verkleinert, und da das ... blöd ... aussieht wenn das sofort groß bzw. klein ist soll das dynamisch geschehen. Dazu hab ich im Internet die Funktion "animate" gefunden, der man die zu verändernden CSS-Eigenschaften gibt und die Zeit in ms. Leider passiert überhaupt nix. Muss man bei "animate" irgendwas beachten oder gibts für sowas auch ne andre Möglichkeit? Ich finde im Internet sehr wenig zu Dynamischen Effekten mit Javascript...

mein JS-Code:

function picsize(){
     getElementById('pic').animate({
		height: 200px,
     }, 1000 );
}

meine HTML-Code:

<img src="004.jpg" id="pic" onmouseover="picsize();" style="height: 100px;" />

Vielen Dank für alle Antworten

Max

 

[mitos]

Hallo,

Versuchs mal so:

<script type="text/javascript">
       var val = 100;
	function bigger()
	{
		val+=10; //um 10 Pixel vergrößern
		document.getElementById("pic").style.height = val+"px";
		if(val<200)
		    window.setTimeout(bigger,10);  //Alle 10ms bis das Bild 200px groß ist
	}	

	function reset()
	{
		val=100;
		document.getElementById('pic').style.height = '100px';
	}
	
</script>

<img src="004.jpg" id="pic" onmouseover="javascript:bigger();" onmouseout="javascript:reset();" style="height: 100px;" />

Die Parameter kannst du ja so ändern, wie du es benötigst...

mfg
mitos

 

[MaxXx007]

Vielen Dank! Es funktioniert.

Aber auf der Seite wo das eingebaut werden soll sind mehrere Bilder die per PHP ausgelesen worden sind, also jedes Bild hat ne Nummer. Theoretisch könnte man dann ja einfach die Zählvariable an die id des Bildes dranhängen und sie als Parameter auch an die JS-Funktionen schicken, wo man dann noch ne Variable id="pic"+i; definiert und diese dann bei getElementById(id) reinschreibt. Jetzt funktionierts aber nich mehr richtig, denn das Bild vergrößert sich bei onmouseover sofort auf die volle Größe, und ich hab keine Ahnung wieso...

<script type="text/javascript">
var val = 100;
    function bigger(i)
    {
        val+=10; //um 10 Pixel vergrößern
        id="pic"+i;

        document.getElementById(id).style.height = val+"px";
        if(val<200)
            window.setTimeout(bigger(i),5);  //Alle 5ms bis das Bild 200px groß ist
    }

    function smaller(i)
    {
        val-=10;
        id="pic"+i;
		document.getElementById(id).style.height = val+"px";
        if(val>100)
            window.setTimeout(smaller(i),5);  //Alle 5ms bis das Bild 100px groß ist
    }
</script>

<img src="004.jpg" id="pic4" onmouseover="javascript:bigger(4);" onmouseout="javascript:smaller(4);" style="height: 100px;" />

Weiß jemand woran das liegt?

Max

 

[DerEineDa]

val ist eine globale Variable. Sie wird also von allen Bildern gleichermaßen benutzt. Denk mal drüber nach

 

[MaxXx007]

ääh naja aber nach dem ausführen von bigger ist val=200 und wird dann in smaller wieder kleiner gemacht...wo is da das problem?

 

[DerEineDa]

Okay, das Hauptproblem ist ein anderes. Und zwar muss das so aussehen:

<script type="text/javascript">
var val = 100;
    function bigger(i)
    {
        val+=10; //um 10 Pixel vergrößern
        id="pic"+i;

        document.getElementById(id).style.height = val+"px";
        if(val<200)
            window.setTimeout(function() { bigger(i); }, 5);  //Alle 5ms bis das Bild 200px groß ist
    }

    function smaller(i)
    {
        val-=10;
        id="pic"+i;
        document.getElementById(id).style.height = val+"px";
        if(val>100)
            window.setTimeout(function() { smaller(i); }, 5);  //Alle 5ms bis das Bild 100px groß ist
    }
</script>

Trotzdem bleibt das Problem bestehen, dass du unbedingt darauf achten musst, dass sich Bild 1 komplett vergrößert/verkleinert hat, bevor Bild 2 mit der Maus überfahren wird.

 

[MaxXx007]

das is ja der selbe code...?
das is aber mist wenn man immer erst das erste überfahren muss denn das ganze soll für einen galerie-admin panel sein also man hat alle bilder in so einer tabelle und da die aber so klein sind solln die sich vergrößern beim drauffahren
gibts dafür irgende möglichkeit?? vielleicht mit nem array?

 

[DerEineDa]

Es ist nicht der selbe Code. Achte auf die Stelle

window.setTimeout(function() { smaller(i); }, 5);

 

[MaxXx007]

achso ja klar, aber wo ist da der unterschied??

 

[DerEineDa]

Bei

window.setTimeout(bigger, 10);

wird eine Funktionsreferenz übergeben.

Bei

window.setTimeout(bigger(i), 10);

wird zuerst bigger(i) ausgeführt und der Rückgabewert davon an setTimeout() übergeben. Da die Funktion aber nichts zurückgibt, funktioniert der Timeout auch nicht.

Bei

window.setTimeout(function() { bigger(i); }, 10);

wird wieder eine Funktionsreferenz übergeben, und zwar die einer anonymen Funktion (eine Funktion ohne Namen).

Zum bessen Verständnis vielleicht ein Beispiel:

Folgende zwei Anweisungen sind semantisch (von Sinn her) absolut identisch:

function hallo() {
	window.alert("Hallo");
}

var hallo = function() {
	window.alert("Hallo");
};

In beiden Fällen gibt es hinterher einen Verweis auf eine Funktion mit dem Namen "hallo".

 

[MaxXx007]

OK, jetzt versteh ichs... so klappts dann auch, Vielen Dank