[bl-25]

Hallo, ich weiß zwar nicht ob das in dieses Forum gehört aber hier meine Frage:
Ich hab mit <map></map>, <area>, overLIB und einem mit PHP erstelltem Bild eine Karte erstellt auf der Punkte angezeigt werden die aus einer MySQL Tabelle ausgelesen werden. Ich möchte das jetzt auch Punkte eingetragen werden können, man soll also zum eintragen auf eine Seite gehen können wo man per Mausklick auf die Karte die Koordinaten weitersendet.
Geht das überhaupt mir Java die Koordinaten per Mausklick zu bekommen ? Und wenn ja, wie?

[Xean]

Es geht bestimmt, aber nicht mit Java sondern JavaScript.
Schau mal hier: http://www.netzwelt-kali.de/index.ph...28&reporeid=70
Da mit bekommst du die Koordinaten der Maus raus
vielleicht hilfts dir

[bl-25]

Ich meinte ja JavaScript *g*
Das sieht schon ganz interessant aus aber ich brauchte die Koordinaten die die Maus auf dem Bild hat. Damit meine ich das wenn ich auf dem Bild von dem linken und dem oberen Rand 10Pixel entfernt bin, diese 10Pixel (x & y natürlich einzeln) als Variable weitergegeben werden. Ich kenn mich mit JavaScript fast überhaupt nicht aus aber das Script was unter dem Link zu finden ist sieht aus als würde er die Koordinaten des ganzen Bildschirms nehmen

[Xean]

ach verdammt... ich hatte den link und noch n zweiten, und ich wollte den zweiten schicken, da ist eigendlich das was du willst, nur, dass man da ein quatrat gemalt hat, um die karte in diesem quatrat rauszoomen kann, vll finde ich ihn noch mal

[EDIT]
da is er:
http://forum.de.selfhtml.org/archiv/2005/7/t111777/

Und vielleicht zeigt dier das hier, wie schwer es ist, eine einheitliche gute lösung dafür zu finden...

[EDIT2:]
Es gibt aber doch eine lösung für die wichtigsten Browser (außer IE
selfHTML -> zweites beispiel

[bl-25]

mh hab das mal alles durchgelesen und ausprobiert, nur irgendwie klappts nicht -.-

[Xean]

was macht er denn? besser gesagt, was macht er nicht? und mit was versuchst du es?

[bl-25]

also ich hab versucht...

function mouse_pos(evt)
{
    if(!evt) evt = window.event;
    var pos = new Object();
    pos.left = evt.clientX;
    pos.top = evt.clientY;
    var b = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? 
   window.document.documentElement : window.document.body || null;
    if (b)
    {
        pos.scrollLeft= pos.left + b.scrollLeft;
        pos.scrollTop = pos.top + b.scrollTop;
    }
    else if(document.layers)
    {
        // Netscape 4.
        pos.scrollLeft = evt.pageX;
        pos.scrollTop = evt.pageY;
        pos.left = evt.pageX - window.pageXOffset;
        pos.top = evt.pageY - window.pageYOffset;
    }
    return pos;
}

var on = false;
function Start(e)
{
    if(on)
    {
         if(window.document.releaseEvents)  window.document.releaseEvents( Event.MOUSMOVE);
         window.document.onmousemove = null;
         e.value ='Start';
    }else
    {
         if(window.document.captureEvents) window.document.captureEvents(Event.MOUSEMOVE);
         window.document.onmousemove = showMousePos;
         e.value ='Stopp';
    }
    on = !on;
}
function showMousePos(e)
{
    var p = mouse_pos(e);
    for(var i in p)
    {
        document.forms['maus_pos'].elements[i].value =  p[i];
    }
}
</script>
<form action="#" name="maus_pos">
<input type="text" name="top" size="3">
<input type="text" name="left" size="3">
<input type="text" name="scrollTop" size="3">
<input type="text" name="scrollLeft" size="3">
<input type="button" value="Start" onclick="Start(this);">
</form>

...diesen code mit ...

function getRect (o)
{
    var r = { top:0, left:0, width:0, height:0 };

    if(!o) return r;
    else if(typeof o == 'string' ) o = document.getElementById(o);
    
    if( typeof o != 'object' ) return r;

    if(typeof o.offsetTop != 'undefined')
    {
         r.height = o.offsetHeight;
         r.width = o.offsetWidth;
         r.left = r.top = 0;
         while (o && o.tagName != 'BODY')
         {
              r.top  += parseInt( o.offsetTop );
              r.left += parseInt( o.offsetLeft );
              o = o.offsetParent;
         }
    }
    return r;
}

diesem zu verbinden, so das ich am Ende wenn ich mit dem Mauszeiger über ein Bild gehe die Koordinaten wo ich auf dem Bild bin (Anfang mit Koordinate 0 oben-links im Bild) bekomme. Aber wie gesagt, kenn JavaScript kaum und weiß ganricht wie ich das genau machen soll

[Xean]

Ich glaub ich hab dein Ziel noch nicht verstanden.
Soll es so eine UserMap werden, wo man sich eintragen kann (Wohnort)?
Aber aus dem zweiten Codeteil würde ich sagen, dass du eine verbindun zwischen zwei punkten haben willst, oder ein rechteck, um ein gebiet drum rum... vielleicht kannst du es noch mal genauer erklären?

[bl-25]

Ja man kanns mit einer Usermap vergleichen. Man soll also per Mausklick einen Punkt auf einer Karte hinzufügen können. Die Koordinaten für die schon vorhanden Punkte lese ich aus einer MySQL aus.

//EDIT
Du kannst dir am besten mal das hier angucken. So ähnlich habe ich das auch nur jetzt fehlt mir noch eine Eingabe so wie auf der Seite (Eingabe ist auf der Seite erst nach dem registrieren zu sehen)

[Xean]

Suchst du dann nicht sowas hier:

<html>
  <head>
    <title>      Test
    </title>
    <style type="text/css">      
      #karte { position:relative; }
    </style>
<script type="text/javascript">
function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  document.forms['maus_pos'].elements[0].value = Ereignis.layerX;
  document.forms['maus_pos'].elements[1].value = Ereignis.layerY;
}
function starte_ueberwachung () {
  document.images["karte"].onclick = bildklick;
}
function name_change(e, v){
  if(e.value == 'Dein Name' && v == 1){
    e.value='';
  }else if(e.value == '' && v == 2){
    e.value='Dein Name';
  }
}
window.onload = starte_ueberwachung;
</script>
  </head>
  <body>
    <p>
      <img src="http://de.selfhtml.org/html/grafiken/anzeige/karte.png" width="345" height="312" alt="Karte von S&uuml;dwestdeutschland" name="karte" id="karte">
    </p>
    <form action="#eintragen.php" name="maus_pos">
      <input type="text" name="x" value="x" size="3">
      <input type="text" name="y" value="y" size="3">
      <input type="text" name="name" value="Dein Name" onclick="name_change(this,1);" onblur="name_change(this,2);" size="15">
      <input type="button" value="Eintragen">
    </form>
  </body>
