tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von para_noid
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
201
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 04.11.11 15:39 #1
    Avatar von 123123123
    123123123 123123123 ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    177
    Hallo liebe Leute am so einen regnerischen Tag.
    Ich habe hier was gebastelt:
    HTML-Code:
    <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 :
    1
2
3
4
5
6
7
8
9
10
11

    <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!
     
    Zitieren Zitieren
  2. 04.11.11 16:03 #2
    Avatar von para_noid
    para_noid para_noid ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    144
    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-Code:
    <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 :
    1
2
3
4

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

    Code :
    1
2
3
4

    .divklasse{
  float: left;
  usw...
}
    123123123 bedankt sich. 
    Für die Übereinstimmung von Niederschrift und Hirninhalt.
    Zitieren Zitieren
  3. 04.11.11 16:12 #3
    Avatar von 123123123
    123123123 123123123 ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    177
    Ja der JS-Code mit "laySyntax" hab ich übernommen, ich kann dir die Seite sagen
    http://www.jjam.de/JavaScript/Animation/Kreis.html
    dort ist es mit Kreis, aber ich hab halt nur das mit den Pixeln übernommen.
    So die sind jetzt nebeneinander, aber wie kriege ich die in den Kasten rein und auf die Linie?
     
    Zitieren Zitieren
  4. 04.11.11 16:28 #4
    Avatar von javaDeveloper2011
    javaDeveloper2011 javaDeveloper2011 ist offline Mitglied Brokat
    Registriert seit
    Feb 2011
    Beiträge
    445
    Blog-Einträge
    5
    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ß
     
    Zitieren Zitieren
  5. 04.11.11 16:30 #5
    Avatar von para_noid
    para_noid para_noid ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    144
    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.
     
    Für die Übereinstimmung von Niederschrift und Hirninhalt.
    Zitieren Zitieren
  6. 04.11.11 17:16 #6
    Avatar von 123123123
    123123123 123123123 ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    177
    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?
     
    Zitieren Zitieren
  7. 04.11.11 19:37 #7
    Avatar von para_noid
    para_noid para_noid ist offline Mitglied Gold
    Registriert seit
    Aug 2011
    Beiträge
    144
    Die Größe richtet sich nach der Pixelangabe in border-top.
    border-top: 5px dotted #000; oder wie groß du's eben brauchst.
     
    Für die Übereinstimmung von Niederschrift und Hirninhalt.
    Zitieren Zitieren
« Return ist leer | parent ID ansprechen/ausgeben »

Ähnliche Themen

  1. Vergleichen von RGB-Werten von Pixeln
    Von Morbid2k4 im Forum C/C++
    Antworten: 4
    Letzter Beitrag: 23.07.09, 22:51
  2. Testbildschirm erstellen mit Pixeln
    Von ITA im Forum Java
    Antworten: 2
    Letzter Beitrag: 06.11.07, 18:04
  3. Pixelbild aus rechteckigen Pixeln erstellen
    Von jana07 im Forum Photoshop
    Antworten: 6
    Letzter Beitrag: 11.05.07, 16:08
  4. Bild laden und auf die Pixeln zugreifen
    Von Turcy im Forum VisualStudio & MFC
    Antworten: 8
    Letzter Beitrag: 12.04.07, 16:42
  5. B und H in Pixeln für Bild: 27*29cm bei 25400 DPI
    Von madnora im Forum Photoshop
    Antworten: 7
    Letzter Beitrag: 09.03.04, 12:29