✔ Ich hab da ein Problem mit einem JavaScript.

S

Sniky76

Mitglied
Wie baue ich das Script so um, dass es auch als Fomular funktioniert?

Hallo Leute,

ich habe mir hier ein kleines JavaScript gebaut... funktioniert soweit auch ganz gut... Nur komm ich jetzt nicht mehr weiter. Ich kann irgend wie wirklich nicht so gut mit Java und hoffe deshalb wirklich das mir hier einer helfen kann.

Also es geht erstmal um das folgende Script:

PHP: 
<body topmargin="0" leftmargin="0">
<script type='text/javascript'>

function BildFormularFunktion() {

  var X= document.forms['mouseover'].elements['image'].x.falue;
  var Y= document.forms['mouseover'].elements['image'].y.falue;
  // (ungetestet...)

  alert(X+":"+Y)

  return false;
  // Formular wird nicht abgesendet.
}
</script>
<form onsubmit='BildFormularFunktion()' name='mouseover' action="./bild.php" method="POST">
<input type='image' style='width:200px: height:200px;' src='http://gb-pics.com/albums/userpics/rotkummer_leid.jpg'>
</form>

<div style="position:absolute; top:<?php $y=$y-10; echo"".$y.""; ?>px; left:<?php $x=$x-5; echo"".$x.""; ?>px; padding:3px">X</div>


Mit diesem Script kann ich ja jetzt so eine Position auf ein Bild anklicken und er setzt mir genau an diese stelle ein X. Soweit ja auch alles ok.

Nur funktioniert das ja so nur, da ich das Bild ja ganz oben Links in die ecke der Seite gelegt habe (<body topmargin="0" leftmargin="0">).

Ich möchte das jetzt aber gerne so haben, das es überall funktioniert...

ich möchte das jetzt z.B. in eine Tabelle legen...

Also z.B. so:

PHP: 
<table border="1">
 <tr>
  <td>Mein Bild:</td>
  <td><form onsubmit='BildFormularFunktion()' name='mouseover' action="./bild.php" method="POST">
<input type='image' style='width:200px: height:200px;' src='http://gb-pics.com/albums/userpics/rotkummer_leid.jpg'>
</form></td>
</tr>
</table>

Ok, die Tabelle ist nicht schön, soll ja auch nur zeigen was ich meine ;)