</html>

musst nur noch bei der Form Action eine datei eintragen, die die form ausließt, und das wars... naja, noch ne andere karte wäre schön.

hier zum ausprobieren

[bl-25]

Genau das wollte ich. Dankeee

[bl-25]

Xean, da gibts doch noch ein Problem Im IE kommen keine Koordinaten sondern nur undefined

[Xean]

ja, weil IE layerX/layerY nicht kennt, werde mal schaun, was man da machen kann

[EDIT]
war ja einfach:

function bildklick (Ereignis) {
  if (!Ereignis)
    Ereignis = window.event;
  if(!Ereignis.layerX || !Ereignis.layerY){
    document.forms['maus_pos'].elements[0].value = Ereignis.offsetX;
    document.forms['maus_pos'].elements[1].value = Ereignis.offsetY;
  }else{
    document.forms['maus_pos'].elements[0].value = Ereignis.layerX;
    document.forms['maus_pos'].elements[1].value = Ereignis.layerY;
  }
}

einfach mit deiner bildklick funktion ersetzen. ich hoffe jetzt gehts überall.
Die Browser können es jetzt:
Netscape ab v4
Mozilla ab v1
Konqueror ab v3.2
IE ab v4
Opera ab v7
Safari ab v1.2

sind doch eigendlich die bekanntesten / meist genutzten oder?

[bl-25]

Zitat von Xean

Die Browser können es jetzt:
Netscape ab v4
Mozilla ab v1
Konqueror ab v3.2
IE ab v4
Opera ab v7
Safari ab v1.2

sind doch eigendlich die bekanntesten / meist genutzten oder?

Vielen Dank jetzt klappt alles und die Browser sind schon mehr als genug IE und Firefox find ich am wichtigsten

[bl-25]

Hab noch eine Frage *gg* Also jetzt klappt zwar alles mit der Eingabe, nur bei der Ausgabe hab ich das Problem das bei Punkten die übereinander liegen OverLIB nur die Beschreibung von einem Punkt anzeigt. Weiß da jemand eine Lösung ?

Hier mal mein jetztiges Script dazu ..

PHP-Code:

$mysql = new DB_MySQL;
$mysql->connect($_config['host'],$_config['database'], $_config['user'],$_config['password']);
$mysql->query("SELECT * FROM .... WHERE ..... LIKE .....");

$area ='';
while ($row = $mysql->fetchRow()) {
$x=$row["coord_x"]+2;
$y=$row["coord_y"]+2;
$txt = ''.$row["info"].'';
$title = "'".$row["name"]."'";
$area .= '
<area  shape="circle" coords="'.$x.','.$y.',4" href="javascript:void(0);"
onmouseover="return overlib(\''.addslashes(htmlspecialchars($txt)).'\', CAPTION,'.$title.');"
onmouseout="return nd();">'; 


Sollte ich deswegen ein neues Thema eröffnen?

[Xean]

PHP-Code:

<?php
$text_separator = "<hr>";
$title_separator = " | ";
$area = '';
$point = array();
while ($row = $mysql->fetchRow()) {
  $x=$row["coord_x"]+2;
  $y=$row["coord_y"]+2;
  $txt = addslashes(htmlspecialchars($row["info"]));
  $title = "'".$row["name"]."'";
  if(!isset($point[$x . ":" . $y])){
    $point[$x . ":" . $y] = array(
      $x, $y, $txt, $title
    );
  }else{
    $point[$x . ":" . $y][2] .= $text_separator . "\n" . $txt;
    $point[$x . ":" . $y][3] .= title_separator . $title;
  }
}
foreach ($point as $p) {
    $x = $p[0];
    $y = $p[1];
    $txt = $p[2];
    $title = $p[3];
    $area .= '
    <area  shape="circle" coords="'.$x.','.$y.',4" href="javascript:void(0);"
    onmouseover="return overlib(\''.$txt.'\', CAPTION,'.$title.');"
    onmouseout="return nd();">';  
}
?>

Ungetestet, aber so dürfte es gehen...

PS:
Eigendlich ist es jetzt ja PHP, und somit ein Thema im PHP-Forum wert, aber bei zwei Posts...

[bl-25]

funktioniert leider noch nicht ganz, da wo 2 oder mehr punkte am gleichen fleck sind wird kein overlib angezeigt

Die Fehler waren /n | usw. damit kommt overlib nicht klar

//Edit 1 .. Ja wollte wegen dem bisschen nicht wieder ein neues Thema aufmachen