nicht angemeldet
dynamische Dreiecke
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.
-
Hallo Thomas
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
Derzeit gibt es dazu meines Wissens noch keine Moeglichkeit. Der CSS-Befehl clip, der dafuer zustaendig waere (vgl. <../../tdch.htm#a20>), laesst derzeit nur rect (also Viereck) als "Shape" zu. Es waere wirklich prima, wenn das mal auf beliebige Polygone erweitert wuerde...
viele Gruesse
Stefan Muenz