hab ich das jetzt aber so angelegt, geht das ja leider nicht, da ja das Script die Position im Bild berechnet und das hier:
<div style="position:absolute; top:<?php $y=$y-10; echo"".$y.""; ?>px; left:<?php $x=$x-5; echo"".$x.""; ?>px; padding:3px">X</div>[/

ja von Links oben in der Ecke ausgeht... Ich weiß jetzt echt nicht so genau wie man das machen kann :( Soll eigentlich ein kleines Script für meine Tochter werden, aber ich sitze jetzt da wirklich schon seit gestern abend um 20 uhr dran und komm hier irgend wie wirklich keinen schritt weiter :(

Ich kann mir vorstellen, dass das irgend wie gehen muß und hoffe jetzt wirklich ganz doll das mir hier irgend wie jemand helfen kann.


Vielen Dank für eure Hilfe.

Viele Grüße,
Sniky
 
Zuletzt bearbeitet:
Hi Leute,

ich hab da grade ein Script gefunden, das gibt mir alle Daten genau so aus wie ich das gerne haben wollte... nur gibt es mir das bei klick auf dem Bild in so einem Hinweisfenster aus... Ich hätte das aber ganz gerne wieder so wie bei dem Script in meinem ersten beitrag... so das ich auf das Bild klicken kann und er mir genau diese daten dann per Formular übergibt. Kann mir vielleicht irgend jemand helfen das folgende Script so anzupassen, das es genau wie das erste funktioniert, mir nur die ganzen daten von diesem Script übergibt?

Code: 
<script type='text/javascript'>
function klickkoordinaten (e) {
 posx=0; posy=0;
 if (!e) var e=window.event;
 if (e.pageX && e.pageY) {
  posx=e.pageX;
  posy=e.pageY;
 } else
   if (e.clientX && e.clientY) {
   posx=e.clientX+document.body.scrollLeft;
   posy=e.clientY+document.body.scrollTop;
  }
 bildposx=0; bildposy=0;
 if ( typeof(document.images['bild'].offsetLeft)=='number' && typeof(document.images['bild'].offsetTop)=='number' ) {
  bildposx=document.images['bild'].offsetLeft;
  bildposy=document.images['bild'].offsetTop;
  if ( bildposx>0 && bildposy>0 ) {
   diffx=posx-bildposx;
   diffy=posy-bildposy;
   window.alert(posx+' / '+posy+'\n'+bildposx+' / '+bildposy+'\n'+diffx+' / '+diffy);
   // diffx und diffy sollten die gesuchten Werte enthalten

  }
 }
}
window.onload=function () {
 document.images['bild'].onclick=klickkoordinaten;
}
</script>

<img src="http://gb-pics.com/albums/userpics/rotkummer_leid.jpg" name="bild">

Wäre wirklich Klasse wenn mir da jemand helfen könnte?

Vielen Dank!

Viele Grüße,
Sniky
 
Hallo Leute,

ich versuch das mal noch mal ein wenig besser zu erklären, was ich eigentlich möchte, ich glaube das ist aus den anderen beiden Beiträgen nicht so richtig zu erkennen.

Also ich hab hier folgende JavaScripte:

Code: 
<body topmargin="0" leftmargin="0"> 
<script type='text/javascript'> 

function BildFormularFunktion() { 

  var X= document.forms['mouseover'].elements['image'].x.falue; 
  var Y= document.forms['mouseover'].elements['image'].y.falue; 
  // (ungetestet...) 

  alert(X+":"+Y) 

  return false; 
  // Formular wird nicht abgesendet. 
} 
</script> 
<form onsubmit='BildFormularFunktion()' name='mouseover' action="./bild.php" method="POST"> 
<input type='image' style='width:200px: height:200px;' src='http://gb-pics.com/albums/userpics/rotkummer_leid.jpg'> 
</form> 

<div style="position:absolute; top:<?php $y=$y-10; echo"".$y.""; ?>px; left:<?php $x=$x-5; echo"".$x.""; ?>px; padding:3px">X</div>

Bei diesem Script ist es so, dass wenn ich auf das Bild Klicke er mir über das Formular x und y als Wert übergibt. Ist schon mal nicht schlecht, nur setze ich das Bild an eine andere Position der Seite, geht das ja so leider nicht mehr.

Jetzt habe ich ein weiteres Script gefunden, was mir insgesamt 6 Werte ausgibt und mit diesen Werten könnte ich eigentlich auch viel mehr machen... nur ist es in diesem JavaScript nicht so, dass mir diese 6 Werte per Formular übergeben werden, sondern in so einem kleinen Hinweisfenster geöffnet wird.

Ich hätte das aber lieber so, dass er mir diese 6 Werte auch so wie in dem oberen Script als Formular übergibt.

Könnte mir da vielleicht bitte irgend jemand von euch helfen und mir sagen was ich an dem folgendem Script ändern muß um irgend wie zu meinem gewünschten Ziel zu kommen?

Code: 
<script type='text/javascript'> 
function klickkoordinaten (e) { 
 posx=0; posy=0; 
 if (!e) var e=window.event; 
 if (e.pageX && e.pageY) { 
  posx=e.pageX; 
  posy=e.pageY; 
 } else 
   if (e.clientX && e.clientY) { 
   posx=e.clientX+document.body.scrollLeft; 
   posy=e.clientY+document.body.scrollTop; 
  } 
 bildposx=0; bildposy=0; 
 if ( typeof(document.images['bild'].offsetLeft)=='number' && typeof(document.images['bild'].offsetTop)=='number' ) { 
  bildposx=document.images['bild'].offsetLeft; 
  bildposy=document.images['bild'].offsetTop; 
  if ( bildposx>0 && bildposy>0 ) { 
   diffx=posx-bildposx; 
   diffy=posy-bildposy; 
   window.alert(posx+' / '+posy+'\n'+bildposx+' / '+bildposy+'\n'+diffx+' / '+diffy); 
   // diffx und diffy sollten die gesuchten Werte enthalten 

  } 
 } 
} 
window.onload=function () { 
 document.images['bild'].onclick=klickkoordinaten; 
} 
</script> 

<img src="http://gb-pics.com/albums/userpics/rotkummer_leid.jpg" name="bild">

ich bedanke mich ganz doll für eure Mühe!

Viele Grüße,
Sniky
 
Moin,

was willst du denn genau tun...deine Beispiele aus deinem 1. Posting tun garnichts :-(

Willst du nun ein x auf den Klickkordinaten platzieren, oder willst du die Klickkoordinaten in Formularfelder eintragen(falls ja, in welche).
 
Hallo @Sven Mintel Vielen Dank für deine Antwort!

Zu deiner Frage:
Also mal angenommen ich setze in Script 1 das Formular auf Get dann sehe ich ja nach dem Klick auf das Bild oben im Browser bild.php?x=Wert&y=Wert und ganeu so will ich das ja eigentlich auch haben... nur ebend das mir nach klick die 6 Werte aus dem 2 Script so übergibt. Also wenn ich auf das Bild klicke soll in der Adressleiste in etwa folgendes stehen: bild.php?x=Wert&y=Wert&bildposx=Wert&bildposy=Wert&diffx=Wert&diffy=Wert

Ich hoffe so konnte man jetzt verstehen was ich eigentlich möchte?

Vielen Dank!

Liebe Grüße,
Sniky
 
Die Koordinaten benötigst du in PHP, um zu ermitteln, wo du das x hinzeichnen sollst, korrekt?
(ich dachte zuerst, du willst das x sofort beim Klick dort anzeigen, durch einen Layer, den du dort positionierst:))

Falls ja, dafür benötigst du kein Javascript.
<input type="image"> übermittelt von sich aus die Klickkoordinaten, du musst ihm nur einen Namen geben.

Probiers mal aus :)
Code: 
<?php
if(isset($_POST['koordinaten_x']))
  {
    echo 'Du hast geklickt :D<br>X:'.
          $_POST['koordinaten_x'].'px<br>Y:'.
          $_POST['koordinaten_y'].'px';
  }
?>
<form method="post">
<input type="image" 
       src="http://gb-pics.com/albums/userpics/rotkummer_leid.jpg" 
       name="koordinaten">
</form>
 
Hallo @Sven Mintel Danke nochmal für deine Antwort!

Ja gut, jetzt ist das ganze kein JavaScript mehr, gefällt mir ja schon fast besser, nur ist es nicht ganz das was ich wollte :(

Jetzt bekomme ich zwar wieder die X und Y Daten vom Bild Rand zum anderen Bild Rand. Nur wollte ich ja die Anderen 4 Positionen die mir dieses Script hier ausgibt:

Code: 
<script type='text/javascript'> 
function klickkoordinaten (e) { 
 posx=0; posy=0; 
 if (!e) var e=window.event; 
 if (e.pageX && e.pageY) { 
  posx=e.pageX; 
  posy=e.pageY; 
 } else 
   if (e.clientX && e.clientY) { 
   posx=e.clientX+document.body.scrollLeft; 
   posy=e.clientY+document.body.scrollTop; 
  } 
 bildposx=0; bildposy=0; 
 if ( typeof(document.images['bild'].offsetLeft)=='number' && typeof(document.images['bild'].offsetTop)=='number' ) { 
  bildposx=document.images['bild'].offsetLeft; 
  bildposy=document.images['bild'].offsetTop; 
  if ( bildposx>0 && bildposy>0 ) { 
   diffx=posx-bildposx; 
   diffy=posy-bildposy; 
   window.alert(posx+' / '+posy+'\n'+bildposx+' / '+bildposy+'\n'+diffx+' / '+diffy); 
   // diffx und diffy sollten die gesuchten Werte enthalten 

  } 
 } 
} 
window.onload=function () { 
 document.images['bild'].onclick=klickkoordinaten; 
} 
</script> 

<img src="http://gb-pics.com/albums/userpics/rotkummer_leid.jpg" name="bild">

auch ganz gerne noch mit übergeben.

In diesem JavaScript werden ja die Positionen vom Bild angegeben (also die beiden, die ich jetzt auch in deinem Script übergeben bekomme). Dann werden aber noch die Position vom oben Links vom Browser bis zum ende vom Bild und dann noch die Differenz vom Browserrand zum anfang vom Bild mit ausgegeben und genau diese 4 Positionsangaben würde ich auch ganz gerne noch mit an das die nächste Seite übergeben.

kannst du mir da vielleicht bitte noch einmal helfen?

Vielen Dank.

Viele Grüße,
Sniky
 
Auch wenn ich nicht weiss, wozu du diese Koordinaten benötigst :-(
Biddeschön:
Code: 
<html>
<head>
<title>Test</title>

<script type='text/javascript'>
function klickkoordinaten (e) {
 btn=(e.target)?e.target:e.srcElement;
 posx=0; posy=0;
 if (e.pageX && e.pageY) {
  posx=e.pageX;
  posy=e.pageY;
 } else
   if (e.clientX && e.clientY) {
   posx=e.clientX+document.body.scrollLeft;
   posy=e.clientY+document.body.scrollTop;
  }
 bildposx=0; bildposy=0;
 if ( typeof(btn.offsetLeft)=='number' && typeof(btn.offsetTop)=='number' ) {
  bildposx=btn.offsetLeft;
  bildposy=btn.offsetTop;
  if ( bildposx>0 && bildposy>0 ) {
   diffx=posx-bildposx;
   diffy=posy-bildposy;
   btn.form.action = btn.form.action+ 
                     '?posy='+posy+'&posx='+posx+
                     '&bildposy='+bildposy+'&bildposx='+bildposx+
                     '&diffy='+diffy+'&diffx='+diffx;
   btn.form.submit();


  }
 }
}
</script>
</head>
<body>
<table border="1">
 <tr>
  <td>Mein Bild:</td>
  <td>
    <form onsubmit="return false"  action="./bild.php" method="post">
    <input type="image" onclick="klickkoordinaten(event)" style="width:200px: height:200px;" src="http://gb-pics.com/albums/userpics/rotkummer_leid.jpg">
    </form>
  </td>
</tr>
</table>
</body>
</html>
 
Prima Sauber VIELEN DANK

Nur eine Frage noch, warum übergibt er das den jetzt per GET und nicht per POST beim klicken auf das Bild? Wäre mir ja eigentlich Lieber :)

Danke nochmal, soweit ist das aber schon mal Prima.

Viele Grüße,
Sniky
 
Es wurde das Formularziel(action) geändert, und nicht der Formularinhalt.

Wenn du willst, dass alles per POST übergeben willst, müsstest du für jede einzelne Koordinate ein Formularfeld einfügen und statt des Änderns der action die value-Attribute dieser Felder mit den zugehörigen Werten belegen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück