brauche hilfe bei ajax

<drummer> · 17. Juli 2008

hallo leutz,

also folgendes problem.ich habe ein pixelraster und möchte es per ajax machen,das man jedes pixelkästchen makieren kann und dann ein feld erscheint wo denn infos drin stehen...

wär cool wenn ihr mir helfen könnt

Toothrot · 18. Juli 2008

Was hast du bisher gemacht? Woran bist du gescheitert? Wie weit gehen überhaupt deine AJAX-Kenntnisse?

Oder erwartest du, dass dir jemand eine fertige Lösung präsentiert?

<drummer> · 18. Juli 2008

ich bin grad dabei javascript zu lernen(am anfang)...kann ich das überhaupt mit einer jpg datei,wo die pixelkästchen drauf sind(10x10)gesamtgröße der jpg:1000x2000 machen???also im moment hab ich nur das raster.jpg...also ein script mit erklärung wäre nicht schlecht...hab auch schon gegooglet,find aber keins...

Aiun · 18. Juli 2008

Wiederholung:

- was hast du bisher gemacht?

- Was willst du eigentlich das dein Script tut?

<drummer> · 18. Juli 2008

bisher noch garnichts,weil ich wie gesagt nich weiß ob das mit einer einzigen*.jpg datei funktioniert.Das script soll bei einem maus klick das angeklickte pixel kästchen makieren und bei einem klick auf ein anderes pixelkästchen(das waagerecht oder senkrecht zum anderen liegt) sollen die ganzen kästchen da zwischen auch makiert werden.

siehe Million Pixel Homepage www.pixelklicks.de

Seperator · 18. Juli 2008

Wenn du schon eine Beispielseite hast, schau dir doch die Quellcodes da mal an, vielleicht findest du dann eine Lösung für das Clientseitige (also den JS Teil vom AJAX)

<drummer> · 18. Juli 2008

also ich hab da schon geguckt,aber irgendwie nix gefunden :confused:

Tweetymax · 18. Juli 2008

Also...

ich hab mir die Seite mal angesehen. Ich denke du meinst den kasten, der dort langsam horizontal und vertikal läuft und in dem du einen Bereich markieren kannst.

Dazu brauchst du kein Ajax, das kannst du einfach mit JavaScript lösen.

Definiere eine Tabelle mit X Spalten breite und Y Zeilen Höhe. Jede Zelle bekommt eine ID wie z.B. id="sX_zY" (X und Y stehen dabei für die Spalten bzw. Zeilennummer) damit hast du dann alle Zellen eindeutig in ihrer Position in der Tabelle gekennzeichnet.

Beim klick auf eine dieser zellen übergibst du X und Y position an eine Funktion, und merkst es dir in einer Variablen als Punkt 1

Beim 2. klick das selbe nur eben, dass du dann Punkt 2 hast

Mit den werten für Punkt 1 und 2 hast du dann einen Bereich, den du in einer schleife durchlaufen, und dem entsprechend die Zellen farbig hervorheben kannst.

<drummer> · 18. Juli 2008

könntest du mir mal einen codeschnipsel geben???

Tweetymax · 18. Juli 2008

Sicher, grade mal fertig gemacht


<html>

<head>

<style type="text/css">

.normal {

	background-color: #cccccc;

	height: 20px;

	width: 20px;

}

.aktiv {

	background-color: #ffcccc;

	height: 20px;

	width: 20px;

}

</style>

<script language="javascript">

var p1X = null;

var p1Y = null;

var p2X = null;

var p2Y = null;

function setzePunkt(px, py) {

	if ((p1X == null) && (p1Y == null)) {

		p1X = px;

		p1Y = py;

		document.getElementById('s'+px+'_z'+py).className = 'aktiv';

	} else {

		p2X = px;

		p2Y = py;

		markiereBereich();

	}

}

function markiereBereich() {

	if (p1X > p2X) {

		pTemp = p1X;

		p1X = p2X;

		p2X = pTemp;

	}

	if (p1Y > p2Y) {

		pTemp = p1Y;

		p1Y = p2Y;

		p2Y = pTemp;

	}

	for (x = p1X; x <= p2X; x++) {

		for (y = p1Y; y <= p2Y; y++) {

			document.getElementById('s'+x+'_z'+y).className = 'aktiv';

		}

	}

}

