Gimp Image Map Link

[cls09]

Guten Abend, ich arbeite gerade an meiner Webseite. Ich benutze als 1. Seite eine Hintergrundgrafik, auf der ich 3 Links platzieren will. Das geht auch sehr gut mit Gimp Imagemap Funktion. Zu meinem Problem: ich will später die Hintergrunddatei auf 100% Breite und Höhe setzen automatisch, damit es bei jedem Bildschirm die volle Fläche genutzt wird. Wenn ich jetzt aber mit 1024*800 als Basis Bild die Links setze, verschieben sich die Koordinaten der Weblinks. Gibt es eine Möglichkeit, relative Bereiche bei Gimp oder durch ein HTML Code Befehl zu definieren, sodass sich der Link Bereich im Bild nicht ändert auch bei anderen Displaygrößen?

Vielen Dank

[Nitya]

Hallo cls09,

als „Hintergrundgrafik“ bestimmt nicht.
Diese kann man nicht mit einer map verweis-sensitiv machen.

Mit relativen Angaben der Image-Ausmaße geht es nicht, wie Du schon richtig erkannt hast.
Die einzige Möglichkeit die ich sehe, wäre mittels Javascript die Fensterbreite auszulesen und entsprechend die map zu ändern. (viel Aufwand und Rechnerei)

h♥rzlichen Gruß
Nitya

[Efchen]

Die einzige Möglichkeit die ich sehe, wäre mittels Javascript
die Fensterbreite auszulesen

Wobei natürlich der Viewport, also der Bereich, in dem die Website dargestellt wird, auch kleiner sein kann, als die Fensterbreite.

Meines Wissens kennt JavaScript die Fensterbreite auch gar nicht.

Und wenn JavaScript abgeschaltet ist, geht es sowieso nicht mehr.

[Efchen]

Moin!

Ich benutze als 1. Seite eine Hintergrundgrafik, auf der ich 3
Links platzieren will.

Das geht nicht vernünftig.

Das geht auch sehr gut mit Gimp
Imagemap Funktion.

Gimp hat damit eigentlich nichts zu tun, aber Du hast ja schon gelesen, dass das nicht mit Hintergrundgrafiken geht. Imagemaps sind Images im Vordergrund.

Zu meinem Problem: ich will später die
Hintergrunddatei auf 100% Breite und Höhe setzen automatisch,
damit es bei jedem Bildschirm die volle Fläche genutzt wird.

Was hat das mit dem Bildschirm zu tun? Richtig, nichts. Die Größe des Bildschirms ist für Websites bekanntermaßen nicht relevant.

Wenn ich jetzt aber mit 1024*800 als Basis Bild die Links
setze

Dann kann es bei der selben Auflösung schon ganz anders aussehen, wenn zwei Leute unterschiedliche Tool- oder Sidebars benutzen oder ihre Fenster nicht maximiert haben oder unterschiedlich Größen. Der Viewport, also der Bereich in dem die Website dargestellt wird, ist fast immer deutlich kleiner als das, was die Auflösung hergibt.

Gibt es eine Möglichkeit, relative Bereiche durch ein
HTML Code Befehl zu definieren

Mit HTML hat das nichts zu tun, HTML ist nicht für die Darstellung da, sondern für die Semantik. Wenn dann ist dafür CSS zuständig.

Das Problem ist, dass Du relative und pixelgenaue Angaben nicht mischen kannst. Deine Imagemap ist aber in Pixeln realisiert (Koordinaten der Klickbereiche in Pixeln). Beides gemischt geht nicht.

sodass sich der Link Bereich
im Bild nicht ändert auch bei anderen Displaygrößen?

Schon bei den selben Displaygrößen tritt Dein Problem auf.

Du musst die selben Einheiten benutzen. Dann gehts.
Mit JavaScript sollte man sowas nicht unbedingt machen, wenn das jemand nicht aktiviert hat (vielleicht weil er es nicht darf), sieht die Site besch*eiden aus, und das geht aus Sicht der Besucher zu Deinen Lasten („was hat der denn für einen Mist gemacht!?“).

Aber man kann ja wunderbar ein Image, das als ImageMap verwendet wird, beliebig im Viewport positionieren. Du kannst halt keine Hintergrundgrafik nehmen und dann noch ein blindes Image als ImageMap darüber legen. So sind ImageMaps eben auch nicht gedacht.

Liebe Grüße,
-Efchen

[Nitya]

Wobei natürlich der Viewport, also der Bereich, in dem die
Website dargestellt wird, auch kleiner sein kann, als die
Fensterbreite.

hä?
Wird wohl keiner auf die Idee kommen availWidth auszulesen.

Meines Wissens kennt JavaScript die Fensterbreite auch gar
nicht.

die Referenz auf das window.object ist gegeben und somit steht die Eigenschaft innerWidth zur Verfügung.

Und wenn JavaScript abgeschaltet ist, geht es sowieso nicht
mehr.

na und, dann entfällt halt die „Anpassung“ und alles wird so dargestellt, wie es vorgegeben ist.

[Efchen]

Meines Wissens kennt JavaScript die Fensterbreite auch gar
nicht.

die Referenz auf das window.object ist gegeben und somit steht
die Eigenschaft innerWidth zur Verfügung.

Das sollte aber doch die Viewport-Breite und nicht die Fensterbreite sein, oder nicht? Dann ist das ja genau das richtige.

Und wenn JavaScript abgeschaltet ist, geht es sowieso nicht
mehr.

na und, dann entfällt halt die „Anpassung“ und alles wird so
dargestellt, wie es vorgegeben ist.

Klar, man sollte sich nur nicht daerauf verlassen - so wie es jetzt ist, verzerrt sich ja wohl alles. Und wenn das das Verhalten für JavaScript-lose ist, dann muss sich da jemand noch Gedanken machen.

[Nitya]

Das sollte aber doch die Viewport-Breite und nicht die
Fensterbreite sein, oder nicht? Dann ist das ja genau das
richtige.

Sage mir den Unterschied zwischen Viewport-Breite und Fensterbreite (des Browsers).

Du willst das doch nicht mit Bildschirm/Screen verwechseln?

Und wenn JavaScript abgeschaltet ist, geht es sowieso nicht
mehr.

na und, dann entfällt halt die „Anpassung“ und alles wird so
dargestellt, wie es vorgegeben ist.

Klar, man sollte sich nur nicht daerauf verlassen - so wie es
jetzt ist, verzerrt sich ja wohl alles. Und wenn das das
Verhalten für JavaScript-lose ist, dann muss sich da jemand
noch Gedanken machen.

Wieso verzerrt?
Habe doch geschrieben, dass es mit relativen Angaben für das Image nicht funktioniert.

[Efchen]

Sage mir den Unterschied zwischen Viewport-Breite und
Fensterbreite (des Browsers).

Der Viewport ist der Bereich innerhalb des Browserfensters, in dem die Seiten dargestellt werden. Die Fenstergröße ist die Größe des gesamten Fensters inklusive Tool- und Sidebars.
So, wie Du sonst über mich herziehst solltest Du den Unterschied aber wissen!

Oder hast Du z.B. im Firefox noch nie CTRL-H gedrückt?
Das ist IMHO nicht die einzige Sidebar für Browser, die den Viewport auch in der Breite einschränken kann, so dass Viewportbreite

[Nitya]

Der Viewport ist der Bereich innerhalb des Browserfensters, in
dem die Seiten dargestellt werden. Die Fenstergröße ist die
Größe des gesamten Fensters inklusive Tool- und Sidebars.

Naja …
dann ist ja innerWidth genau das, was Du mit Viewport-Breite bezeichnest.

Ein Image mit width:100% wird nicht über den „Fensterrahmen“ hinaus angezeigt. Und wenn ein Image per JS so angepasst werden soll, wie es mit width:100% geschieht, dann ist es doch wohl „logisch“, dass mit Fensterbreite die „innere“ gemeint ist. Und das sind die Eigenschaften innerHeight und innerWidth des window.objects !
Was also sollte man hierbei mit outerWidth/Height anfangen wollen?

Da eine Map nicht „richtig“ funktioniert, wenn ein Image mit relativen Angaben definiert wird, heißt das:

im Quelltext werden für das Image absolute Werte definiert und dafür die map.

diese absoluten Werte werden entsprechend der mit JS auslesen Werte des „Viewports“ angepasst, ebenso die map, genau gesagt: die Values der coords-Attribute

ist JS deaktiviert, dann ist das Image kleiner oder größer als der „Viewport“ … kann auch sein, dass es zufällig passt … jedenfalls greift die Map richtig.

Was soll sich da verzerren?
Die Vorgabe keine relativen Angaben zu verwenden ist doch wohl klar!

[Efchen]

dann ist es doch wohl „logisch“

Ich habe schon lange aufgehört, anzunehmen, dass die meisten Fragesteller logisch denken.
Würden das alle tun, gäbe es keine „Auflösungsweichen“, die sind ja wohl der Inbegriff des Unlogischen.

Was soll sich da verzerren?

Ich bezog mich auf den Satz von cls09:

Wenn ich jetzt aber mit 1024*800 als Basis Bild die Links setze,
verschieben sich die Koordinaten der Weblinks.