nicht angemeldet
Inhalt eines DIV-Containers über Funktion scrollen !?
Mich beschäftig seit Tagen folgendes Problem:
Ich habe ein DIV-Container, dessen Inhalt eine sehr große Grafik (Landkarte, 3000*3000px) darstellt. Nun möchte ich mit Hilfe einer Funktion erreichen, dass bestimmte Positionen der Grafik angescrollt werden. Beispiel: "Scrolle zu den Koordinaten (x,y)!". Mit window.scrollTo(x,y) erreicht man zwar das horizontale und vertiale Scrollen, allerdings logischerweise, des gesamten Explorer-Fensters. Ich möchte eben nur, dass der Inhalt des DIV entsprechend der Angaben gescrollt wird.
Kann jemand weiterhelfen ??
MfG Tobias
P.S. Bitte keine Einwände zur Dateigröße; Die Applikation wird lediglich offline verwendet !
-
Mich beschäftig seit Tagen folgendes Problem:
Ich habe ein DIV-Container, dessen Inhalt eine sehr große Grafik (Landkarte, 3000*3000px) darstellt. Nun möchte ich mit Hilfe einer Funktion erreichen, dass bestimmte Positionen der Grafik angescrollt werden. Beispiel: "Scrolle zu den Koordinaten (x,y)!". Mit window.scrollTo(x,y) erreicht man zwar das horizontale und vertiale Scrollen, allerdings logischerweise, des gesamten Explorer-Fensters. Ich möchte eben nur, dass der Inhalt des DIV entsprechend der Angaben gescrollt wird.
Kann jemand weiterhelfen ??
MfG Tobias
P.S. Bitte keine Einwände zur Dateigröße; Die Applikation wird lediglich offline verwendet !
Hi,
ich habe jetzt keine fertigen Code parat, aber prinzipiell kannst Du es so machen...
Du machst einen div in der Größe die sichtbar sein soll und machst einen zweiten div in den ersten hinein in dem das Bild enthalten ist.Dann formulierst Du ein JavaScript, daß den Bild-div relativ zum "Container-div" positioniert.
Wenn ein div im anderen ist, dann sind die Koordinaten immer relativ zu dem Containerdiv zu verstehen. x=0 und y=0 wäre dann die linke obere Ecke des Containerdiv's und nicht die des Fensters.
Das variert ein bißchen je nach Browser und Plattform, geht aber prinzipiell.
Hab sowas schon gemacht, aber wie gesagt ich habe jetzt den Code nicht vor mir.Grüße aus Berlin
-
Hi,
Erstmal danke. Grundprinzip habe ich verstanden. Hier mal ein Teil des Codes:
...
function generateMapField( name , width , height )
{
var src = name.toLowerCase( );
src = src.replace( /ä/, "ae" );
src = src.replace( /ö/, "oe" );
src = src.replace( /ü/, "ue" );
src = src.replace( /-/, "_" );
src = src.replace( / /, "" );
var usemap = src;
var mapField = "<div style="white-space:nowrap; overflow: scroll;
width:" + (availWidth - 300) + "px; height=" +
(availHeight - 80) + "px">"+
"<table>" +
"<tr>" +
"<td style="white-space:nowrap;">" +
"<img src="jpg/karten/" + src + ".jpg"
width=" + width + " height=" + height
+ " usemap=#" + usemap + ">" +
"</td>" +
"</tr>" +
"</table>" +
"</div>";document.getElementById( MAP_FIELD ).innerHTML = mapField;
}Nach deinen Angaben müßte ich die gesamte Tabelle in ein weiteres DIV setzte, korrekt ? Problem; wie genau wird Positionierung dieses DIV notiert ?
MfG Tobias
-
Hi hannibal,
Hat sich wahrscheinlich erledigt. Schau' mal in das Posting von Joachim. Ich denke, so hast du das auch gemeint, oder ?
MfG und Danke, Tobias
-
Hi hannibal,
Hat sich wahrscheinlich erledigt. Schau' mal in das Posting von Joachim. Ich denke, so hast du das auch gemeint, oder ?
MfG und Danke, Tobias
Ja, ich denke schon.
Hab leider nicht so viel Zeit zZ. solchen Code wirklich nachzuvollziehen.
Ich hatte mir damals, als ich vor dem selben Problem stand einfach irgendwo in einer JavaScript-ScriptDatenbank ein Beispiel heruntergeladen und es dann nachprogrammiert.Aber das Prinzip ist auf jeden Fall richtig. Einen Div sozusagen als Sichtberenzer für einen darin verschachtelten anderen Div zu verwenden.
Das kannst Du endlos weiterspinnen, wird dann aber irgendwann sehr unübersichtlich.PS. ist das ein Aprilscherz mit den skandinavischen Threadüberschriften?
Grüße aus Berlin
-
-
-
-
Hi,
schau Dir mal das Testscript an: zwei verschachtelte Divlayer, der Aeussere "begrenzt" das Fenster, dem Inneren weist Du Koordinaten zu:
<html><head>
<style type="text/css">
#fenster {position:absolute;top:100px;left:100px;width:100px;height:100px;clip:rect(0 100 100 0);overflow:hidden;}
#bild {position:absolute;top:0px;left:0px;width:auto;height:auto;layer-background-color:red;background:red;border:none;}
</style>
<script language="javascript" type="text/javascript">
function go(x,y){
refDiv('fenster','bild').left = x + (document.documentElement? "px" : 0);
refDiv('fenster','bild').top = y + (document.documentElement? "px" : 0);
}
// Liefert Div-Referenzierung fuer NC, NC6 und IE
function refDiv(oDiv,iDiv){
return (document.layers? document.layers[oDiv].document.layers[iDiv] : (document.all? document.all[iDiv].style : document.getElementById(iDiv).style));
}
</script>
</head><body>
<div id="fenster">
<div id="bild">
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
HierkommtDeinschoenstesallerPanoramabilderhineindamimansichallesansehenkann<br>
</div>
</div>
Achtung: Minus-Zahlen eingeben, denn der Layer bewegt sich ja im Minus-Bereich.
<form Name="dpl">
<input type="text" name="xval" size="5"><br>
<input type="text" name="yval" size="5"><br>
<input type="button" value="go" onclick="go(this.form.xval.value,this.form.yval.value)">
</form>
</body></html>Gruesse Joachim
-
Hi Joachim,
perfekt. Das ist genau so, wie ich das brauche. Ich werd' mir deinen Code mal genauer ansehen.
Vielen Dank und MfG Tobias
-
perfekt. Das ist genau so, wie ich das brauche
Leider doch nicht ganz. Nach der Eingabe der gewünschten Koordinaten ist ein manuelles Scrollen mittels Scroll-Leisten in die Bereiche über bzw. links neben den Koordinaten nicht mehr möglich. Woran liegt's ??
MfG Tobias
-
-