Hintergrundbilder und Image Maps Skalieren

[Dyewitness]

Hallo,

ich möchte für meine Seite ein Hintergrundbild und sich darauf befindliche Image Maps (Teile des Hintergrundbildes werden zu einem Link) möglichst barierrenfrei zwischen 800*600 und 2048*1536 skalieren. Dabei sollen nicht nur die 4:3 Derivate der Auflösungen, sondern nach Möglichkeit auch die 16:9 Derivate und jene exotischen Zwischendinger (1152*864 etc.) funktionieren udn das ohne vierundzwölfzig Versionen der Seite zu "programmieren" und entsprechende Mengen an Bildvarianten hochzuladen.

Ob nun Javascript, PHP , ... ist ersteinmal egal, sofern ich Schützenhilfe bekomme da meine Fähigkeiten hier doch sehr begrenzt sind.

Es mag zwar sein, dass nun Hinweise kommen, ich solle dann doch besser wie der Schuster bei meinen Leisten bleiben und das "Programmieren" was ich kann (was über HTML von vor drei bis fünf Jahren, sowie rudimentäre C, Javascript und PHP/SQL Kenntnisse nicht hinaus geht), und man mag es auch "lieb" meinen, jedoch möchte ich dazulernen, auch um im Rahmen meines Studiums, welches eben jene mir noch recht unbekannten Sprachen aufgreifen wird, nicht völlig auf dem Schlauch zu stehen und jene durchaus abstrakten Problemstellungen aus den Skripten als einzige Übung zu haben. Dies hat, auch wegen mangelnder Motivation in anderen Sprachen auf anderen Lehranstalten auch so gut, nämlich schwerlich geklappt. Vielleicht motiviert es mich ja eher, dass ich die Stunden die ich über Quellcode brüte in ein eigenes Projekt investieren, was auch über jenen Semesterschein hinaus bestand haben wird, anders als jene Taschenrechner oder Fahrtenbücher welche man gerne in den Übungen vor die Nase gesetzt bekommt.

Naja, nun genug Smalltalk. Wollte damit primär präventieren, dass manche, wie es mancherorts in anderen Foren zu anderen Themen auch leider gibt, gleich den "Du hast keine Ahnung also Schn***e, wir erklären es dir eh nicht, bist viel zu doof"-Hammer rausholen und mir eben sagen ich solle doch Tabellen und anderen HTML ABC Kram nutzen. Geht irgendwie, nur dabei darf kein Mensch mehr als 1024*768 haben und ja keinen IE. Denn da fehlen wohl einige Tags im Quellcode um die Objekte dorthin zu bändigen, wo ich sie haben will.

Also in erster Linie:

• Kann man über den Browser einzelne .jpg/.png/.bmp Dateien überhaupt so skalieren?
• Wie soll ich mich daran vagen?
• Mit welchen Problemen habe ich zu rechnen?
• Wer hilft mir mit Denkanstößen?

Das eine .jpg in der Ursprungsbildauflösung 800*600 bei 1600*1200 oder höher verpixelt ist klar. Ist ja eben nur pixelorientiert.

Aber man kann ja auch, so schätze ich, eine größere .jpg herunterrechnen lassen, wenn man nur mit 800*600 rumsurft, so dass eben jenes 1024*768er oder gar 1600*1200er Bild eben nicht bei 2048*1536 im Pixelbrei endet, oder zumindest nicht so arg.

[Jörg Peschke]

Hallo,
Mit JavaScript könntest Du natürlich prinzipiell die Bilder größer und kleiner machen: Du kannst ja über die width- und height-Attribute des Bildes zugreifen, ebenso auf die coords-Parameter.
Habs noch nicht probiert aber etwas wie:

document.getElementById("MeinBild").width = 800;
document.getElementById("MeinBild").height = 600;
document.getElementById("MeineMap").coords = "11,10,59,29";

sollte tun.

Da die Seite aber "möglichst barrierefrei" werden soll, würde ich javaScript nicht unbedingt empfehlen, denn das kann man ja abschalten. Ausserdem hättest du bei einer solchen Lösung keine wirklich größeren oder kleineren Bilder, sie würden nur durch den Browser künstlich gestreckt oder gestaucht.
Also würde ich dir empfehlen, das ganze mit PHP (oder einer anderen serverseitigen Sprache) zu machen. Bild einlesen und verkleinert wieder ausgeben. Für PERL gibt es hierzu die ImageMagick-API, für PHP müsste es was äquivalentes geben.
Natürlich kann es dauern, bis eine solche Umrechung gemacht ist, ggf würd ich mir also überlegen, die Bilder vorher runterrechnen zu lassen oder zumindest auf dem Webserver zu cachen, wenn ein Benutzer einmal eine bestimmte Größe anfordert.

Um die Kordinaten der Map umzurechnen müsste es einfach reichen, die Vektoren von einem Punkt zum nächsten mit einem Größenfaktor zu multiplizieren.

Hoffe, das hilft Dir weiter,
Schöne Grüße,

Jörg