Bildbreite dynamisch ändern??

[Hristo]

Hallo zusammen,

mein Ziel ist es, ein Bild in mehreren Schritten zu erweitern, sodass eine langsame Vergrösserung stattfindet.  Ich versuche es damit, aber leider erfolgslos, das Bild poppt onmouseover immer gleich zu seine maximale Breite auf, ohne Animationseffekt:

  
<img src="snow.bmp" width="100" height="100" onmouseover="mouseover(this)" onmouseout="mouseout(this)" />

  
<script type="text/javascript"><!--  
  function mouseover(frbild) {  
    for (var i = 0, i<200, i++) {frbild.width = frbild.width + 1;}  
  }  
  function mouseout(frbild) {  
    frbild.width = 100;  
  }  
--></script>  

Woran liegt es??  Vielleicht kann mir jemand einen Hinweis geben, wo ich mehr von der Prozessbearbeitung in JavaScript bzw. HTML lesen könnte??  Offensichtlich funktioniert es nicht wie im normalen C++ oder VBA.

Danke und Grüsse,
Hristo

[apsel]

Om nah hoo pez nyeetz, Hristo!

mein Ziel ist es, ein Bild in mehreren Schritten zu erweitern, sodass eine langsame Vergrösserung stattfindet.  Ich versuche es damit, aber leider erfolgslos, das Bild poppt onmouseover immer gleich zu seine maximale Breite auf, ohne Animationseffekt:

Da kannst du mal sehen, wie schnell der Rechner so arbeitet ;-)

Lass ihn bummeln!

Matthias

[Hristo]

Da kannst du mal sehen, wie schnell der Rechner so arbeitet ;-)

Danke für die Bemerkung, aber OK, und wie kann ich das Effekt dann trotzdem erreichen, wenn nicht so??!

Gruß, Hristo

[jobo]

Hallo,

Da kannst du mal sehen, wie schnell der Rechner so arbeitet ;-)

Danke für die Bemerkung, aber OK, und wie kann ich das Effekt dann trotzdem erreichen, wenn nicht so??!

https://forum.selfhtml.org/?t=198156&m=1330219

setTimeout ist dein Freund.

Gruß

jobo

[jobo]

Hallo,

setTimeout benutzen und dann die Funktion wieder aufrufen:
function mouseover(frbild) {

while (frbild.width < maxWidth) {
       frbild.width += 1;
       setTimeout("mouseover("+frbild+")",1000);
     }
}
untested.

Besser u.U. mit

myBild = document.getElementById("myBildId");

das myBild zu bestimmen, dann brauchst du es nicht als Parameter zu übergeben.

ggfs. dann auch:

myBild.onmouseover = mousover;

Gruß

jobo

[Hristo]

Danke für die schnelle Nachricht.  Ich habe es somit ausprobiert, funzt wieder nicht, d.h. das Bild wird nicht mit Pausen erweitert sondern direkt von 100 auf 150:

  
<img name="erstesBild" src="snow.bmp" width="100" height="100" onmouseover="mouseover()" onmouseout="mouseout()" />

  
  
<script type="text/javascript"><!--  
  function mouseover() {  
    frbild = document.getElementById("erstesBild")  
    while (frbild.width < 150) {  
      frbild.width += 1;  
      setTimeout("mouseover()",1000);  
    }  
  }  
  function mouseout() {  
    frbild = document.getElementById("erstesBild")  
    frbild.width = 100;  
  }

[jobo]

Hallo,

  
<img src="test.jpg" width="50px">  
<script>  
myImg = document.getElementsByTagName("img")[0];  
growingWidth = 50;  
enlarge = function () {  
	 growingWidth += 1;  
	if (growingWidth == 51) {  
		alert("starting");  
	}	  
	if (growingWidth < 300) {  
		myImg.style.width =  growingWidth + "px";  
		setTimeout("enlarge()", 100);  
	}	  
}  
</script>  
<button onclick="enlarge()">enlarge</button>  

funzt.

Gruß

jobo

[Hristo]

Hi, auf der Art und Weise hat es jetzt auch mit meiner Funktion geklappt.  Ich glaube, dass das Problem bei den Attributen vom Bild vorkommt:

Bild.width und Bild.style.width

Irgendwie klappt es mit dem direkten Attribut nicht und über den zweiten schon.  Eine Idee warum ist es so??

Gruß, Hristo

[jobo]

Hallo,

Irgendwie klappt es mit dem direkten Attribut nicht und über den zweiten schon.  Eine Idee warum ist es so??

Weil width eine style-Eigenschaft ist, die immer in "px" angegeben werden muss? Und style wiederum eine Elementeigenschaft.

Gruß

jobo

[Joachim]

Hi,

setTimeout benutzen und dann die Funktion wieder aufrufen:
function mouseover(frbild) {

while (frbild.width < maxWidth) {
       frbild.width += 1;
       setTimeout("mouseover("+frbild+")",1000);
     }
}

Das Bild per Schleife grösser rechnen und sicherheitshalber bei jedem Durchlauf noch ein Timeut anstossen, der den Vorgang erneut aufruft? Sorry, das ist kompletter Quark.

untested.

glaub ich gerne. Es gibt hier keinen Grund, hier überhaupt eine Schleife zu einzusetzen.

Gruesse, Joachim

[Hristo]

glaub ich gerne. Es gibt hier keinen Grund, hier überhaupt eine Schleife zu einzusetzen.

Gruesse, Joachim

Hi Joachim, wie würdest du es machen??

Gruß, Hristo

[jobo]

Hallo,

Das Bild per Schleife grösser rechnen und sicherheitshalber bei jedem Durchlauf noch ein Timeut anstossen, der den Vorgang erneut aufruft? Sorry, das ist kompletter Quark.

untested.
glaub ich gerne. Es gibt hier keinen Grund, hier überhaupt eine Schleife zu einzusetzen.

https://forum.selfhtml.org/?t=198156&m=1330230

Gruß

jobo

[Joachim]

Hi,

https://forum.selfhtml.org/?t=198156&m=1330230

Warum postest Du dann erst so einen Murks. Davon abgesehen weist Dein Script erhebliche Schwächen auf, denn es berücksichtigt nicht die möglicherweise eintretende Überlagerung mehrerer Timeouts durch nervöses Klicken oder Hovern (was vorgesehen ist). Desweiteren erscheint mir eine Bildreferenzierung über den Index reichlich praxisfern.

Gruesse, Joachim

[Hristo]

Hi,

https://forum.selfhtml.org/?t=198156&m=1330230
Warum postest Du dann erst so einen Murks. Davon abgesehen weist Dein Script erhebliche Schwächen auf, denn es berücksichtigt nicht die möglicherweise eintretende Überlagerung mehrerer Timeouts durch nervöses Klicken oder Hovern (was vorgesehen ist). Desweiteren erscheint mir eine Bildreferenzierung über den Index reichlich praxisfern.

Gruesse, Joachim

Hei hei, ich bin gespannt, welche Lösungsidee Du hättest, damit Du so stark die Ideen der anderen kritisierst??  Gruß, Hristo

[jobo]

Hallo,

Hi,

http://forum.de.selfhtml.org/my/?t=198156&m=1330230
Warum postest Du dann erst so einen Murks.

Warum nicht?

Davon abgesehen weist Dein Script erhebliche Schwächen auf, denn es berücksichtigt nicht die möglicherweise eintretende Überlagerung mehrerer Timeouts durch nervöses Klicken

Hat jemand gesagt, dass es nicht optimierungsfähig ist?

oder Hovern (was vorgesehen ist).

Wenn er es erstmal überhaupt schafft, das Bild zu verbreitern, kann er den Rest ja mit Hilfe anderer lösen.

Desweiteren erscheint mir eine Bildreferenzierung über den Index reichlich praxisfern.

Naja, wollte man das über alle Bilder machen, wäre das schon wieder praxisnäher. Und wenn nicht, kann man ja auch die id nehmen. Das bleibt ja jedem freigestellt.

Ich gebe aber zu, dass Dein Codebeispiel viel runder ingesamt ist und auch stimmiger erscheint. Aber auch Halbprofis steht es ja zu, hier zu posten, mitzurätseln und an Lösungsvorschläge mit zu arbeiten, die u.U. dann erstmal halb ausgegegoren sind. Oder sind wir schon wieder soweit, dass hier nur ausgewiesene Vollprofis antworten dürfen?

Gruß

jobo

[Joachim]

Hi,

for (var i = 0, i<200, i++) {frbild.width = frbild.width + 1;}

eine Schleife ist zu schnell. Verwende setTimeout oder setInterval für Animationen.

Gruesse, Joachim

[Hristo]

eine Schleife ist zu schnell. Verwende setTimeout oder setInterval für Animationen.

Hi Joachim, kannst bitte deine Vorstellung besser ausschreiben.  Mir fällt nichts anders ein, wie ich es ohne Schleife mache.  Im Beispiel von jobo war es mit if zu überrpüfen, wann das Bild nicht mehr zu vergrössern wäre.  Dies ist keine Schleife.

Gruß, Hristo

[Joachim]

Hi,

Hi Joachim, kannst bitte deine Vorstellung besser ausschreiben.  Mir fällt nichts anders ein, wie ich es ohne Schleife mache.

Warum liest Du Dir nicht mal die Beispiele durch? Mit setTimeout kannst Du einen Vorgang periodisch aufrufen und dabei die Frequenz im Millisekunden angeben. Du ruft damit also ganz gemütlich wiederholt eine Funktion auf, welche die Bildgrösse anpasst, bis der gewünschte Effekt erreicht ist. Eine Schleife hat in dieser Zeit schon 1000 Loops hinter sich...

Generell gilt im Forum: SELF ist der/die Man/Frau. Eine kleine Anregung magst Du aber vielleicht in diesem Test finden.

Im Beispiel von jobo war es mit if zu überrpüfen, wann das Bild nicht mehr zu vergrössern wäre.  Dies ist keine Schleife.

Doch, im ersten Beispiel benutzte er eine while-schlife und darin einen Timeout.

Gruesse, Joachim

[Hristo]

Generell gilt im Forum: SELF ist der/die Man/Frau. Eine kleine Anregung magst Du aber vielleicht in diesem Test finden.

:) Ja, danke, ich weiss was SELF bedeutet, aber damit ich irgendwie weiterkomme, hatte ich ein Beispiel gebraucht.  Vor allem scheitert es bei mir nicht mit der Logik, wie ich etwas aufbaue oder ein Problem löse, sondern mit der Syntax von HTML und JavaScript.  Z.B. mit der Sintax, wie ich meine Funktion von der Funktion setTimeout() aufrufe, habe ich eine Stunde herumprobiert, und es hat bis jetzt nichts gebracht.  Ich habe es endlich in Deinem Beispiel gesehen:

setInterval(function(){enlarge(img)}, 50);

Nochmal danke fürs gute Beispiel!!

Gruß, Hristo