Website - Bild mit JavaScript-Elementen?

[Stalafin]

Ich möchte auf einer Website ein Bild einfügen. Auf diesem Bild sollen sich einzelne Punkte befinden. Wenn man auf einen solchen Punkt klickt, sollen in einem Kasten daneben unterschiedliche Elemente erscheinen (andere Bilder).

Beispiel:
Eine Weltkarte, auf der die einzelnen Orte durch Punkt markiert wurden. Nun sollen diese "anklickbar sein" und je nachdem, welcher Ort angeklickt wurde, sollen im Kasten daneben Bilder von diesem Ort erscheinen?

Wie realisier ich das am besten?
Ich nehme mal an, ich brauche JavaScript dafür um das Klicken und erscheinen der Bilder zu ermöglichen. Aber wie schaffe ich es, den Punkten im Bild eine Eigenschaft zuzuordnen? Bzw. - wie mache ich sie zu "Links"?

 

[burni87]

ich denke mal du musst einfach innerhalb des bildes div ids festlegen, im bild selbst musst du dafür nix machen sondern nur im html bzw css

ne andere möglichkeit kenne ich nicht

 

[wario]

hallo Stalafin,

zunächst musst du mit sog Imagemaps arbeiten. D.h. eine Map über das Bild legen, das dir die Links aufs Bild bringt, ist eigentlich nicht schwer.
siehe SELFHTML IMAGEMAPS
und als nächstes muss du sowas wie einen Layer Definieren, den kannst du mittels "Layer position" dirket auf der Seite positionieren, oder aber du baust dir eine HTML Tabelle, und baust ihn in eine Zelle dort ein.
In dem "Layer" kannst du dann deine Karteninfos einblenden.
Mit "onMouseOver/onMouseOut" oder mit "onClick"!
Viel Spass
hier mein Beispiel in 5 min gemacht...

<script type="text/javascript" language="JavaScript">
function MM_findObj(n, d) {
	//v4.0
	var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
		d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
	}
	if(!(x=d[n])&&d.all)
		x=d.all[n];
		for (i=0;!x&&i<d.forms.length;i++)
			x=d.forms[i][n];
		for(i=0;!x&&d.layers&&i<d.layers.length;i++)
			x=MM_findObj(n,d.layers[i].document);
		if(!x && document.getElementById)
			x=document.getElementById(n);
			return x;
}
function MM_showHideLayers() {
	//v3.0
	var i,p,v,obj,args=MM_showHideLayers.arguments;
		for (i=0; i<(args.length-2); i+=3)
			if ((obj=MM_findObj(args[i]))!=null) {
				v=args[i+2];
			if (obj.style) {
				obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
		obj.visibility=v; }
}
</script>
<div>
  <map name="Landkarte">
    <area shape="rect" coords="0,0,50,50"     onMouseOver="MM_showHideLayers('map1','','show','map2','','hide','map3','','hide','map4','','hide')" onMouseOut="MM_showHideLayers('map1','','hide','map2','','hide','map3','','hide','map4','','hide')" alt="map 1">
    <area shape="rect" coords="50,0,100,50"   onMouseOver="MM_showHideLayers('map1','','hide','map2','','show','map3','','hide','map4','','hide')" onMouseOut="MM_showHideLayers('map1','','hide','map2','','hide','map3','','hide','map4','','hide')" alt="map 2">
    <area shape="rect" coords="0,50,50,100"   onMouseOver="MM_showHideLayers('map1','','hide','map2','','hide','map3','','show','map4','','hide')" onMouseOut="MM_showHideLayers('map1','','hide','map2','','hide','map3','','hide','map4','','hide')" alt="map 3">
    <area shape="rect" coords="50,50,100,100" onMouseOver="MM_showHideLayers('map1','','hide','map2','','hide','map3','','hide','map4','','show')" onMouseOut="MM_showHideLayers('map1','','hide','map2','','hide','map3','','hide','map4','','hide')" alt="map 4">
  </map>
</div>
<div id="map1" style="position:absolute; z-index:1; left:50%; margin-left:-50px; top:50%; margin-top:-50px; width:100px; height:100px; visibility: hidden;">Karteninfo 1</div>
<div id="map2" style="position:absolute; z-index:2; left:50%; margin-left:-50px; top:50%; margin-top:-50px; width:100px; height:100px; visibility: hidden;">Karteninfo 2</div>
<div id="map3" style="position:absolute; z-index:3; left:50%; margin-left:-50px; top:50%; margin-top:-50px; width:100px; height:100px; visibility: hidden;">Karteninfo 3</div>
<div id="map4" style="position:absolute; z-index:4; left:50%; margin-left:-50px; top:50%; margin-top:-50px; width:100px; height:100px; visibility: hidden;">Karteninfo 4</div>
<p><img src="karte.png" width="100" height="100" alt="Karte" usemap="#Landkarte"></p>

 

[burni87]

oder so