In HTML bestimmten Punkt aus Grafik (.jpg) in Bildschirmmitte scrollen

[Schiffsfreak]

Guten Tag,

ich habe mittels html-Datei eine Landkarte (jpg-Bild 3584 x 2655) mit diversen Markierungspunkten auf dem Monitor und möchte mit entsprechendem Befehl den jeweils gewünschten Punkt ca. in die Bildschirmmitte scrollen. Beim Anklicken der Punkte (<map> oder von links angeordneten Namen (<a href...) wird eine Info (Bild) zu dem jeweiligen Punkt aufgerufen - funktioniert einwandfrei. Ich suche nach einer Möglichkeit, durch Anklicken z. B. des zutreffenden links angeordneten Namens oder der Punktnummer die o. a. Scrollaktion durchführen zu können. Mit scrollto habe ich das nicht hinbekommen, habe das aber bestimmt nicht richtig angewendet. Mein html-Buch führt den Befehl zwar auf, gibt aber keinerlei Anwendungshinweise dazu. Die Landkarte zu verkleinern macht keinen Sinn, dann wird sie zu unübersichtlich und zu detailarm. Auf Grund der Größe der Karte befinden sich natürlich viele Punkte außerhalb des sichtbaren Bereichs. Kann mir da jemand einen Tipp geben? Ich bedanke mich schon mal.

Schiffsfreak

 

[KingLz]

Wie wäre es einfach die Landkarte zu verschieben anstatt zu scrollen?

Also die Landkarte inkl. Markierungen, absolut ausgerichtet, in ein Div packen welches den Anzeigebereich füllt und im Prinzip als "Fenster" fungiert, also Teile die nicht sichtbar sind aktiv überdeckt damit es keine Scrollbalken mehr gibt.
Natürlich müsstest du zum Scrollen der Karte eine Drag and Drop Funktion einbauen, wenn man manuell in der Karte herumfahren soll. Aber ansonsten könntest du so die Karte ziemlich exakt ausrichten und vor allem auch Randbereiche korrekt ausrichten.

Das wäre jedenfalls meine Herangehensweise für das Problem.

 

[mastaqz]

Es erscheint mir sehr viel sinnvoller, die Karte mit Mapbox oder Google Maps zu machen und dann dort die Marker einzubauen. Jedem Nutzer, unabhängig vom Gerät, ein Bild mit fester Größe zu schicken ist in vielerlei Hinsicht nicht sehr sinnvoll.

 

[LencoX2]

Mit Bordmitteln geht's nur so wie Hier beschrieben.
Man könnte durch versetzt angeordnete div Elemente die per Z order unter dem Bild liegen das gewünschte verhalten hinbekommen.

 

[Schiffsfreak]

Danke für die Hinweise - ich komme leider erst heute dazu, darauf zu reagieren! Ich werde sie in den nächsten Tagen mal ausprobieren und melde mich dann wieder! Noch einmal vielen Dank und tschüüss!

 

[Andreas_]

Es gibt scrollTop und scrollLeft.

 

[Schiffsfreak]

Also - ich habe versucht! Zum besseren Verständnis habe ich mal die in Tabellen eingeordneten Bereiche farbig eingerahmt und die beiden Bilder angehängt. Mein Problem: Ich möchte, dass die blau eingerahmte Adress- bzw. Linkleiste beim Gr0ßbild an ihrem Platz bleibt und dass bei Klick auf die entsprechende Nummer (die Namen habe ich aus verständlichen Gründen weggelassen) in der Leiste der betreffende Punkt in die Mitte des Grünausschnittes gerückt wird. Bisher kann ich mit href . . . bzw map wahlweise von der Adressleiste oder dem Punkt aus ein Bild aufrufen. Künftig würde dann das href . . entfallen und der Aufruf nur noch über den dann in der Mitte befindlichen Punkt erfolgen. Mit <Div> geht das nicht. Mit scrollTop bzw. -Left bin ich nicht klar gekommen, nehme aber an, dass auch damit alles gescrollt wird. Analog würde es wohl auch mit der drag-and-drop-Funktion gehen. Ich glaube, dass der von LencoX2 vorgeschlagene Weg gehen könnte, wenn nicht auch bei ihm alle Tabellen statt nur der blauen verschoben werden. Die Testdatei habe ich herunter geladen und ausprobiert. Ich habe aber keine Ahnung, wie ich meine Tabellen usw. in diese Datei einbaue oder deren Inhalte an die richtige Stelle in meiner HTML-Datei. Leider habe ich auf meine alten Tage nur ein wenig Ahnung von HTML 4, von CSS oder JavaScript gar keine. Ich glaube, ich werde bei meiner jetzigen Lösung bleiben - zuerst wird ja ohnehin die kleine Karte angezeigt, da sind ja alle Punkte drauf, und wer sie größer macht, weiß ja dann, wo "sein" Punkt liegt.
Ich bedanke mich noch einmal ganz herzlich für Euere Hilfe!

 

[Sparta8]

Du könntest auch einfach einen Kartendienst wie Google Maps, ArcGis oder OpenStreetMap nutzen. Die haben genau die Funktion die du brauchst bereits eingebaut.

 

[Schiffsfreak]

Zu Google Maps habe ich 2 Probleme:
1. Zur Speicherung von Orten muss ich Google gestatten, meine gesamten Google-Aktivitäten zu speichern, dazu würden ja letztlich auch die Adressen gehören, die ich auf Google Maps als "Meine Adressen" eingeben würde. Obwohl ich nichts zu verbergen habe, halte ich davon gar nichts.
2. Ich habe dennoch versucht, die Verbindung mit meiner links befindlichen Adressleiste, die ja auf jeden Fall stehen bleiben und Auswahlort sein soll (es sind dort ja noch weitere Links vorhanden, die mit den Orten nichts zu tun haben) und dem dann rechts befindlichen Google-Maps-Ausschnitt im passenden Maßstab herzustellen. Wenn ich alternativ zu den jetzt vorhandenen Daten den Weblink von Google Maps für meinen Standort, den es ja anzeigt, in die blau umrandete Tabelle eingebe, kann ich es auch starten, mein Gebiet wird angezeigt. Aber mein Adressbalken ist komplett weg, und Adresspunkte könnte ich auch nur eingeben, wenn ich die Web-& App-Aktivitäten aktiviere - das möchte ich aber nicht - s. o.. Ich denke, mit den beiden anderen genannten Quellen wird es wohl nicht anders gehen.
Aber vielen Dank für Deinen Tipp!

 

[Sparta8]

Aber vielen Dank für Deinen Tipp!

Sry hab überlesen, dass du in JS noch nicht fit bist. Würde sich auszahlen wenn du dich damit beschäftigst. Die Kartendienst bieten JavaScript Schnittstellen über die du z.B. GPS Koordinaten oder eine Adresse übergibst und die Karte scrollt und zoomt genau zu diesem Punkt (alles einstellbar).

 

[Schiffsfreak]

Auf meine alten Tage (82) wird das mit JavaScript wohl nichts mehr werden. Aber das Hauptproblem ist ja inzwischen nicht mehr das Scrollen, das hat mit Google Maps ja geklappt, das Problem ist zum einen die Zustimmung zur Verarbeitung der dort einzugebenden Adressdaten durch Google - sonst kann ich keine Adresspunkte definieren und zum zweiten, dass die links befindliche Adressleiste weg ist, wenn Google Map in die grüneTabelle eingeordnet und aktiviert wird. Oder könnte ich das mit JS unterbinden, das heißt, dass die blaue Tabelle ortsfest bleibt und nur in der grünen Tabelle (ich habe mich in meinem vorigen Beitrag verschrieben, Google Maps wurde natürlich in die grüne und nicht in die blaue Tabelle eingeordnet!) Google "rumfuhrwerkt"?