Karte erstellen, diverse Orte markieren und verlinke, wie?

[Looneytune]

Hallo,

ich habe vor eine Karte zu erstellen und die von mir besuchten Orte markieren und mit meinen dazugehoerigen Blogeinträgen zu verlinken. Zum besseren Verstaendnis hier die Karte und die Pin.




Ich habs mit <div> und "margin-left/top" versucht, allerdings ueberlappen sich diverse Orte und da reichen meine Kenntnisse leider nicht mehr aus. Falls mir jemand einen Beispiel Code mit den Pics schreiben kann und paar Orte markieren kann, dann waere ich sehr dankbar.

Gru0

[kissein]

In simpler HTML Struktur würde ich imagemap benutzen.


Ansonsten wenn du die Googlemap API benutzt kannst du über longitude und latitude die orte via icon verlinken.

[マルコ]

Imagemaps sind ungeeignet, weil er ja nen Marker drauf setzen will, wo er war...

nunja, wenn du

<div style="position:relative;width:400px;height:300px;background:url(map.jpg);">
  <a href="#"><img src="marker.png" style="position:absolute;top:30px;left:200px;" alt="Ort 1" title="Hier war ich"></a>
  <a href="#"><img src="marker.png" style="position:absolute;top:130px;left:222px;" alt="Ort 2" title="Hier war ich auch"></a>
  <a href="#"><img src="marker.png" style="position:absolute;top:23px;left:34px;" alt="Ort 3" title="Und hier"></a>
</div>

machst, dann hast du kein Problem...

PS.: War zu faul für <style>, bitte selbst korrigieren ;P

[kissein]

Originally Posted by マルコ

Imagemaps sind ungeeignet, weil er ja nen Marker drauf setzen will, wo er war...

dafür gibts doch CSS um die anker innerhalb des imagemap zu gestalten... aber es ist nicht ganz praktisch da stimme ich zu.

[Looneytune]

Neues Problem, das MouseOver "Sub menu" soll unter dem Check/Pin-Icon erscheinen, es erscheint aber leider immer links oben.

<style type="text/css"><!--
body { font-family: arial, helvetica, serif; font-size: 80%;padding: 2em; margin: 0; }
#content { width: 34em; background-color: #b0e0e6; padding: 1em 0; margin: auto;
voice-family: "\"}\"";  voice-family:inherit; width: 32em; }
html>body #content { width: 32em; } 
a { text-decoration: none; }
a:link { color: #080; }
a:visited { color: #790; }
a:active { color: red; }
a:hover { text-decoration: underline; }
h1 { text-align: center; padding: 0 0 0.25em 0; margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }
#nav li li a { text-align:center;width:96px;display: block; font-weight: normal; color: #000; padding: 2px; }
li { float: left; position: relative; width: 28px; text-align: center; cursor: default;  }
li ul { border:1px solid #000; border-style:dotted;display: none; position: relative; background:#EEE; font-weight: normal; padding: 2px; width:100px; }
li>ul { top: auto; left: auto; }
li li { display: block; float: none; background-color: transparent; border: 0; }
li:hover ul, li.over ul { display: block; }

//--></style>
<script type="text/javascript"><!--

startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
//--></script>

<div style="text-align: justify;">
Klicke auf den markierten Ort um die dazugehörigen Blogeinträge zu sehen.</div>
<br />
<b>Tokyo</b><br />
<div style="background: url(http://i.epvpimg.com/Wb5Xd.png); height: 320px; position: relative; width: 437px;">
<ul id="nav">
	<li id="first">
		<div><a href=""><img style="left: 40px; position: absolute; top: 242px;" alt="point" src="http://i.epvpimg.com/qGnCg.png" /></a></div>
			<ul>
				<b>- Shibuya -</b>
                <li><a href="">Tokyo Area</a></li>
				<li><a href="">Hachiko</a></li>
			</ul>
	</li>
</ul>
</div>
<br />
<br />

[kissein]

über das mouseon event kannst du die screenX/Y coords, dem layer mit top / left style übergeben