Image Maps - Prozentangaben als Koordinaten untauglich

[Thomas Luethi]

Hallo,

Ich versteh ja nicht, warum Du die Bildgrösse per CSS änderst.
Normalerweise ist es das Beste, wenn man die Bilder genau in der Grösse ausliefert (vom Server zum Client), wie sie dargestellt werden sollen.
Wenn zu grosse Bilder ausgeliefert werden, ist das eine Verschwendung von Bandbreite, und die Bildqualität ist eventuell schlechter, wenn der Browser das Bild verkleinern muss, als wenn Du das Bild vorgängig mit einem anständigen Grafikprogramm auf die richtige Grösse bringst. Und Bilder, die eigentlich zu klein sind, vom Browser grösser darstellen zu lassen, ist eine noch schlechtere Idee ...

Aber nun zu Deinem "Problem":

Die HTML 4.01 Specification sagt im Absatz zu Client Side Image Maps:
"Coordinates are relative to the top, left corner of the object. All values are lengths."
Und das Wort lengths wiederum ist so definiert:
"Length: The value (%Length; in the DTD) may be either a %Pixel; or a percentage of the available horizontal or vertical space. Thus, the value '50%' means half of the available space."

Somit würde ich erwarten, dass auch Prozentangaben als Koordinaten zugelassen sind.
Ich hab eine kleine Testseite gemacht.

HTML (valide):

<p>  
  <img src="bild_512x384.jpg" width="256" height="192" alt="Bild" usemap="#bereiche3">  
  <map name="bereiche3">  
    <area shape="rect" coords="1,1,50%,100%" href="#links" alt="Links" title="Links">  
    <area shape="rect" coords="50%,1,100%,100%" href="#rechts" alt="Rechts" title="Rechts">  
  </map>  
</p>

Resultat:
(Firefox 9.0.1, MS IE 9 und Opera 11.60)
Nur zwei kleine Rechtecke von 50 Pixel Breite und 100 Pixel Höhe werden als Link aktiv, der Rest des Bildes ist inaktiv.
Das heisst, die Browser verhalten sich so, wie wenn statt Prozentangaben normale Pixelwerte dastehen würden, also so:

<area shape="rect" coords="1,1,50,100" href="#links" alt="Links" title="Links">  
<area shape="rect" coords="50,1,100,100" href="#rechts" alt="Rechts" title="Rechts">

Es spielt übrigens keine Rolle, ob man die obere linke Ecke mit "0%,0%" oder mit "1,1" definiert, und auch das Mischen von Pixel- und Prozentwerten ist hier nicht die Problemursache.

Dieses (IMHO) Fehlverhalten der Browser ist bekannt.
So schreibt z.B. Mark "Tarquin" Wilton-Jones:
"No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates."
Und Jukka "Yucca" Korpela:
"The HTML specifications allow percentage values for coordinates too, so that e.g. COORDS='0,0,100%,100%' could be used when specifying a rectangle which covers the entire image. However, many popular browsers incorrecly treat such values as pixels, i.e. ignore the % sign. Thus, don't use percentages."

Für den OP heisst das:
Wenn Deine Bilder verschieden gross sind, musst Du wohl mit JavaScript die effektive Grösse herausfinden und dann die Imagemap entsprechend anpassen.

Freundliche Grüsse
Thomas