Katja: input type= image usemap Falsch verstanden?

Guten Morgen !
Habe versucht mit input type="image" ein map zu erzeugen, doch funktioniert es nicht, obwohl es in self steht.
http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#input
In Attributreferenz zu input hatte ich es auch so gefunden
Geht das überhaupt ? Oder funktioniert dies nur mit <img src=""..
Auf bald Katja

  1. Moin!

    Habe versucht mit input type="image" ein map zu erzeugen, doch funktioniert es nicht, obwohl es in self steht.
    http://selfhtml.teamone.de/javascript/objekte/htmlelemente.htm#input
    In Attributreferenz zu input hatte ich es auch so gefunden

    Nicht alles, was in SelfHTML steht, muss auch korrekt sein. Fehler sind möglich - und wenn gewisse Dinge selten benutzt werden, fallen sie auch nicht auf.

    Geht das überhaupt ? Oder funktioniert dies nur mit <img src=""..

    Was hast du versucht? Welches Ergebnis hast du erwartet? Welches Ergebnis kam stattdessen raus? Wie lautet dein Quelltextausschnitt?

    --
    - Sven Rautenberg
    1. Hallo !

      Was hast du versucht? Welches Ergebnis hast du erwartet? Welches Ergebnis kam stattdessen raus? Wie lautet dein Quelltextausschnitt?

      So funktionierte es mit <img src="" usemap="">
      <map name="Landkarte">
      <area shape="circle" coords="50,50,40" href="http://www.koblenz.de/" alt="Koblenz">
      <area shape="rect" coords="2,144,10,156" href="http://www.wiesbaden.de/" alt="Wiesbaden">
      <area shape="rect" coords="144,2,150,12" href="http://www.mainz.de/" alt="Mainz">
      </map>

      <img src="BALL_ANI.GIF" usemap="#Landkarte">

      wollte jedoch mit
      <input type="image" src="BALL_ANI.GIF" usemap="#Landkarte">
      das gleiche erreichen , geht jedoch nicht! Es iost nur das Bild zusehen.
      Gruß Katja

      1. Moin!

        Was hast du versucht? Welches Ergebnis hast du erwartet? Welches Ergebnis kam stattdessen raus? Wie lautet dein Quelltextausschnitt?

        So funktionierte es mit <img src="" usemap="">
        <map name="Landkarte">
        <area shape="circle" coords="50,50,40" href="http://www.koblenz.de/" alt="Koblenz">
        <area shape="rect" coords="2,144,10,156" href="http://www.wiesbaden.de/" alt="Wiesbaden">
        <area shape="rect" coords="144,2,150,12" href="http://www.mainz.de/" alt="Mainz">
        </map>

        <img src="BALL_ANI.GIF" usemap="#Landkarte">

        wollte jedoch mit
        <input type="image" src="BALL_ANI.GIF" usemap="#Landkarte">
        das gleiche erreichen , geht jedoch nicht! Es iost nur das Bild zusehen.

        Ich frage mich (und diese Frage hast du nicht beantwortet), was du erreichen willst?

        Dein funktionierendes Beispiel besteht aus Links. Damit ruft man (ich erzähle dir sicher nichts neues) neue Seiten auf.

        Ein <input type=image>-Button aber schickt ein Formular ab. Wohin das Formular geschickt wird, steht einzig und allein im action-Attribut des zugehörigen <form>-Elements. Insofern ist es von dieser Betrachtung aus unsinnig, mit einer Image-Map verschiedene Link-Ziele zu definieren und dem Input-Button zuzuweisen, weil der zugrundeliegende Mechanismus sich unterscheidet.

        Wenn das Formular hingegen je nach Klickbereich an unterschiedliche Form-Ziele versandt werden soll, ist ohnehin Javascript angesagt - und du kannst dann ohne weiteres ein <img> mit usemap benutzen wie gehabt.

        Das W3C sagt dazu (http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1):
        "When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x- value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

        If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches"

        Du kriegst im Skript die Klickposition mitgeteilt und könntest sie serverseitig auswerten - allerdings wird in jedem Falle das Formular abgeschickt, was unter Umständen unerwünscht ist. Ein Image-Button mit usemap ist in diesem Fall dann die falsche Lösung.

        --
        - Sven Rautenberg
        1. Moin!

          Was hast du versucht? Welches Ergebnis hast du erwartet? Welches Ergebnis kam stattdessen raus? Wie lautet dein Quelltextausschnitt?

          So funktionierte es mit <img src="" usemap="">
          <map name="Landkarte">
          <area shape="circle" coords="50,50,40" href="http://www.koblenz.de/" alt="Koblenz">
          <area shape="rect" coords="2,144,10,156" href="http://www.wiesbaden.de/" alt="Wiesbaden">
          <area shape="rect" coords="144,2,150,12" href="http://www.mainz.de/" alt="Mainz">
          </map>

          <img src="BALL_ANI.GIF" usemap="#Landkarte">

          wollte jedoch mit
          <input type="image" src="BALL_ANI.GIF" usemap="#Landkarte">
          das gleiche erreichen , geht jedoch nicht! Es iost nur das Bild zusehen.

          Ich frage mich (und diese Frage hast du nicht beantwortet), was du erreichen willst?

          Dein funktionierendes Beispiel besteht aus Links. Damit ruft man (ich erzähle dir sicher nichts neues) neue Seiten auf.

          Ein <input type=image>-Button aber schickt ein Formular ab. Wohin das Formular geschickt wird, steht einzig und allein im action-Attribut des zugehörigen <form>-Elements. Insofern ist es von dieser Betrachtung aus unsinnig, mit einer Image-Map verschiedene Link-Ziele zu definieren und dem Input-Button zuzuweisen, weil der zugrundeliegende Mechanismus sich unterscheidet.

          Wenn das Formular hingegen je nach Klickbereich an unterschiedliche Form-Ziele versandt werden soll, ist ohnehin Javascript angesagt - und du kannst dann ohne weiteres ein <img> mit usemap benutzen wie gehabt.

          Das W3C sagt dazu (http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1):
          "When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x- value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

          If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches"

          Du kriegst im Skript die Klickposition mitgeteilt und könntest sie serverseitig auswerten - allerdings wird in jedem Falle das Formular abgeschickt, was unter Umständen unerwünscht ist. Ein Image-Button mit usemap ist in diesem Fall dann die falsche Lösung.

          Was will ich erreichen: Ich beschäftige mich heute mit allen Dialogmöglichkeiten eines Formulars.Welche es gibt, wie ich sie auswerten kann und welchen Nutzen sie haben. Und bin dabei in SELF auf den input type"image" mit dem usemap getroffen. Und wollte nun herrausfinden wie das funktionieren soll.
          Im Grunde hast Du Recht und das ich die x-value und y-value in den POST_VARS auswerten kann ist auch klar.Doch ist dann der Hinweis in dieser Form in SELf eigentlich nicht richtig , denn ich kann kein vergleichbares map aufbauen wie bei der img Angabe.
          Doch möchte ich mich auf jeden Fall für Deine Hilfe bedanken
          Viele Grüße und einen schönen Tag noch Katja

          1. Moin!

            Was will ich erreichen: Ich beschäftige mich heute mit allen Dialogmöglichkeiten eines Formulars.Welche es gibt, wie ich sie auswerten kann und welchen Nutzen sie haben. Und bin dabei in SELF auf den input type"image" mit dem usemap getroffen. Und wollte nun herrausfinden wie das funktionieren soll.
            Im Grunde hast Du Recht und das ich die x-value und y-value in den POST_VARS auswerten kann ist auch klar.Doch ist dann der Hinweis in dieser Form in SELf eigentlich nicht richtig , denn ich kann kein vergleichbares map aufbauen wie bei der img Angabe.

            Er ist nicht falsch. Das W3C erlaubt das Attribut usemap für Input-Buttons ja. Nur steht wenig darüber aufgeschrieben, was passieren soll.

            Meine Idee: Definiere für deine Areas mal onclick-Eventhandler. Eventuell kannst du auf diese Weise Javascript aufrufen und so beim Klicken außerhalb der Area das Abschicken des Formulars aufhalten (indem "return false;" geschickt wird). Auf diese Weise könntest du sozusagen den klickbaren Bereich "ausschneiden" und den Rest des Buttons lahmlegen - aber dennoch die Vorteile des Image-Buttons ausnutzen.

            --

             - Sven Rautenberg