nicht angemeldet
div-Inhalt "gescrollt darstellen"?
Gunnar BittersmannIch weiß nicht recht, wie ich es ausdrücken soll...
mache ich folgendes:
<div style="width:300px; height:270px; overflow:auto; ">
<img src="panorama.jpg" width="1200" height="250">
</div>
kann ich ein Foto scrollbar darstellen.
Das ist exakt was ich will, bis auf eine "Kleinigkeit": Der Benutzer sieht bei Aufruf der Seite immer die 300 linken Pixel des Fotos. Ich will aber, daß der mittlere Teil des Fotos zu sehen ist, also etwa die Pixel 600 bis 900, und der Scrollbalken so daß man rechts und links scrollen kann.
Ideal wäre, wenn man das genau einstellen könnte, es reicht aber auch ein zentrieren. Bisher konnte ich da keine Lösung finden. Mit direction:rtl sehe ich die rechten 300 Pixel, das trifft es also noch nicht ganz.
Hat jemand eine gute Idee?
-
Hello out there!
<div style="width:300px; height:270px; overflow:auto; ">
^^^
<img src="panorama.jpg" width="1200" height="250">
^^^
Es ist nicht davon auszugehen, dass die Dicke des Scrollbalkens bei allen Nutzern 20 Pixel ist.Der Benutzer sieht bei Aufruf der Seite immer die 300 linken Pixel des Fotos. Ich will aber, daß der mittlere Teil des Fotos zu sehen ist,
Verwende statt div einen iframe; in der in diesem angezeigten Ressource verschiebst du das Bild mit der JavaScript-Funktion http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to@title=scrollTo in die gewünschte Position. (Und nicht vergessen, dort sämtliche Innen- und Außenränder auf 0 zu setzen.)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hello out there!
<div style="width:300px; height:270px; overflow:auto; ">
^^^
<img src="panorama.jpg" width="1200" height="250">
^^^
Es ist nicht davon auszugehen, dass die Dicke des Scrollbalkens bei allen Nutzern 20 Pixel ist.Schon klar, war ja eh nur ein Beispiel.
Der Benutzer sieht bei Aufruf der Seite immer die 300 linken Pixel des Fotos. Ich will aber, daß der mittlere Teil des Fotos zu sehen ist,
Verwende statt div einen iframe; in der in diesem angezeigten Ressource verschiebst du das Bild mit der JavaScript-Funktion http://de.selfhtml.org/javascript/objekte/window.htm#scroll_to@title=scrollTo in die gewünschte Position. (Und nicht vergessen, dort sämtliche Innen- und Außenränder auf 0 zu setzen.)
Danke erstmal. Das IFrame mag ich nicht, aber scroll_to geht ja eventuell auch mit dem div. An eine Lösung mit JavaScript hatte ich auch schon gedacht, aber eigentlich gehofft es ginge ohne, also mit reinem css!
-
Hello out there!
Es ist nicht davon auszugehen, dass die Dicke des Scrollbalkens bei allen Nutzern 20 Pixel ist.
Schon klar, war ja eh nur ein Beispiel.Sollte dir aber bewusst sein, dass bei manchem Nutzer auch ein vertikaler Scrollbalken auftritt, wenn du nichts dagegen tust.
Das IFrame mag ich nicht,
Ich mag die Dinger i.A. auch nicht; sehe aber in diesem Fall kein Problem bei der Verwendung.
aber scroll_to geht ja eventuell auch mit dem div.
Ist mir nicht gelungen. Ich würde aber (ohne genauere Kenntnis) vermuten, dass diese Methode nur auf das window-Objekt anwendbar ist.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo,
aber scroll_to geht ja eventuell auch mit dem div.
Ist mir nicht gelungen. Ich würde aber (ohne genauere Kenntnis) vermuten, dass diese Methode nur auf das window-Objekt anwendbar ist.Richig. Für DOM-Elemente mit overflow-Scrolleigenschaften heißen die Einstellungen für die Scrollposition .scrollLeft und .scrollTop, dort jeweils mit Verweisen auf MSDN. Opera9 unter Windows setzt aber das folgende Beispiel auch um.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>DIV-Scroller</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> <!-- #scroller { width:300px; height:270px; overflow:auto; } #scroller img { width:1200px; height:245px; } /* height ist kritisch! */ --> </style> <script type="text/javascript"> <!-- function setScrollerCenter() { var myScroller = document.getElementById("scroller"); myScroller.scrollLeft = 600-150; // Bildbreite/2 - Scrollerbreite/2 } window.onload = setScrollerCenter; //--> </script> </head> <body> <div id ="scroller"><img src="Beispiel.jpg" alt="Bild zum Scrollen" title=""></div> </body> </html>viele Grüße
Axel
-
viele Grüße
Axel
Hallo Axel, dein Beispiel ist Klasse, das habe ich direkt umgesetzt und funktioniert auf Anhieb.
Nach wie vor wäre mir eine reine css-Lösung ohne Script zwar lieber, aber das was ich will ist wohl anders nicht möglich.
Schönen Dank,
frank-
Hallo,
dein Beispiel ist Klasse, das habe ich direkt umgesetzt und funktioniert auf Anhieb.
Ja in den aktuellen IE (6), FireFox und Opera unter Windows habe ich es getestet. Es wäre gut, wenn Du es in weiteren Browsern testen würdest, bevor Du es wirklich einsetzt. Noch besser wäre, wenn Du die Ergebnisse dann hier bekannt machen würdest.
Nach wie vor wäre mir eine reine css-Lösung ohne Script zwar lieber, aber das was ich will ist wohl anders nicht möglich.
Nein, mir ist keine Möglichkeit bekannt, die Scrollposition eines Fensters oder eines anderen Elements mit CSS zu beeinflussen.
viele Grüße
Axel
-
Hallo,
dein Beispiel ist Klasse, das habe ich direkt umgesetzt und funktioniert auf Anhieb.
Ja in den aktuellen IE (6), FireFox und Opera unter Windows habe ich es getestet. Es wäre gut, wenn Du es in weiteren Browsern testen würdest, bevor Du es wirklich einsetzt. Noch besser wäre, wenn Du die Ergebnisse dann hier bekannt machen würdest.Mac-Firefox und Safari arbeiten wie gewünscht. Linux habe ich heute keines zum Probieren. Alte Netscapes sind mir ehrlich gesagt piepegal, wer noch mit sowas arbeitet ist viel schlimmere Darstellungsprobleme gewohnt als wenn mein Bild nicht in die Mitte scrollt...
-
-
-
-
-
-