Imagemap Koordinaten

[sers1985]

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

[Der Martin]

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

[Sers1985]

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

[ChrisB]

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

[Gunnar Bittersmann]

@@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'

[ChrisB]

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

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

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

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

Qapla'