Bild mit Image Maps verschieben

Beginner

Monday, October 25th 2010, 12:39pm

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

Florian

Intermediate

Posts: 197

Monday, October 25th 2010, 1:21pm

Wenn du es dir einfach machen möchtest, könntest du einfach Google Maps verwenden. Google Maps mit eigenem Bild als Karte

felipeU

Beginner

Posts: 3

Monday, October 25th 2010, 2:24pm

Nachfrage

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: http://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

Torben Brodt

Administrator

Posts: 8,454

Tuesday, October 26th 2010, 8:38am

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.

HTML Code

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