Imagemap mit prozentualen Kordinaten

Computer: Software & Programmierung HTML & CSS
1

Hallo,

ich habe eine Grafik, die sich per CSS immer an die Größe des Browserfensters anpasst, also in der Darstellung bei den Besucherinnen keine fest definierte Pixelgröße hat.

Trotzdem soll diese Grafik nun über eine Imagemap (o.ä.) an bestimmten Stellen mit Hyperlinks klickbar sein.

Gibt es eine Möglichkeit, mit HTML eine Art Imagemap zu erzeugen, die nicht Pixelkoordinaten, sondern prozentuale Koordinaten verwendet? Die herkömmliche -Konstruktion mit Pixelkoordinaten funktioniert hier nicht, da die Koordinaten fest, aber die Grafik veriabel ist.

Was könnte man für diesen Fall alternativ benutzen, wenn die Seite nur mit HTML/CSS, ggf auch mit PHP erstellt werden soll?

  • Bitte kein Flash oder ähnliches
  • Zerschneiden der Grafik (Slices) wäre auch nicht optimal

Danke für Antworten
A.

2

Hi,

Die herkömmliche
-Konstruktion mit Pixelkoordinaten funktioniert
hier nicht, da die Koordinaten fest, aber die Grafik veriabel
ist.

in der HTML-Spezifikation steht, dass als Koordinaten auch Prozentwerte erlaubt sind (http://www.w3.org/TR/html401/struct/objects.html#ade…). Hast du das schon ausprobiert?

Andreas

3

Die herkömmliche
-Konstruktion mit Pixelkoordinaten funktioniert
hier nicht, da die Koordinaten fest, aber die Grafik veriabel
ist.

in der HTML-Spezifikation steht, dass als Koordinaten auch
Prozentwerte erlaubt sind
(http://www.w3.org/TR/html401/struct/objects.html#ade…).
Hast du das schon ausprobiert?

Hallo Andreas,

ja, hab ich getestet und es hatte nicht funktioniert. Anschließend habe ich bei SelfHTML geschaut, und dort stand auch nur etwas von Pixeln.
(http://de.selfhtml.org/html/grafiken/verweis_sensiti…)

Jetzt finde ich ja mal interessant, dass es eigentlich doch gehen müsste, aber nicht mal SelfHTML weiß das…?

Gruß
A

4

Hallo Anja,

ja, hab ich getestet und es hatte nicht funktioniert.

tatsächlich; ich habe gerade etwas mit Firefox 3 herumexperimentiert, aber der interpretiert die Prozentzahlen immer als Pixel. Sorry, dann weiß ich auch nicht weiter.

Andreas

5

…

6

Hi, Anja!
Nur so ein Denkansatz, ich bin mir nicht sicher ob er dann am Detail scheitert.
Wie wäre es damit, über dem Bild in einer zweiten Ebene (z-index) transparente GIFs oder PNGs zu legen und Diese zu verlinken? Größe und Platzierung lassen sich ja prozentual angeben …
Gruß, Caro

7

SVG?
Hallo,

Trotzdem soll diese Grafik nun über eine Imagemap (o.ä.) an
bestimmten Stellen mit Hyperlinks klickbar sein.

Das geht im Prinzip vermutlich mit SVG - das ist frei skalierbar, und in SVG sind einzelne Objekte klickbar, d.h. die Links werden mitskaliert.

Wenn du dich nicht um den Internet Exploder kuemmern musst waere das ein Versuch wert.

Gruesse,
Moritz

8

Wie wäre es damit, über dem Bild in einer zweiten Ebene
(z-index) transparente GIFs oder PNGs zu legen und Diese zu
verlinken? Größe und Platzierung lassen sich ja prozentual
angeben …

Hallo Caro,

an diese Idee hatte ich schon gedacht, aber dann fehlt mir die Möglichkeit, die transparenten Bilder an die Größe des Hintergrundbildes anzupassen.

Meine Grafik, die sich an die Fenstergröße anpasst, behält ihr Seitenverhältnis bei, damit der Inhalt nicht verzerrt wird. So aber kann ich mich dann in Breite oder Höhe nicht an der Fenstergröße orientieren. (Beispiel: Bild ist passt sich exakt an Fensterhöhe an, die Bildbreite ist abhängig vom 4:3-Bildverhältnis.)

Vielleicht kann man so was mit JavaScript abfragen und die transparenten Grafiken ebenfalls mit Javascript anpassen, aber da bin ich nicht so firm.

Viele Grüße
Anja

9

Hallo Moritz,

Das geht im Prinzip vermutlich mit SVG - das ist frei
skalierbar, und in SVG sind einzelne Objekte klickbar, d.h.
die Links werden mitskaliert.

Okay, das wäre denkbar. Soweit ich weiß, kann in SVG auch ein Image (mein Foto) eingebettet werden. Die Klickbarkeit kenne ich dagegen nicht.

Wenn du dich nicht um den Internet Exploder kuemmern musst
waere das ein Versuch wert.

Naja. Will ich 30-40% meiner eventuellen Webseitenbesucher aussperren, nur weil sie den IE benutzen?
Wohl kaum. :wink:

Gruß
Anja

10

Ich habe sowas mit PHP gemacht.
Also zuerst Hintergrundbild (map) berechnen und platzieren.
Dann die umrechnen und als HTML oder auch als Javascript-Funktion in die Webseite schreiben.