</script>

</head>

<body>

<table style="border: 1px solid #000000;">

	<tr>

		<td id="s0_z0" class="normal" onclick="setzePunkt(0, 0);"> </td>

		<td id="s1_z0" class="normal" onclick="setzePunkt(1, 0);"> </td>

		<td id="s2_z0" class="normal" onclick="setzePunkt(2, 0);"> </td>

		<td id="s3_z0" class="normal" onclick="setzePunkt(3, 0);"> </td>

		<td id="s4_z0" class="normal" onclick="setzePunkt(4, 0);"> </td>

	</tr>

	<tr>

		<td id="s0_z1" class="normal" onclick="setzePunkt(0, 1);"> </td>

		<td id="s1_z1" class="normal" onclick="setzePunkt(1, 1);"> </td>

		<td id="s2_z1" class="normal" onclick="setzePunkt(2, 1);"> </td>

		<td id="s3_z1" class="normal" onclick="setzePunkt(3, 1);"> </td>

		<td id="s4_z1" class="normal" onclick="setzePunkt(4, 1);"> </td>

	</tr>

	<tr>

		<td id="s0_z2" class="normal" onclick="setzePunkt(0, 2);"> </td>

		<td id="s1_z2" class="normal" onclick="setzePunkt(1, 2);"> </td>

		<td id="s2_z2" class="normal" onclick="setzePunkt(2, 2);"> </td>

		<td id="s3_z2" class="normal" onclick="setzePunkt(3, 2);"> </td>

		<td id="s4_z2" class="normal" onclick="setzePunkt(4, 2);"> </td>

	</tr>

	<tr>

		<td id="s0_z3" class="normal" onclick="setzePunkt(0, 3);"> </td>

		<td id="s1_z3" class="normal" onclick="setzePunkt(1, 3);"> </td>

		<td id="s2_z3" class="normal" onclick="setzePunkt(2, 3);"> </td>

		<td id="s3_z3" class="normal" onclick="setzePunkt(3, 3);"> </td>

		<td id="s4_z3" class="normal" onclick="setzePunkt(4, 3);"> </td>

	</tr>

	<tr>

		<td id="s0_z4" class="normal" onclick="setzePunkt(0, 4);"> </td>

		<td id="s1_z4" class="normal" onclick="setzePunkt(1, 4);"> </td>

		<td id="s2_z4" class="normal" onclick="setzePunkt(2, 4);"> </td>

		<td id="s3_z4" class="normal" onclick="setzePunkt(3, 4);"> </td>

		<td id="s4_z4" class="normal" onclick="setzePunkt(4, 4);"> </td>

	</tr>

</table>

</body>

</html>

gestestet im IE

<drummer> · 18. Juli 2008

ja so was mein ich... also muss ich das in einer tabelle machen...hatte nämlich eigentlich vor wie gesagt ein jpg datei zu nehmen...achso wie krieg ich das jetzt hin das die kästchen auch 10x10 groß sind...hab das im css schon height und width auf 10 gemacht...is aber immer noch kein quadrat

Tweetymax · 18. Juli 2008

