Anker

[xnfreak]

Folgendes Problem,

ich habe eine selbst gestaltete Karte, in dieser befinden sich mehrere eingezeichnete Punkte.
Zur genauen Darstellung hat die Karte allerdings eine Größe, welche die Breite meiner Seite überschreiten würde.
Aus diesen Grund habe ich die Karte in ein overlow:scroll verpackt.
Jetzt soll es aber so sein, das man über Links sich zu den verschiedenen Punkten auf der Karte bringen lassen kann. Das heißt die Karte soll in dem Scrollfenster so verschoben werden das der jeweilige Punkt in der Mitte des Scrollfensters erscheint (sowohl in der höhe als in der breite).

Mittels Anker (und Zerlegung über Slice) wäre es zu erreichen, das Problem ist der jeweilige Anker würde immer ganz oben im Scrollfenster geladen werden und nicht mittig. Jetzt könnte ich den Anker sicherlich einfach ein Stück weiter höher platzieren, aber damit habe ich es immer noch nicht geschafft das eine mittige Darstellung in seitlicher Richtung geschieht.

Ist es irgendwie hinzubekommen, das sich durch klick auf einen Link die Karte an die gewünschte Position verschiebt.
Sehr gut wäre auch, wenn der Link auch auf einer anderen Seite stehen kann.
Das heist dass in diesen Fall die entsprechende Seite geladen wird und gleichzeitig die jeweilige Kartenposition angezeigt wird.

Möglich wäre es auch über eine Javascript Variante, allerdings kann dabei der Link auf keiner anderen Seite stehen.

function nummer1()
{
var oMyImage=document.getElementById("bild");
oMyImage.scrollTop="1170";
oMyImage.scrollLeft="350";
return false;
}

<a href="#" onclick="return nummer1()">Karte zu Nr.1 verschieben</a>

Hoffe ihr habt eine Lösung für das Problem.
Vielen Dank für eure Mühen. xnfreak

[Gonzo]

Aus diesen Grund habe ich die Karte in ein overlow:scroll verpackt.
Jetzt soll es aber so sein, das man über Links sich zu den verschiedenen Punkten auf der Karte bringen lassen kann. Das heißt die Karte soll in dem Scrollfenster so verschoben werden das der jeweilige Punkt in der Mitte des Scrollfensters erscheint (sowohl in der höhe als in der breite).

Möglich wäre es auch über eine Javascript-Variante, allerdings kann dabei der Link auf keiner anderen Seite stehen.

Du kannst in einer Javascript-Funktion die URL-Parameter abfragen, entweder über location.search oder über document.URL.

[xnfreak]

Aus diesen Grund habe ich die Karte in ein overlow:scroll verpackt.
Jetzt soll es aber so sein, das man über Links sich zu den verschiedenen Punkten auf der Karte bringen lassen kann. Das heißt die Karte soll in dem Scrollfenster so verschoben werden das der jeweilige Punkt in der Mitte des Scrollfensters erscheint (sowohl in der höhe als in der breite).

Möglich wäre es auch über eine Javascript-Variante, allerdings kann dabei der Link auf keiner anderen Seite stehen.

Du kannst in einer Javascript-Funktion die URL-Parameter abfragen, entweder über location.search oder über document.URL.

Habe noch nicht ganz verstanden, wie mir das hilft die Karte an die
gewünschte Stelle scrollen zu lassen.
Vielleicht kannst du mir ja mal noch etwas auf die Sprünge helfen.
Auf der Seite mit der Karte befindet sich jetzt folgendes (ein paar
Ausschnitte)

<script type="text/javascript">
function nummer1()
{
var oMyImage=document.getElementById("bild");
oMyImage.scrollTop="250";
oMyImage.scrollLeft="200";
window.open(http://SEITENNAME.de/Kustenkarten/Kustenkarten/Kustenkarte-Sor-Trondelag-Nord-Trondelag.html,
'_blank', '');
return false;
}
</script>

<div id="bild" style="width:620px; height:440px; overflow:scroll;
div#bild; border:1px solid #840;"> <img id="myImage"
border="0" src="sor-nord-trondelag.png" width="1927" height="2029"><br>
<a name="map"></a></div>

Wenn ich den Link auf der selben Seite stehen hätte würde dieser einfach

<a href="#" onclick="return nummer1()">Nummer 1</a>

lauten. Wie soll ich das denn jetzt anstellen, wenn der Link auf einer
anderen Seite stehen soll.

Wäre super. Vielen Dank.

[Ich]

Hallo,

die Punkte die per Verweis aufgerufen werden sollen sind schon darin eingezeichnet?

Dann vermute ich (ich habe selbst damit noch nie gearbeitet bzw. es ausprobiert) werden Server-seitige verweis-sensitive Grafiken am praktischten sein.

Ich hatte mir zuerst die Karte etwas einfacher vorgestellt, aber vermutlich lag ich damit daneben. Tut mir leid, hoffe aber Du kannst hiermit mehr anfangen.

Gruß, Ich

[Gonzo]

Aus diesen Grund habe ich die Karte in ein overlow:scroll verpackt.
Jetzt soll es aber so sein, das man über Links sich zu den verschiedenen Punkten auf der Karte bringen lassen kann.

Du kannst in einer Javascript-Funktion die URL-Parameter abfragen, entweder über location.search oder über document.URL.

function nummer1() {
  var oMyImage=document.getElementById("bild");
  oMyImage.scrollTop="250";
  oMyImage.scrollLeft="200";

Wenn ich den Link auf der selben Seite stehen hätte würde dieser einfach

<a href="#" onclick="return nummer1()">Nummer 1</a>

lauten. Wie soll ich das denn jetzt anstellen, wenn der Link auf einer
anderen Seite stehen soll.

Zusammen mit <body onLoad="kartenanzeige()"> und der URL karte.html?x=12;y=34 in etwa so:

function kartenanzeige() {
  var p = location.search; // IE hat(te) IIRC Probleme mit direkter .search-Verwendung, daher die eigentlich unnötige Übertragung in eine weitere Variable.
  var xy = p.match(/[?;&]x=([0-9]+)[;&]y=([0-9]+)([;&]|$)/);
  if (xy) {
    /* Hier fehlt eine Prüfung, ob x und y im akzeptablen Bereich liegen. */
    /* Hier würde es sich weiterhin anbieten, nicht einen Punkt links oben zu
       benutzen, sondern die Koordinate in den Mittelpunkt des <div>s zu
       setzen. Die Koordiaten wären damit nicht mehr abhängig von einer
       bestimmten <div>-Größe.
    */
    var oMyImage = document.getElementById("bild");
    oMyImage.scrollTop = xy[1];
    oMyImage.scrollLeft = xy[2];
  }
}

[xnfreak]

Zusammen mit <body onLoad="kartenanzeige()"> und der URL karte.html?x=12;y=34 in etwa so:

function kartenanzeige() {
  var p = location.search; // IE hat(te) IIRC Probleme mit direkter .search-Verwendung, daher die eigentlich unnötige Übertragung in eine weitere Variable.
  var xy = p.match(/[?;&]x=([0-9]+)[;&]y=([0-9]+)([;&]|$)/);
  if (xy) {
    /* Hier fehlt eine Prüfung, ob x und y im akzeptablen Bereich liegen. */
    /* Hier würde es sich weiterhin anbieten, nicht einen Punkt links oben zu
       benutzen, sondern die Koordinate in den Mittelpunkt des <div>s zu
       setzen. Die Koordiaten wären damit nicht mehr abhängig von einer
       bestimmten <div>-Größe.
    */
    var oMyImage = document.getElementById("bild");
    oMyImage.scrollTop = xy[1];
    oMyImage.scrollLeft = xy[2];
  }
}

Vielen Dank schonmal, aber irgendwo hängt es bei mir.
Ich habe das jetzt in unzähligen Varianten probiert, aber bin nicht auf die Lösung gekommen.
Was muss ich denn in diesen von dir aufgeführten Beispiel noch alles anpassen?
Vorallen in dieser Zeile

var xy = p.match(/[?;&]x=([0-9]+)[;&]y=([0-9]+)([;&]|$)/);#

muss ich doch noch irgendetwas anpassen. Oder nicht?

Hoffe du kannst mir da noch etwas helfen.

[Ich]

Hallo,

mit einer image-map kannst Du es vermutlich nicht gestalten?

Ansonsten würde ich <a> per css ausrichten.

Gruß, ich

[xnfreak]

Hallo,

Hi

mit einer image-map kannst Du es vermutlich nicht gestalten?

Ne also mit ImageMap dürfte das wirklich nicht machbar sein, denn damit habe ich schon öfters gearbeitet.

Ansonsten würde ich <a> per css ausrichten.

Gruß, ich

Kannst du mir zu der CSS-Ausrichtung etwas genauere Daten geben, habe mit CSS noch nicht allzugroße Erfahrungen.
Vielleicht hast du ja ein Muster oder einen Konkreten Link für ein solches Beispiel?

Wäre super.

Vielen Dank für deine Mühen.