Bild mit Image Maps verschieben

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bild mit Image Maps verschieben

    Hallo,
    ich möchte gerne auf eine Seite ein Bild anzeigen, welches größer(breiter) ist als der dafür vorgesehene Bereich.
    Ich möchte eine Möglichkeit von Ajax benutzen dieses Bild verschiebbar zu machen, d.h. der User greift es mit der Maus und kann es nach rechts oder links innerhalb des Feldes verschieben (möglich wäre auch ein Slider).
    Das habe ich schon vor einiger Zeit über Mootools getestet, es hat funktioniert (ohne Slider).
    Meine Frage ist jetzt: Kann ich (und wenn ja wie) auf dieses Bild ImageMaps legen?
    Also kann ich bestimmte Bereiche separieren, mit Tooltips hinterlegen (evtl. auch mit Links)?
    Beispiel:
    Berlin-Karte (800x 500), das Anzeigefenster hat 500x500.
    Über den einzelnen Bezirken sollen Tooltips liegen, einige sollen klickbar sein mit Verweis.

    Bin für jede Hilfe und/oder Anregung (Ideen, Codebeispiele, Links) dankbar.

    felipe
  • Ok,ok,
    da muss man sich mal ausfürlicher reinlesen.

    Was ich aber noch nicht gesehen habe (beim Querlesen und Beispielseiten ansehen) ist die Möglichkeit mehrere Tooltips einzubauen [die auch nur sichtbar sind wenn die Maus drüber fährt] und die Möglichkeit Verweise auf Kartenpunkte zu legen.

    Ist es denn prinzipiell möglich auf ein durch Ajax verschiebbares Bild (wie hier: demo.easy-coding.de/javascript/drag-control/) zusätzlich mit Image Maps zu versehen (für Tooltips bzw. Verweise)?
    Ist das Image Map auf dem Bild (verknüpft mit dem Bild), und wandert bei Verschieben mit? (was prima wäre) oder bleibt es statisch, auch wenn das Bild verschoben wird?


    Danke für jede Anregung
    felipe
  • Ja, der Tooltip würde mitwandern,
    Schau dir den Quelltext mal an - wenn man das Drag & Drop JavaScript weglässt, dann bleibt einzig und allein simples HTML da - das du natürlich nach belieben verändern kannst, wie eine normale Webseite.

    Quellcode

    1. <body onload="draginit()">
    2. <h1>Drag Control like Google Maps/Adobe Reader</h1>
    3. <h2>Version 0.1</h2>
    4. <div style="overflow:scroll; margin:0px 100px; width:200px; height:200px; position:relative;cursor: move">
    5. <div onmousedown="dragstart(this)" style="width: 500px; position:absolute;top:0px;left:0px;background:#ff0000">
    6. <p>Lorem ipsum[...]</p>
    7. </div>
    8. </div>
    9. </body>