Antje Hofmann: NACHTRAG: Image Map erzeugen, Werkzeug??

Beitrag lesen

Hallo Tom

nun ist es Nachmittag und ich bin immer noch nicht fertig mit dem Tool. Ich hoffe nur, dass nicht alle irgendwie mit Fußball beschäftigt sind. Ich habe da zwei drei Fragen:

Es wird ein Spiel geschrieben. Die Leute können Bilder auf den Server hochladen und Aufgaben dazuschreiben. Hinter den Bildern verstecken sich Links zu den Lösungen. Jeder Teilnehmer muss in der Lage sein, in seinen Bildern Hotspots zu setzen, also image maps zu erzeugen.

Ich würde also die Koordianten gerne vor Ort z.B. in einer Textarea erfassen und dann gesammelt abschicken. Kann man denn bei

<input type="image"... keinen EventHandler installieren und dann die Daten abfragen???

generell geht es schon. Beim Absenden eines grafischen Submitbuttons werden die die Klickkoordinaten mit übertragen. In PHP kriegt du die z.B. mit bildname_x und bildname_y.

Ich habe dir mal eine JavaScript-Lösung gebastelt, welche dir die Klickkoordinaten liefert:

<html>
<head>
<title>Koordinaten</title>

<script type="text/javascript">
  <!--

function koordinaten(ereignis)
  {
   if (window.opera) {
   //Opera, unabhaengig von der Einstellung

alert(ereignis.clientX-ereignis.target.offsetParent.style.pixelLeft+"\n" +(ereignis.clientY-ereignis.target.offsetParent.style.pixelTop))
   } else if (document.all) {
           //Internet Explorer
          alert(window.event.offsetX+'\n'+window.event.offsetY);

} else if (document.layers || document.getElementById)
             {
              //Netscape 4, 6, Mozilla
              alert(ereignis.layerX+"\n"+ereignis.layerY)
             }
     }

function init()
  {   //ueberwachung der Grafik
  if (document.layers) document.layers[0].document.images.bild.onmouseup=koordinaten;
  else document.images.bild.onmouseup=koordinaten;
  }

//-->
</script>
</head>
<body onload="init()">

<div style="position:absolute;top:100px;left:100px;"><img name="bild" src="gelb296x217.gif" border="0"></img></div>

</body>
</html>

Bedingung, dass es funktioniert ist, dass das Div-Element die Grafik umschließt und die Grafik an Position 0,0 beginnt. Die absolute Positionierung benötigt der Netscape 4.

Damit solltest du eigentlich das haben, was du für das Erstellen der Hotspots benötigst. Der Rest ist dann Funktionalität :-)

Viele Grüße

Antje