Grafik auf Webpage nur ausschnittsweise anzeigen.

    Ich habe folgendes Problem: Auf einer Webpage soll eine Grafik angezeigt werden. Allerdings ist die Grafik recht groß (1500*1500 Pixel) und ich habe nur für 500*500 Pixel Platz.
    Jetzt soll die Grafik nicht verkleinert werden, sondern es sollen definierte Auschnitte angezeigt werden, also bei Auswahl einer bestimmten Option nur der Bereich vom 501/501 Pixel bis zum 1000/1000 Pixel.
    In reinem HTML ist das ja nicht möglich. Allerdings möchte ich es auch vermeiden, daß der Server per PHP immer neue Auschnittsgrafiken erstellt und nur diese anzeigt, da dann die Serverlast zu groß wird.


    Gibt es eine Möglichkeit per JavaScript die gesamte Grafik vorzuladen und dann auschnittsweise anzuzeigen oder komme ich um eine "echte" Bildveränderung nicht herum? Und wenn nur zweiteres geht, wie kann ich die Arbeit der Bildveränderung (des Auschneidens) vom Server auf den Client verlagern ohne ein Java Applet schreiben zu müssen?

    So wie du dir das denkst geht es leider nicht, aber was hindert dich daran ein zusätzliches Fenster mit der Grafik und Scrollbalken aufzumachen? Oder die Grafik in vordefinierten Teilen zur Verfügung zu stellen, wobei dann jeweils die entsprechende Grafik geladen wird?

    Moin


    ich könnte mir schon vorstellen, dass das geht. Einerseits natürlich die von dir angesprochene serverseitige Lösung (z.B. mit ImageMagick/Perl oder halt PHP). Andererseits aber auch ganz normal mit HTML / CSS.


    Was IMHO auf jeden Fall ja geht, ist ein Div, dass z.B. nur die 500 Pix hat, und du darin das Bild anzeigst. Alles was da zuviel ist, wird halt nicht angezeigt. Jetzt musst du das Bild in dem Div nur verschieben, dafür wirst du dann wohl JS brauchen. Aber wie gesagt, ich wüsste jetzt nicht, was dagegen spricht. Im Prinzip könntest du dann auch noch ein Drag per JS implementieren, dass der User das Bild in dem Div selbst hin und her schieben kann. Komplett geladen ist es ja schon.


    Andere Möglichkeit wäre auch, die Bilder vorzubereiten, indem du sie schon vorher in die Bereiche einteilst. Das kann man auch automatisch serverseitig machen, und wäre ja nur einmal notwendig. Deswegen wird der Server dann auch nicht zu sehr belastet. Dafür ist halt notwendig, dass es immer die gleichen Ausschnitte sind, die du anzeigen willst.


    Gruß The-spY

    I am the lizard king - I can do anything!

    Das mit den vordefinierten Teilen ist leider nicht möglich, da ich die Ausschnitte in 20 Pixelschritten definieren will. Das würde bei der Größe also 5476 Grafiken ( (1500/20-1)*(1500/20-1)) bedeuten und damit eine immense Platzverschwendung.
    Und das mit dem eigenen Frame ist für meinen Fall eine recht unschöne Lösung, da ich später vor habe die Grafik auch noch zu vergrößern und damit würde es sehr unübersichtlich.


    Ich seh schon, ich komm wohl um die PHP Lösung nicht herum. Sowas hatte ich schon befürchtet. Mal sehen, wie lange der Server das mitmacht.


    Trotzdem Danke für die prompte Antwort.


    Ich schildere mal das Problem genauer und vielleicht fällt jemanden eine Lösung ein, an die ich noch nicht gedacht habe.
    Es handelt sich um eine große Karte und ich suche eine Möglichkeit diese auf bestimmte Koordinaten zu zentrieren. Dabei muss es allerdings die Möglichkeit geben die aktuellen Mauskkoordinaten des Users bei einem klick festzustellen und als Variablen an ein PHP Skript zu übergeben. Die Karte ist in sich leider nicht selbstähnlich, daß heisst ich kann Sie nicht einfach in kleinere Bereiche zerlegen und aus diesen Bereichen wieder ein Bild zusammensetzen. Fällt jemandem dazu etwas ein?

    Ich glaube das Overflow brauchst du nicht mal unbedingt. Ich meine in Erinnerung zu haben, dass das Bild dann automatisch abgeschnitten wird. Aber das merkst du sicher gleich, wenn du es ausprobierst.


    Ich würde dann mal schauen, was passiert, wenn du das Bild relativ mit CSS innerhalb des Divs ausrichtest. Wenn das nämlich funktioniert (dh der Browser interpretiert die relative Ausrichtung) kannst du die nämlich ganz einfach über JS ändern. Nur wenns dumm lauft, macht das nicht jeder Browser mit (zumindest der 4er NS würde mich überraschen). Und wenn du soweit bist sollte das "Bild durch die Gegend schieben" auch nur noch ein kleines Problem sein.


    Viel Spaß :)

    I am the lizard king - I can do anything!

    Wenn Du es mit den Layern machen möchtest, dann empfehl ich Dir Dreamweaver 4 zu verwenden und als kostenlose Extension den Layer-Scroller von PVII (project seven) von der Dreamweaver Extension Site herunterzuladen. Damit geht ruck zuck.

    "Technisch sind wir Übermenschen; moralisch sind wir noch nicht einmal Menschen." Aldous Huxley

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden