Mapfuntkion auf einem variablen Bild

[hs2000]

Ich möchte gerne ein Bild in meine Seite einbauen, welches stets den aichtbaren Bereich ausfüllt, so weit kein Problem.

<img src="Hintergrund1,5n.jpg" width="100%" height="100%" border="0" usemap="test">

Nun möchte ich auf dem Bild verschiedene Bereiche per Map-Funktion einrichten. Als Beispiel hier die linke obere Ecke.

<map name="test">
  <area shape="rect" coords="0,0,25%,25%" border="0" href="Seite2.html">
</map>

Leider erkennt er die % Zeichen nicht an und nimmt 25 immer nur als absoulte Pixelanzahl.

Da meine Bild seine Größe auf Größe des sichtbaren Bereiches anpasst, kann ich aber leider nicht mit absoluten Zahlen arbeiten.
Hat jemand einen Tipp, wie ich meinem Problem Herr werde ?

mit Freundlichen Grüßen

[Gernot Back]

Hallo hs2000,

Da meine Bild seine Größe auf Größe des sichtbaren Bereiches anpasst, kann ich aber leider nicht mit absoluten Zahlen arbeiten.
Hat jemand einen Tipp, wie ich meinem Problem Herr werde ?

Du müsstest mit Javascript über den onresize-Handler des Window-Objekts auslesen, welche offsetWidth und welche offsetHeight dein Bild nach dem Resize in Pixeln hat und daraus die Werte für die COORDS-Attribute in den AREA-Elementen deiner zugeordnetn MAP dynamisch im gewünschten Verhältnis neu berechnen.

Gruß Gernot

[Kalle_B]

<map name="test">
  <area shape="rect" coords="0,0,25%,25%" border="0" href="Seite2.html">
</map>

Der 3C- Validator hat bei mir immer gemosert, wenn ich Prozentangaben in HTML ohne Anführungsstriche machte.

Hast du dieses schon probiert:

coords="0,0,'25%','25%'"

Kalle

[Der Martin]

Hallo,

<area shape="rect" coords="0,0,25%,25%" border="0" href="Seite2.html">

Der 3C- Validator hat bei mir immer gemosert, wenn ich Prozentangaben in HTML ohne Anführungsstriche machte.

wie bitte? Nein, das hast du wohl missverstanden. Der Validator kritisiert -zu Recht- wenn Attributwerte nicht in Anführungszeichen stehen. Denn das ist in XHTML _immer_ vergeschrieben, und in HTML dann, wenn der Attributwert Non-Name-Character enthält, also Zeichen, die keine Buchstaben oder Ziffern sind. Empfehlenswert ist es _immer_.

Hast du dieses schon probiert:
coords="0,0,'25%','25%'"

Das ist allerdings Unfug. Der gesamte Attributwert, also "0,0,25%,25%", steht in Anführungszeichen, das ist völlig korrekt so. Weitere Anführungszeichen innerhalb des Attributwerts sind hier genauso fehl am Platz wie etwa im Parameterstring der Javascript-Methode window.open().

Die Beschreibung des area-Elements erwähnt aber immer nur Koordinaten in Pixel. Es sieht also so aus, als ob prozentuale Angaben hier nicht möglich wären.
Als recht aufwendige Abhilfe fällt mir nur ein, das Bild erst per Javascript auf die gewünschte Größe zu bringen und dabei die Koordinaten sämtlicher area-Elemente mit umzurechnen. Wie gesagt, nicht gerade trivial, aber ich sehe keine andere Möglichkeit.
Ästhetischer Nachteil: Ist Javascript deaktiviert, wird das Bild einfach in natürlicher Größe dargestellt.

So long,
 Martin

[Kalle_B]

Hallo,

coords="0,0,'25%','25%'"
Das ist allerdings Unfug ...

Gut, dann ein zweiter Anlauf. Bild und Klickbereiche entkoppeln:

<img style='position:absolute; width:100%; height:100%' ...>

<a href='...'><div style='width:25%; height:25%'></div></a>

Kalle

[Detlef G.]

Hallo Kalle

Gut, dann ein zweiter Anlauf. Bild und Klickbereiche entkoppeln:

<img style='position:absolute; width:100%; height:100%' ...>

<a href='...'><div style='width:25%; height:25%'></div></a>

Nö, das ergibt ungültiges HTML.

Mit <a href="..." style="[code lang=css]display:block;..."></a>[/code] dürfte es aber möglich sein.

Auf Wiederlesen
Detlef