ersetz einfach das durch ein transparentes gif der größe 1px x 1px dann kannst du die Zellen bis auf 1 px schrumpfen (natürlich nur wenn du cellpadding auch auf 0 setzt.

Grafiken direkt zu schreiben ist immer ein wenig aufwendiger. hier könnte man z.B. mit einer imagemap arbeiten, wo man ja eh X und Y position hat. Beim setzen des 2. Punktes, müsstest du jedoch die grafik neu erstellen, oder halt mit einem Java-Applett arbeiten.

<drummer> · 18. Juli 2008

erstmal schon mal danke

könntest du mir auch sagen wie ich noch während des markierren immer ein kleines fenster da hab wo drin steht wieviel pixelkästchen ich ausgewählt hab und welche ???

Aiun · 18. Juli 2008

du speicherst alle markierten Koordinaten in einem Objekt und füllst z.B. ein Div-Layer mittels getElementById() und .innerHTML mit dem Text den du anzeigen willst.

<drummer> · 18. Juli 2008

könnt ich ein beispiel haben???bin echt totaler neuling...sorry

Tweetymax · 18. Juli 2008

Jop, hab den Code mal ein wenig erweitert.


<html>

<head>

<style type="text/css">

.normal {

	background-color: #cccccc;

	height: 20px;

	width: 20px;

}

.aktiv {

	background-color: #ffcccc;

	height: 20px;

	width: 20px;

}

</style>

<script language="javascript">

var p1X = null;

var p1Y = null;

var p2X = null;

var p2Y = null;

var zeigen = true;

function setzePunkt(px, py) {

	if ((p1X == null) && (p1Y == null)) {

		p1X = px;

		p1Y = py;

		document.getElementById('s'+px+'_z'+py).className = 'aktiv';

	} else {

		p2X = px;

		p2Y = py;

		markiereBereich();

		zeigen = false;

		zeigeInfo(px, py, 1);

	}

}

function markiereBereich() {

	if (p1X > p2X) {

		pTemp = p1X;

		p1X = p2X;

		p2X = pTemp;

	}

	if (p1Y > p2Y) {

		pTemp = p1Y;

		p1Y = p2Y;

		p2Y = pTemp;

	}

	for (x = p1X; x <= p2X; x++) {

		for (y = p1Y; y <= p2Y; y++) {

			document.getElementById('s'+x+'_z'+y).className = 'aktiv';

		}

	}

}

function zeigeInfo(px, py, flag) {

	if (((zeigen == true) && (p1X != null) && (p1Y != null)) || (flag == 1)) {

		spalten = 0;

		zeilen = 0;

		if (p1X > px) {

			spalten = p1X - px;

		} else {

			spalten = px - p1X;

		}

		if (p1Y > py) {

			zeilen = p1Y - py;

		} else {

			zeilen = py - p1Y;

		}

		gesamt = (spalten + 1) * (zeilen + 1);

		document.getElementById('info').innerHTML = 'gewählte Pixel = '+gesamt+'<br>von Zelle: '+p1X+', '+p1Y+'<br>bis Zelle: '+px+', '+py;

	}

}

</script>

</head>

<body>

<div id="info">

gewählte Pixel = 0<br>von Zelle: <br>bis Zelle: </div>

<table style="border: 1px solid #000000;">

	<tr>

		<td id="s0_z0" class="normal" onclick="setzePunkt(0, 0);" onmouseover="zeigeInfo(0, 0, 0);"> </td>

		<td id="s1_z0" class="normal" onclick="setzePunkt(1, 0);" onmouseover="zeigeInfo(1, 0, 0);"> </td>

		<td id="s2_z0" class="normal" onclick="setzePunkt(2, 0);" onmouseover="zeigeInfo(2, 0, 0);"> </td>

		<td id="s3_z0" class="normal" onclick="setzePunkt(3, 0);" onmouseover="zeigeInfo(3, 0, 0);"> </td>

		<td id="s4_z0" class="normal" onclick="setzePunkt(4, 0);" onmouseover="zeigeInfo(4, 0, 0);"> </td>

	</tr>

	<tr>

		<td id="s0_z1" class="normal" onclick="setzePunkt(0, 1);" onmouseover="zeigeInfo(0, 1, 0);"> </td>

		<td id="s1_z1" class="normal" onclick="setzePunkt(1, 1);" onmouseover="zeigeInfo(1, 1, 0);"> </td>

		<td id="s2_z1" class="normal" onclick="setzePunkt(2, 1);" onmouseover="zeigeInfo(2, 1, 0);"> </td>

		<td id="s3_z1" class="normal" onclick="setzePunkt(3, 1);" onmouseover="zeigeInfo(3, 1, 0);"> </td>

		<td id="s4_z1" class="normal" onclick="setzePunkt(4, 1);" onmouseover="zeigeInfo(4, 1, 0);"> </td>

	</tr>

	<tr>

		<td id="s0_z2" class="normal" onclick="setzePunkt(0, 2);" onmouseover="zeigeInfo(0, 2, 0);"> </td>

		<td id="s1_z2" class="normal" onclick="setzePunkt(1, 2);" onmouseover="zeigeInfo(1, 2, 0);"> </td>

		<td id="s2_z2" class="normal" onclick="setzePunkt(2, 2);" onmouseover="zeigeInfo(2, 2, 0);"> </td>

		<td id="s3_z2" class="normal" onclick="setzePunkt(3, 2);" onmouseover="zeigeInfo(3, 2, 0);"> </td>

		<td id="s4_z2" class="normal" onclick="setzePunkt(4, 2);" onmouseover="zeigeInfo(4, 2, 0);"> </td>

	</tr>

	<tr>

		<td id="s0_z3" class="normal" onclick="setzePunkt(0, 3);" onmouseover="zeigeInfo(0, 3, 0);"> </td>

		<td id="s1_z3" class="normal" onclick="setzePunkt(1, 3);" onmouseover="zeigeInfo(1, 3, 0);"> </td>

		<td id="s2_z3" class="normal" onclick="setzePunkt(2, 3);" onmouseover="zeigeInfo(2, 3, 0);"> </td>

		<td id="s3_z3" class="normal" onclick="setzePunkt(3, 3);" onmouseover="zeigeInfo(3, 3, 0);"> </td>

		<td id="s4_z3" class="normal" onclick="setzePunkt(4, 3);" onmouseover="zeigeInfo(4, 3, 0);"> </td>

	</tr>

	<tr>

		<td id="s0_z4" class="normal" onclick="setzePunkt(0, 4);" onmouseover="zeigeInfo(0, 4, 0);"> </td>

		<td id="s1_z4" class="normal" onclick="setzePunkt(1, 4);" onmouseover="zeigeInfo(1, 4, 0);"> </td>

		<td id="s2_z4" class="normal" onclick="setzePunkt(2, 4);" onmouseover="zeigeInfo(2, 4, 0);"> </td>

		<td id="s3_z4" class="normal" onclick="setzePunkt(3, 4);" onmouseover="zeigeInfo(3, 4, 0);"> </td>

		<td id="s4_z4" class="normal" onclick="setzePunkt(4, 4);" onmouseover="zeigeInfo(4, 4, 0);"> </td>

	</tr>

</table>

</body>

</html>

Aiun · 18. Juli 2008

sorry, aber gerade als totaler neuling solltest du dringend lernen dir das selbst bei zu bringen.

Wenn du dann nicht weiterkommst, dann kannst du fragen, aber es wird dir nicht immer jemand deinen Code vortippen (an sich hast du glück das tweety hier so viel zeit hat)

Es ist ja nicht so das du der erste bist oder das was du lernen willst eine Geheime Technologie ist, Material gibt es im internet zu hauf.

Seperator · 18. Juli 2008

Galileo Computing :: JavaScript und AJAX

Sorry, aber ich kann nicht verstehen wo der Lerneffekt ist, wenn man alles vorgegeben bekommt. Deshalb der Link. Lesen und Lernen :rolleyes:

Tweetymax · 21. Juli 2008

Sorry, aber ich kann nicht verstehen wo der Lerneffekt ist, wenn man alles vorgegeben bekommt. Deshalb der Link. Lesen und Lernen

Also ich muss sagen, dass ich vor meiner Ausbildung auch viel gelernt habe, grade WEIL ich mir viele codes angesehen habe, und versucht habe zu verstehen, was diese machen.

Darum habe ich ja auch immer zuerst einen ansatz gepostet, und später erst den Code ^^

Ok vielleicht hätte ich ihn etwas mehr zapeln lassen sollen, aber sowas tippste ja mal eben in 5 minuten runter, also nicht wirklich zeitintensiv

Mache es ja quasi täglich, nur halt in ganz anderem Umfang.

Aber habt schon recht... alles vorkauen zu lassen, ist nicht gut, darum ist der Code ja auch noch suboptimal... (Testen dann seht ihr die Bugs )

Für mich war lernen immer sehen ausprobieren, umschreiben, verstehen

Anmelden

brauche hilfe bei ajax

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte