sers1985: Imagemap Koordinaten

Hallo, eine Frage:
Habe eine Imagemap erstellt:

<div style="position:absolute;top:0px;height:0px;width:100%;height:100%;z-index:-1;margin:0px;padding:0px;">  
 <img src="img/01.jpg" width="100%" height="100%" usemap="#start" name="start">  
</div>

Muss so aussehen da sie den Bildschirm füllen soll. Dann kommt:

<map name="start" id="map#1">

<area shape="rect" coords="300,150,400,200" href="img/xxx.jpg" alt="test" title="test" />  
</map>

Funktioniert soweit auch.. Dann änder ich die Auflösung auf z.B. 800x600 und schon ist der klickbare Bereich wo ganz anders. Sehr witzig auch dass Prozentangaben nicht möglich sind. Welche Möglichkeit gibt es?

Danke

  1. Hallo,

    Habe eine Imagemap erstellt:

    <div style="position:absolute;top:0px;height:0px;width:100%;height:100%;z-index:-1;margin:0px;padding:0px;">

    <img src="img/01.jpg" width="100%" height="100%" usemap="#start" name="start">
    </div>

      
    seltsam, dass dein Container-div sowohl eine Höhe von 0px, als auch von 100% haben soll. ;-)  
      
    
    > ~~~html
    
    <map name="start" id="map#1">  
    
    > <area shape="rect" coords="300,150,400,200" href="img/xxx.jpg" alt="test" title="test" />  
    > </map>
    
    

    Funktioniert soweit auch.. Dann änder ich die Auflösung auf z.B. 800x600 und schon ist der klickbare Bereich wo ganz anders.

    Logisch, weil du das Bild prozentual skalierst, die Koordinaten für die Imagemap aber absolut angibst. Das passt nur zusammen, wenn das Bild in Originalgröße angezeigt wird.

    Sehr witzig auch dass Prozentangaben nicht möglich sind.

    Wer sagt das?

    Ciao,
     Martin

    --
    F: Wer ist der Herrscher über Wasser, Wind und Wellen?
    A: Der Friseur.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo,

      Habe eine Imagemap erstellt:

      <div style="position:absolute;top:0px;height:0px;width:100%;height:100%;z-index:-1;margin:0px;padding:0px;">

      <img src="img/01.jpg" width="100%" height="100%" usemap="#start" name="start">
      </div>

      
      >   
      > seltsam, dass dein Container-div sowohl eine Höhe von 0px, als auch von 100% haben soll. ;-)  
      >   
      > > ~~~html
      
      <map name="start" id="map#1">  
      
      > > <area shape="rect" coords="300,150,400,200" href="img/xxx.jpg" alt="test" title="test" />  
      > > </map>
      
      

      Funktioniert soweit auch.. Dann änder ich die Auflösung auf z.B. 800x600 und schon ist der klickbare Bereich wo ganz anders.

      Logisch, weil du das Bild prozentual skalierst, die Koordinaten für die Imagemap aber absolut angibst. Das passt nur zusammen, wenn das Bild in Originalgröße angezeigt wird.

      Sehr witzig auch dass Prozentangaben nicht möglich sind.

      Wer sagt das?

      Ciao,
      Martin

      Danke erstmal für die Antwort. Hast recht, da war ein kleiner Fehler drin.
      Also Prozentangaben sollen von keinem Browser richtig interpretiert werden können habe ich gelesen. Habs auch eben mal getestet:

      <div style="position:absolute;top:0px;width:100%;height:100%;z-index:-1;margin:0px;padding:0px;">  
      <img src="img/01.jpg" width="100%" height="100%" usemap="#start" name="start">  
      </div>  
      <map name="start" id="map#1">  
      <area shape="rect" coords="25%,30%,80%,80%" href="img/01.jpg" alt="test" title="test" />  
      </map>
      

      Das funktioniert auf jeden Fall nicht. Kann man da gar nichts machen?

      Danke

      1. Hi,

        bitte keine sinnlosen Fullquotes!

        Also Prozentangaben sollen von keinem Browser richtig interpretiert werden können habe ich gelesen. [...]
        Kann man da gar nichts machen?

        Doch - Suchen.
        Bspw. googlen nach html scale "image map" percent liefert schon direkt einen Treffer Dynamically Resizing Image Maps, der sich mit der Thematik an Hand einiger Beispiele auseinandersetzt.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. @@ChrisB:

          nuqneH

          einen Treffer Dynamically Resizing Image Maps, der sich mit der Thematik an Hand einiger Beispiele auseinandersetzt.

          Und welches davon geht ohne JavaScript?

          Dabei ist das gar nicht erforderlich. Einfach keine Imagemap verwenden, sondern einen stinknormalen Link. Diesen ebenfalls absolut positionieren – mit Prozentangaben.

          Das Leben kann so einfach sein.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Hi,

            Einfach keine Imagemap verwenden, sondern einen stinknormalen Link. Diesen ebenfalls absolut positionieren – mit Prozentangaben.

            Das Leben kann so einfach sein.

            • so lange du dich auf rechteckige Linkareas beschränken willst.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
            1. @@ChrisB:

              nuqneH

              • so lange du dich auf rechteckige Linkareas beschränken willst.

              Auch Ellipsen, Halbellipsen, Viertelellipsen, … sind möglich.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)