✔ Pixeln...

123123123

123123123

Erfahrenes Mitglied
Hallo liebe Leute am so einen regnerischen Tag.
Ich habe hier was gebastelt:
HTML: 
<html>
	<head>
		<title>Pixel</title>
			<style>
				.box {
					position: relativ;
					border: 2px solid red;
					width: 300px;
					height: 300px;
				}
				.hr {
					margin: 150 auto;
					color:red;
				}
				
			</style>
	</head>
<body>
	<div class = "box">
		<hr class = "hr">
	</div>
</body>
</html>

Meine Aufgabe ist es, die kleinen Pixelpunkte auf die Linie drauf "zu packen".
Hier hab ich schon man mit Javascript angefangen :
Code: 
<script>
	for (i=1; i<=10; i++)
	{
		document.write ("<div id = 'pixel" + i + "'>.</div>");
			var laySyntax=new Array();
		if(document.getElementById) 
		{
			laySyntax[i]=document.getElementById("pixel"+i).style;
		}
	}
	</script>

Hier sind die untereinander und kann ich deren Größe verändern?
PS:
Ich habe den JS-Code auf irgendwelche Seite gefunden, wenn ihr so nett seid, könntet
ihr mir eklären was der "sagt".

Danke!
 
Der Code gibt dir zehn Div-Container zurück, deren id jeweils "pixel1", "pixel2" etc ist. Die Leerzeichen in id = 'pixel" dürften aber schonmal Probleme machen. Du hast die Macke auch in deinem HTML-Code drin
HTML: 
<div class = "box">
Dann wird ein Array gesetzt, also zehn mal während der Schleife und dementsprechend immer wieder überschrieben, und wenn document.getElementById true ist (die Funktion hat für mich keinen Sinn, wenn ihr keine ID übergeben wird - ob da jetzt true oder false drin steht oder das Script überhaupt bis dahin kommt, kann ich dir nicht sagen), dann wird das style-Objekt des eben geschriebenen Divs in das Array geschrieben. Was damit dann anzufangen ist..keine Ahnung. Zum Schluss hast du mit Glück das style-Objekt des letzten Divs in laySyntax drin. Ich würde aber fast behaupten, dass du gar nichts hast. Ist das 1:1 übernommen worden?

Und deine Frage versteh ich ehrlich gesagt nicht.
Wenn es dir nur darum geht, die neugeschrieben Divs anders zu positionieren, kannst du neben der id noch eine Klasse zuweisen. Mit CSS legst du dann das Aussehen der Divs fest.

Code: 
for (i=1; i<=10; i++)
{
  document.write ("<div id='pixel"+ i +"' class='divklasse'>.</div>");
}

Code: 
.divklasse{
  float: left;
  usw...
}
 
Hi,

1. Was hast du vor?
2. Wenn es in richtung Spiel / Animation / Dynamisch generierte Graphik geht:
Auf jeden Fall HTML5-<canvas>-Tag!!
Das funktioniert mit excanvas sogar im IE6!
Wohingegen es extrem mühsam würde mit Punkten (als Satzzeichen) Rahmen, HR sowas zu basteln.

Falls du es doch so machen willst: Warum JS? (Sollen die Punkte animiert nach und nach kommen?)
Übrigens: HR kann keine color zugewiesen werden.

Gruß
 
Ich glaub jetzt raff ichs, du willst die horizontal rule mit den Punkten bestücken...

Soll da auch irgendeine dynamische Komponente rein oder brauchst du einfach die Punkte? Letzteres Ziel wäre ziemlich unterdimensioniert für diese Art der Umsetzung..

Du kannst auch die Divs in eine Variable schreiben und alles mit der Funktion innerHTML in die Box packen.

Ansonsten, wenns wirklich nur um die statische Anzeige der Punkte geht, langt auch ein Div mit (border-top: 1px dotted #000; border-bottom: 1px solid #000; ) oder eben ein Div mit x Punkten drin, dem du border-bottom: 1px solid #000; gibst.
 
javaDeveloper2011: Nein, die müssen nicht animiert sein! Das ist nur eine Übung mit JS. :)

para_noid: Ich brauche einfach die Punkte, die sollen auf der Linie halt liegen!
Was ist mit der Größe der Punkte, kann man das irgendwie verändern?
 
Die Größe richtet sich nach der Pixelangabe in border-top.
border-top: 5px dotted #000; oder wie groß du's eben brauchst.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück