css imagemap mouseover wordpress

[fivezoom]

Hallo liebe gemeinde. Ich habe eine Karte mit 6 Kontinenten die ich mit mouseover hervorheben möchte. Nach langem suchen bin ich auf folgende Lösung von kerki gestolper:
"Zu einem ähnlichen Problem hatte ich vor einiger Zeit hier bereits einen Lösungsansatz gepostet. Es ging ebenfalls um eine Landkarte, in der bestimmte Bereiche beim Überfahren mit der Maus farblich hervorgehoben werden sollten.

Vor allem bei Landkarten scheidet die Möglichkeit, die ImageMap in Tabellenzellen zu zerschneiden zumeist aus, da sich dort nur selten rechteckige Formen finden lassen.

Daher hatte ich folgende simple Idee:

Für die eigentliche Landkarte nimmt man eine beliebige Grafik, die auch ruhig etwas größer (in KB) sein darf, da sie nicht ausgetauscht wird, sondern immer als Hintergrundgrafik liegenbleibt.

Darüber lege ich nun die ImageMap, deren Bildquelle zunächst ein transparentes GIF-(oder PNG)-Bild ist.

Sobald etwas farblich hervorgehoben werden soll, wird diese transparente Grafik gegen eine andere ausgetauscht, die ebenfalls fast vollständig transparent ist bis eben auf die Teile der Grafik, die hervirgehoben werden sollen.

Da der Kompressionfaktor bei diesen Austauschgrafiken aufgrund der vielen transparenten Flächen sehr hoch ist, halten sich die Dateigrößen angenehm klein. :-)"

http://forum.de.selfhtml.org/archiv/2002/1/t3602/

Soweit so gut, testweise hab ich das ganze erstmal nur für afrika konfiguriert. Zu sehen unter www.dinerodelmundo.es wenn man die Maus über Afrika bewegt. Das Transparente png hat die endung empty.png und das eingefärbte africa.png.

Wie ihr seht liegen die mouseover effekte nicht über dem background image. ich habe schon eine menge mit margin, zindex, position, usw... rumgespielt aber das mouseover africa bild bewegt sich einfach nicht.

wie gesagt, es geht erstmal nur um africa. Wenn das funktioniert bekomme ich den anderen kram auch hin.

CODE in Wordpress:
"<div id="dineromap">
<img class="dineroimg" src="http://fotos.dinerodelmundo.es/el-dinero-del-mundo-empty.png" width="650" height="266" border="0" alt="" usemap="#dinero-del-mundo-map">
<map name="dinero-del-mundo-map">

<area shape="poly" coords="306,266, 250,106, 311,98, 317,98, 325,94, 340,94, 349,102, 367,101, 378,103, 389,122, 401,144, 429,134, 494,272" href="http://www.dinerodelmundo.es/africa" onmouseover="Bildwechsel(0,Highlight1)" onmouseout="Bildwechsel(0,Normal1)">
     </map></div>"

CODE im Header:
"<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-empty.png";
Highlight1 = new Image();
Highlight1.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-africa.png";

function Bildwechsel(Bildnr,Bildobjekt)
{ window.document.images[Bildnr].src = Bildobjekt.src; }
//-->
</script>"

CODE in der CSS Datei:
"/******************** IMAGEMAP ********************/
#dineromap {width:650px; height:266px; background:url(http://fotos.dinerodelmundo.es/el-dinero-del-mundo.jpg) no-repeat; position:relative;}"

Keine Ahnung wie ich das fixen kann. Hoffe mir kann einer weiterhelfen. Bin kein Programmierer!

www.dinerodelmundo.es (Links sind extra nicht verlinkt da die Domain noch nicht indexiert werden soll! Sorry!)