Sebastian Becker: Karte onclick zoomen

Hallo,

ich möchte gerne, daß eine Karte beim Klicken gegen einen als separates Bild gespeicherten gezoomten Ausschnitt ausgetauscht wird.

Ich wollte das eigentlich mit folgendem Script lösen:

---------- schnipp ----------

<script language="JavaScript">
<!--
if (document.images)
{
karte = new Image();
karte.src = "img/karte.gif";
kartezoom = new Image();
kartezoom.src = "img/karte_zoom.gif";
};
function mapzoom()
{
alert('karte.src ist:  ' + karte.src); // nur zum Testen
if(karte.src='img/karte.gif')
karte.src='img/karte_zoom.gif';
else
karte.src='img/karte.gif';
};
-->
</script>

<a href="javascript:mapzoom()"><img alt="Karte (Stadtplanausschnitt)" name="karte" src="img/karte.gif" width="375" height="250" border="0" onMouseOver="window.status='Bitte klicken Sie auf das Bild!';return true" onMouseOut="window.status='';return true"></a>

---------- schnipp ----------

Leider klappt das Ganze so nicht.

Nun dachte ich eigentlich, daß karte.src den relativen Pfad des Bildes "karte" angibt. Offensichtlich handelt es sich aber um den absoluten Pfad, wie die Kontrolle mit der alert-Funktion beweist.

Hier setzen nun meine Verständnisschwierigkeiten ein, denn bei jedem normalen MouseOver-Script werden die Bilder ja auch durch Ändern von src (ohne absolute Pfadangabe!) geändert. Warum funktioniert das bzw. dasselbe in meinem Script nicht?

Ich wäre dankbar, wenn mir jemand auf die Sprünge helfen könnte,

Grüße

Sebastian Becker

Vielleicht gibt es ja auch eine völlig andere Lösung für die an sich ja simple Aufgabenstellung?!

  1. Hallo Sebastian,

    zu dem Thema hab ich einen kleinen Tipp, der zwar nicht direkt auf dein gepostetes Problem eingeht, aber eine interessante Sache darstellt fuer solche Faelle. Was du dazu brauchst, ist Acrobat Exchange. Die Kartengrafik speicherst du dann nicht als GIF oder JPEG, sondern jagst sie durch den Destiller und speicherst sie als PDF-Datei. Was der User dann noch braucht, ist der Acrobat Reader und optimalerweise ein Browser-Plugin, das es erlaubt, PDF-Dateien in eine HTML-Seite zu embedden. Beim MS IE zumindest klappt das bei mir bestens. Der Vorteil: das eingebettete Acrobat-Reader-Fenster erlaubt Zoomen und alles was man sich wuenschen kann mit Hilfe eigener Controls.

    In HTML kannst du so etwas dann folgendermassen einbetten:
    <embed src="karte.pdf" width="700" height="500" type="application/x-pdf"></embed>

    Ein Beispiel findest du hier: </baltikum/test.htm>

    Mich wuerde auch mal interessieren, bei wie vielen Leuten das wirklich funktioniert mit dem eingebetteten Fenster, und bei wie vielen nicht.

    viele Gruesse
      Stefan Muenz

    1. Hallo Stefan,

      Mich wuerde auch mal interessieren, bei wie vielen Leuten das wirklich funktioniert mit dem eingebetteten Fenster, und bei wie vielen nicht.

      es funktioniert.
      Bin gerade mit dem SelfBrowser :-)) unterwegs.

      Gruesse
      rainer

      PS: wenn jetzt alle mitmachen wird das ein Monsterthread 8-)))

    2. Hallo Stefan,

      komisch, Du bist doch sonst immer so gegen proprietaere Loesungen. Aenderst Du langsam Deine Meinung (neulich las ich in einem Posting von Dir, dass Flash auch Spass machen kann *wunder*)?

      Mich wuerde auch mal interessieren, bei wie vielen Leuten das wirklich funktioniert mit dem eingebetteten Fenster, und bei wie vielen nicht.

      Bei mir funktioniert das zwar ganz gut, aber ich mag das Plugin nicht, weil immer ein gesondertes Acrobat-Reader-Fenster aufgeht, wenn ein Dokument zu embedden ist. Ausserdem geht dann die Systemperformance trotz fettem RAM und flotten Prozessor ganz schoen in den Keller. Das liegt wohl an Win98.

      Generell finde ich es sowieso schade, dass immer mehr Webseiten wichtige Infos nur im PDF-Format zum download anbieten. Meist sind das dann 1:1 vom Printlayout uebernommene Seiten, die einfach ins Netz geschmissen werden, ohne dass sich jemals einer Gedanken um Hypertextfunktionalitaet gemacht hat.

      Ganz besonders aergerlich ist der Einsatz von PDF bei wichtigen Informationen dann, wenn man als User nicht die Moeglichkeit hat, das Plugin zu installieren - etwa bei Palmtops und dergleichen.

      Zusammenfassend kann ich also sagen, dass es wie bei Flash und anderen PlugIns sehr genau abzuwaegen ist, wo und mit welchem Content die Technik eingesetzt wird. Ausserdem sollten immer Alternativen im schlichten Hypertext angeboten werden, damit zumindest wichtige Informationen ueberall abrufbar sind.

      Viele Gruesse
        speedy

      1. Hallo Speedy,

        komisch, Du bist doch sonst immer so gegen proprietaere Loesungen. Aenderst Du langsam Deine Meinung (neulich las ich in einem Posting von Dir, dass Flash auch Spass machen kann *wunder*)?

        Ich hab damit ja nicht gesagt, dass ich jetzt lieber PDF im Web sehen wuerde als HTML! Aber JPG und GIF sind Binaerformate, und PDF ist auch eins. Gut, der Unterschied ist, dass PDF nur mit einem kostenpflichtigen Tool erstellbar ist.

        Bei mir funktioniert das zwar ganz gut, aber ich mag das Plugin nicht, weil immer ein gesondertes Acrobat-Reader-Fenster aufgeht, wenn ein Dokument zu embedden ist. Ausserdem geht dann die Systemperformance trotz fettem RAM und flotten Prozessor ganz schoen in den Keller. Das liegt wohl an Win98.

        Das mit dem leeren Acrobat-Fenster, das irgendwo im Hintergrund bleibt, ist etwas bloed, das stimmt. Das embed funktioniert insofern nicht perfekt. Das rapide Absinken der Systemressourcen kann ich zwar nicht ganz so stark erkennen wie du, aber ein paar Ressourcen braucht der PDF-Reader sicherlich.

        Generell finde ich es sowieso schade, dass immer mehr Webseiten wichtige Infos nur im PDF-Format zum download anbieten.

        Volle Zustimmung. Zum Beispiel im WAP-Forum. Die ganzen wichtigen Specs gibt's nur als PDF. Das ist fuer mich ein skandaloeser Zustand. Denen muesste man deswegen viel mehr Druck machen.

        Zusammenfassend kann ich also sagen, dass es wie bei Flash und anderen PlugIns sehr genau abzuwaegen ist, wo und mit welchem Content die Technik eingesetzt wird. Ausserdem sollten immer Alternativen im schlichten Hypertext angeboten werden, damit zumindest wichtige Informationen ueberall abrufbar sind.

        Auch volle Zustimmung. PDF ist und bleibt Papier hinter Glas und hat noch nix mit Hypertext zu tun. In diesem Fall hier wird es ja auch eigentlich nur "missbraucht", um innerhalb einer Webseite auf relativ einfache Weise etwas zu erreichen, wozu man sonst meistens Java benutzt: naemlich zum Rum-Zoomen in einer Kartengrafik.

        viele Gruesse
          Stefan Muenz

        1. Gut, der Unterschied ist, dass PDF nur mit einem kostenpflichtigen Tool erstellbar ist.

          hallo Stefan, pdf kann man doch auch aus mit GhostScript (pdfwrite) aus PostScript erzeugen,
          oder wenn man mit TeX/LaTex arbeitet mit pdfLaTeX.
          gruß Soeren

        2. Hi Stefan,

          Volle Zustimmung. Zum Beispiel im WAP-Forum. Die ganzen wichtigen Specs gibt's nur als PDF. Das ist fuer mich ein skandaloeser Zustand. Denen muesste man deswegen viel mehr Druck machen.

          Wie koennte man solchen Webseiten "Druck" machen? Je groesser eine Site ist, desto weniger wird sich doch haeufig um den Einzelnen oder vereinzelte Meinungen gekuemmert. Und die Masser der User ist wohl auch mit einem starren PDF zufrieden - leider haben viele die Philosophie des Web noch nicht so ganz erkannt.

          Auch volle Zustimmung. PDF ist und bleibt Papier hinter Glas und hat noch nix mit Hypertext zu tun. In diesem Fall hier wird es ja auch eigentlich nur "missbraucht", um innerhalb einer Webseite auf relativ einfache Weise etwas zu erreichen, wozu man sonst meistens Java benutzt: naemlich zum Rum-Zoomen in einer Kartengrafik.

          Java scheint hier IMHO die bessere Loesung zu sein, zumindest wenn man auf Portabilitaet grossen Wert legt (wie ich, als alter Palmtop-Freak). Natuerlich duerfte der Aufwand auch um einiges hoeher sein, wenn man grad kein passendes Applet zur Verfuegung hat.

          Viele Gruesse
            speedy

          PS: uebrigens finde ich den Ausdruck "Papier hinter Glas" erwaehnenswert in Wowbaggers neuem SelfGlossar <g>

    3. Mich wuerde auch mal interessieren, bei wie vielen Leuten das wirklich funktioniert mit dem eingebetteten Fenster, und bei wie vielen nicht.

      Habs mir mal angesehen. Funzt suppi! %-]

    4. Hallo !

      zur der PDF-Sache :

      Ein Beispiel findest du hier: </baltikum/test.htm>

      Ganz abgesehen von der Diskussion, ob man PDF verwenden sollte oder nicht:

      Ich glaube gar nicht, dass dieser Ansatz die Lösung des Problems ist.

      Ich kann jetzt zwar in der Karte zoomen, ählich wie in der realen Welt mit der Lupe auf der Landkarte, aber :

      Mehr Details bekomme ich dadurch nicht ! :-(

      Und das war doch wohl die eigentliche Absicht, die Sebastian verfolgte.

      Eine simple Zoom-In/Zoom-Out-Funktion einer Grafik habe ich in meinem IE5.0 ohnehin schon.

      Gruß,
      kerki

  2. Hi Sebastian,

    ich kann Dein Problem zwar nicht loesen, aber eine kleine Hilfe haette ich: In Deinem Code ist mir aufgefallen, dass der Vergleichsoperator der if-Abfrage falsch gewaehlt wurde.

    if(karte.src='img/karte.gif')

    Das muesste normalerweise ein "==" sein:

    <cite source="selfHTML">
    if(SinnDesLebens == 42) return 1;
    </cite>

    Schau mal in SELFHTML im JavaScript-Bereich fuer mehr Informationen!

    Viele Gruesse
      speedy

  3. auch dir ein hallo,

    schau mal hier <../../sfarchiv/2000_2/t14663.htm#a74362> ist eine fertige variante.

    wenn du im archiv nach dem thema suchst nim‚m als suchbegriff "abfallpapier" ;-)

    ciao stefan

    1. Moin

      wenn du im archiv nach dem thema suchst nim‚m als suchbegriff "abfallpapier" ;-)

      Fängst du jetzt auch so an ;-)

      Viele Grüße

      Swen

      1. moin, moin,

        Fängst du jetzt auch so an ;-)

        womit???

        gruß stefan

  4. Hallo Sebastian

    Ich habe gerade eine Homepage online gestellt, in der ich genau das mache. Durch klick auf einen Button kann man 3mal rein bzw. rauszoomen.

    Du kannst es dir ja mal ansehen unter < http://www.amd-wt.com>
    Unter "Firmenprofil" -> Stadtplan!

    Wenn du dazu Fragen hast meld' dich ruhig!
    Gruss Bernhard

  5. Hallo,

    ich freue mich über die große Resonanz auf meine Frage und habe wohl eine allgemeine Diskussion über das Thema "Zoomen von Karten mit Hilfe verschiedener Methoden" angestoßen, die sicherlich nützlich ist.

    Das PDF-Beispiel z.B. funktioniert bei mir im IE 5.5 bestens.

    Aber für meine Aufgabenstellung ist es nicht geeignet, weil ich 1. keine Acrobat-Reader-Elemente auf meiner Seite haben will, weil ich 2. skeptisch bin, ob das bei allen Nutzern funktioniert, weil 3. meine Karte als Bitmap vorliegt, weil ich 4. eigentlich eine ganz simple Lösung suche, so wie mit meinem Script angedacht.

    Vielleicht kann mir also jemand - unabhängig von der generellen Diskussion des Themas - einen Tip geben, wie ich das Script zum Laufen kriege?!

    Den Zuweisungsoperator aus meinem Script im Original-Posting habe ich schon in == umgeändert (Danke!), funktioniert aber trotzdem nicht.

    Danke für die Hilfe, Grüße,

    Sebastian

    1. Hi
      OK dann mal hier ein Loesungsversuch:
      Erstens: onmouseover/out versteht NS nur in <a> und <area> aber nicht in <img..>!! Deshalb kann der Teil des Beispiels im NS gar nicht klappen. Ausserdem hast du zwei ueberfluessige Semikolons hinter den geschlossenen Klammern. Des weiteren hast du karte sowohl als Name des Bildes als auch als imageobjekt definiert, dass muss zu Schwierigkeiten fuehren! Mit deiner Syntax weist du nur dem Imageobjekt karte einen neuen Wert zu, aber nicht!! dem Bild mit dem Namen karte.
      Ich wuerde das so machen:
      <script language="JavaScript">
      <!--
      if (document.images)
      {
      karte = new Image();
      karte.src = "img/karte.gif";
      kartezoom = new Image();
      kartezoom.src = "img/karte_zoom.gif";
      }
      function mapzoom()
      {
      if (document.karte1.src=="img/karte.gif")
      document.karte1.src=karte.src;
      else
      document.karte1.src=kartezoom.src;
      }
      -->
      </script>

      <a href="javascript:mapzoom()" onMouseOver="window.status='Bitte klicken Sie auf das Bild!';return true" onMouseOut="window.status='';return true"><img alt="Karte (Stadtplanausschnitt)" name="karte1" src="img/karte.gif" width="375" height="250" border="0" ></a>
      So ich hoffe das klappt jetzt
      Tschau Holger

      1. Hallo,

        Danke für den Lösungsversuch, der mir schon weitergeholfen hat. Das Script hat allerdings bei mir immer noch nicht funktioniert. Ich habe jetzt eine simple Lösung für den Austausch der Karten gefunden mit einer Variable, die entweder auf true oder false gesetzt wird.

        Danke auch für alle anderen Hinweise, die ich vielleicht in einem anderen Zusammenhang verwerten werde.

        Grüße,

        Sebastian Becker