✔ <map> <area> hover effekt mit MouseOver

[DerBo]

Hallo,
ich sitze schon ne Weile an dem Problem.
Ich möchte eine Deutschlandkarte machen, wenn man z.B. über ein Bundesland mit der Maus fährt, soll dieses Bundesland per einzelnem Bild hervorgehoben werden.
Ich habe mich da schon etwas belesen und habe einige möglichkeiten herausgefunden.

<img src="deutschland.png" id="karte" name="karte" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="poly" coords="0,80,70,80,70,140,0,140" href="http://www.nrw.de/" id="nrw" alt="NRW" title="Nordrhein Westfalen" onMouseOver="...." onMouseOut="...." >
</map>

^^das wäre die möglichkeit mit einem Polygonzug(Die Koordinaten werden noch ausführlicher, wenn alles klappt). Der Titel wird auch beim drüber fahren angezeigt und der link funktioniert auch soweit.
Allerdings bekomme ich da einfach kein Bild drüber.
Mit der OnMouseOver funktion

OnMouseOver="document.karte.src='nrw.png';"

klappt das soweit, aber es flackert und das sieht äusserst unschön aus.

Ich kenne aber bisher noch keine andere Möglichkeit das irgendwie hinzubekommen und hoffe das mir jemand helfen kann.
Danke im voraus

 

[Maik]

Hi,

schau mal hier: http://www.doktormolle.de/temp/haeusle/

mfg Maik

 

[DerBo]

Hey Maik,
du schon wieder Ich danke dir, nun klappts. Hat zwar ne Zeit gedauert bis ich verstanden habe was das script macht, aber nun funktioniert es.
Als overlay Bild nehme habe ich bisher nur immer *.png´s benutzt. Jetzt grade sehe ich mal den Unterschied der Größe von png (5kb) zu gif (1kb).
Die Qualität sieht bei png aber sichtbar besser aus als bei gif. Ich weiss nur nicht wie ich gif´s in Photoshop richtig abspeicher.
Kannst du mir da auch evtl. noch weiter helfen?

 

[DerBo]

Hey Maik,
also auf jeden Fall schon einmal dicken Dank an dich. Hab mir nen Wolf gesucht, aber wie erwähnt funktioniert nun alles. Ich nehme auch nun ainfach für alles png´s. Sieht irgendwie besser aus.

 

[Schnackswatz]

Hallo,
ich würde gerne noch einmal das Thema aufgreifen, da ich bei einer Sache nicht weiterkomme. Vielleicht ist ja jemand bereit zu diesem Thema abermals zu helfen. Das Javascript unter der oben genannten URL

http://www.doktormolle.de/temp/haeusle/

lädt die Grafiken aus dem Root des Servers.
Was muß denn an Code geändert werden, damit die Grafiken aus
irgendeinem Unterverzeichnis geladen werden oder verstehe ich da etwas falsch ?

Lieben Gruß

Mike

Hier der Javascript-Code von obengenannter URL:

pics=new Array();
function setHover()
{
p=new Image();p.src=document.images.imageMap.src;pics[0]=p;
for(a=0;a<document.getElementsByTagName('area').length;++a)
	{
	o=document.getElementsByTagName('area')[a];nr=eval(a+1);
	p=new Image();p.src=o.id+'.gif';pics[pics.length]=p;
	aOVER=new Function('F','colored('+nr+');');aOUT=new Function('F','colored(0);');
	o.onmouseover=aOVER;o.onmouseout=aOUT;
	}
}
function colored(i)
{
document.images.imageMap.src=pics[i].src;
}
if(document.getElementsByTagName){window.onload=setHover;}