Thomas S.: dynamische Dreiecke

Beitrag lesen

Hallo Gemeinde

ich habe folgendes Programm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script language="JScript">

var delay=20;

function moveit(was, startx, starty, endx, endy, steps, wait)
{
    if(wait && wait>0)
        setTimeout('moveit("'+was+'",'+startx+','+starty+','+endx+','+endy+','+steps+','+(wait-1)+')', delay);
    else
    {
        if(document.layers)
        {
            document.layers[was].left=startx;
            document.layers[was].top=starty;
        }
        else
        {
            document.all[was].style.left=startx;
            document.all[was].style.top=starty;
        }

startx+=(endx-startx)/steps;
        starty+=(endy-starty)/steps;

if(steps>0)
            setTimeout('moveit("'+was+'",'+startx+','+starty+','+endx+','+endy+','+(steps-1)+')', delay);
    }
}

function init()
{
if(navigator.appName=="Netscape")
{
  var w = innerWidth;
  var h = innerHeight
}
else
{
  var w = document.body.offsetWidth;
  var h = document.body.offsetHeight;
}
  
moveit("f1",200,-400,200,100,70,0);
moveit("f2",-200,400,200,140,100,0);
moveit("f3",1400,1400,400,140,110,0);
moveit("f4",-600,-400,600,140,90,0);
moveit("f5",200,-400,200,180,120,0);
moveit("f6",-400,-400,400,180,80,0);
moveit("f7",600,-400,600,180,100,0);
moveit("f8",1200,1000,200,240,100,0);
moveit("f9",-300,-400,300,240,70,0);
moveit("f10",1200,-400,200,300,120,0);
moveit("f11",200,-400,200,360,130,0);
moveit("f12",500,1400,200,400,100,0);
/*moveit("f13",200,0,200,100,10,0);
  */
}

</script>

</head>

<body onload="init()">
<div id="f13" style="position:absolute; background-color: ; color: White; font-family: Arial; width:400px; height:40px; top:500px; left:200px;" ></div>
<div id="f1" style="position:absolute; background-color: #3A8CC6; color: White; font-family: Arial; width:600px; height:40px; top:100px; left:200px;" ></div>
<div id="f2" style="position:absolute; background-color: #598C00; color: White; font-family: Arial; width:200px; height:40px; top:140px; left:200px;" ></div>
<div id="f3" style="position:absolute; background-color: #F7B500; color: White; font-family: Arial; width:200px; height:40px; top:140px; left:400px;" ></div>
<div id="f4" style="position:absolute; background-color: #EF6B00; color: White; font-family: Arial; width:200px; height:40px; top:140px; left:600px;" ></div>
<div id="f5" style="position:absolute; background-color: #BEBD84; color: White; font-family: Arial; width:200px; height:60px; top:180px; left:200px;" ></div>
<div id="f6" style="position:absolute; background-color: #FF6600; color: White; font-family: Arial; width:200px; height:220px; top:180px; left:400px;" ></div>
<div id="f7" style="position:absolute; background-color: #BCBD00; color: White; font-family: Arial; width:200px; height:260px; top:180px; left:600px;" ></div>
<div id="f8" style="position:absolute; background-color: #3A8CC6; color: White; font-family: Arial; width:100px; height:60px; top:240px; left:200px;" ></div>
<div id="f9" style="position:absolute; background-color: #F7B500; color: White; font-family: Arial; width:100px; height:120px; top:240px; left:300px;" ></div>
<div id="f10" style="position:absolute; background-color: #B53100; color: White; font-family: Arial; width:100px; height:60px; top:300px; left:200px;" ></div>
<div id="f11" style="position:absolute; background-color: #BCBD00; color: White; font-family: Arial; width:200px; height:40px; top:360px; left:200px;" ></div>
<div id="f12" style="position:absolute; background-color: #3A8CC6; color: White; font-family: Arial; width:400px; height:40px; top:400px; left:200px;" ></div>

</body>
</html>

läuft nur unter IE (ist auch richtig so)

Was ich möchte:
Ich habe auf dem Monitor lauter schöne Vierecke die sich zur Mitte hin bewegen und ein großes Viereck bilden.
Jetzt möchte ich aber noch ein Dach darüber haben (Dreieck) wie kann ich das über das div Tag (oder eine andere Möglichkeit) realisieren. Ich möchte dazu keine Grafik verwenden, es sollte über HTML Tags realisiert werden

Vielen Dank

Thomas S.