✔ Javascript Bild vergrößern

N

-nin

Grünschnabel
Hallo zusammen,

ich möchte ein Balkendiagramm erzeugen und den Balken per Javascript wachsen lassen. Da der Balken aber dynamisch per ASP/VBScript erzeugt wird, können auch mehrere davon erscheinen. Defacto muss ich dem Balken dynamische Namen zuweisen: balken1, balken2...

Zum Wachsen lasse habe ich mir schon ein Snippet besorgt:
Code: 
<html>
<head>
<script language="JavaScript">
<!--

var Hoehe = 0;

function Vergroessern()
{
    Hoehe++;
    document.NameDesBildes.height = Hoehe;

    if(Hoehe < 300)
    {
        window.setTimeout("Vergroessern();", 20);
    }
}

window.setTimeout("Vergroessern();", 250);

//-->
</script>
<title>Bild per Javascript vergrößern</title>
</head>
<body>

<img height="0" name="NameDesBildes" src="bild.jpg">

</body>
</html>

Leider ist dieses Script recht statisch. Daher versuche ich der Funktion den Namen des Balken sowie dessen Größe mitzugeben, da ja nicht jeder Balken gleichgroß ist.
Leider aber habe ich Probleme bei der Umsetzung, da ich auch nicht ganz so fit mit Javascript bin. Kann mir bei meiner unteren Überlegung evtl jemand helfen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">
<!--

var breite = 0;
var bname;
var bbreite;
var newbname;
var newbbreite;

function Vergroessern(bname, bbreite)
{
	newbname = bname;
	newbbreite = bbreite;
	
    breite++;
    document.newbname.width = breite;

    if(breite < newbbreite)
    {
        window.setTimeout("Vergroessern();", 20);
    }
}

window.setTimeout("Vergroessern();", 150);

//-->
</script>
<title>Bild per Javascript vergrößern</title>
</head>
<body>
<img onLoad="Vergroessern('balken', 300)" src="http://www.tutorials.de/forum/images/KVP/balken.png" name="balken" width="1" height="50" />
</body>
</html>

Soweit schon einmal danke,
-nin
 
Hi,

um es dynamisch zu halten, solltest du die veränderlichen Parameter der Funktion als Argumente übergeben (Name, Endbreite, aktuelle Breite). Damit kannst du nun die Routine zeitverzögert erneut aufrufen.

Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function Vergroessern(bname, bbreite, breite){
  document.getElementsByName(bname)[0].width = breite;

  if(breite < bbreite){
    window.setTimeout(function(){ Vergroessern(bname, bbreite, ++breite);}, 20);
  }
}

window.onload = function(){
  Vergroessern('balken', 300, 0);
}

//-->
</script>
<title>Bild per Javascript vergrößern</title>
</head>
<body>
<img src="http://www.tutorials.de/forum/images/KVP/balken.png" name="balken" width="1" height="50" />
</body>
</html>

Weiterhin wird das Vergrössern im onload-Event des Dokuments angestossen.

Ciao
Quaese
 
Super, es klappt.
Jetzt habe ich 15 dynamisch erzeugte Balken, die per Javascript animiert werden.

Vielen Dank für die Hilfe.

-nin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück