Thomas Schmieder: Image Map erzeugen, Werkzeug??

Guten Morgen liebes Forum,

seid Ihr auch schon alle Da?

Ich will das Rad nicht neu erfinden, darum habe ich hier schon alles durchgesucht, aber nix gefunden. Vielleicht habe ich auch nur die falschen Suchbegriffe gewählt?

Ich suche ein "Werkzeug" mit dem ich eine Image-Map erzeugen kann. Das möchte ich gerne in eine Webseite einbauen. Die steht auf einem Server mit PHP. Das sage ich, weil vielleicht einer eine Lösung kennt, die auch die Sicherheit berücksichtigt.

Das Ergebnis soll dann in einer Datenbank abgelegt werden.

Die Bedienung muss so "idotensicher" sein, dass sie für Laien verständlich ist.

Hat jemand eine Idee, wo ich sowas finde?

Sonst muss ich heute selber was schreiben und bis es läuft, ist der Tag bestimmt rum.

Liebe Grüße

Tom

  1. Guten Morgen liebes Forum,

    seid Ihr auch schon alle Da?

    --> http://www.clowntheater-pipolino.net/kasperl/kasperltheater.htm

    1. Guten Morgen liebes Forum,

      seid Ihr auch schon alle Da?

      --> http://www.clowntheater-pipolino.net/kasperl/kasperltheater.htm

      Hallo Linksetzer, der Tipp war wirklich Klasse. Das passt genau in die Spielidee, die wir hier ausarbeiten. Weißt Du, wie/womit das gemacht ist?

      Gruß

      Tom

  2. Hallo Thomas,

    mir ist zwar nicht so ganz klar, was du jetzt eigentlich willst, aber zum Erzeugen von Image Maps hat sich MapMaker bewährt:
    http://dsbnj.tripod.com

    Viele Grüße

    Patrick Canterino

  3. Hallo nochmals liebe Leute,

    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.

    Das kann ich natürlich im Ping-Pong-Verfahren mit dem Server abmachen. Bis dann aber eine Polylinie erfasst ist, vergeht mir zuviel nutzloser Traffic.

    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???

    So, wie ich das hier versucht habe, kam ich nicht weit.
    onSubmit funktioniert schon gar nicht, wohl weil ja gar nicht übertragen wird????

    <!-- CreateMap.htm ------ -->
    <html>
    <head>
      <Title>Verweise erzeugen</title>

    <script language="JavaScript" type="text/JavaScript>
    <!--
    function setPoint()
    {
      alert("hallo");
    }

    //-->
    </script>

    </head>

    <body>

    <form action="#">
      <input type="image" src="gelb296x217.gif" onClick="setPoint()">
    </form>

    </body>

    </html>

    Gruß

    Tom

    1. 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