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!)

[fivezoom]

Habe vergessen, alle Bilder haben die gleiche Größe und die Position vom Backgroundimage ist die richtige da wo es hin soll!

Grüße

[skiddo]

Hallo.

Ich hab ganz was ähnliches gemacht, nur bin ich da auch händgen geblieben und habe dann mit JS <div>s an den bestimmten Positionen zeigen lassen.

Bion mir nicht sicher, ob man bei Wordpress so frei mit JS hantieren kann.

[fivezoom]

Danke für Deine Antwort. Ich habe eine zweite header.php angelegt extra für die imagemap. Da kann ich alles an java reinpacken was ich will.

Wie sieht Deine Lösung den aus? Hast Du vielleicht ein CODE Beispiel für mich? Mit Java kenn ich mich leider überhaupt nicht aus.

Grüße

Hallo.

Ich hab ganz was ähnliches gemacht, nur bin ich da auch händgen geblieben und habe dann mit JS <div>s an den bestimmten Positionen zeigen lassen.

Bion mir nicht sicher, ob man bei Wordpress so frei mit JS hantieren kann.

[Gunnar Bittersmann]

@@fivezoom:

nuqneH

Nach langem suchen bin ich auf folgende Lösung von kerki gestolper:

Grandiose Idee! ;-)

Keine Ahnung wie ich das fixen kann.

Siehst so aus, als ob dein JavaScript das falsche Bild tauscht, nämlich div[@id="banner"]/img.

Und auch die HTML-Fehler fixen.

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

Nein, das ist keine Entschuldigung. Du willst Hilfe, also mach es Hilfenden nicht unnötig schwer und bürde ihnen Copy&Paste-Orgien auf!

Also bitte: www.dinerodelmundo.es

Wenn du etwas nicht indiziert haben willst, liegt es an dir, den SEs dies http://de.selfhtml.org/diverses/robots.htm@title=mitzuteilen.

(Übrigens bin ich mir nicht sicher, ob Postings überhaupt von SEs durchsucht werden, solange sich nicht im Archiv sind.)

Qapla'

[fivezoom]

OK, die Fehler im HTML sind jetzt alle gefixt. Allerdings wird das bild nicht mehr getausch. Mensch ich habe keine Ahnung. Das leer png scheint von der position richtig zu liegen. Warum wird nichts mehr getauscht jetzt?

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

Normal2 = new Image();
Normal2.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-empty.png" alt="";
Highlight2 = new Image();
Highlight2.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-africa.png" alt="";

Normal3 = new Image();
Normal3.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-empty.png" alt="";
Highlight3 = new Image();
Highlight3.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-africa.png" alt="";

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

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

<area onmouseover="Bildwechsel(0,Highlight1)" onmouseout="Bildwechsel(0,Normal1)" 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" alt="" />

<area title="América del Norte" shape="poly" coords="250,105, 207,134, 182,138, 176,155, 0,154, 0,-9, 303,-7, 304,27, 255,49" href="http://www.dinerodelmundo.es/america-del-norte" alt="" />

<area title="América del Sur" shape="poly" coords="304,266, 250,107, 208,134, 182,138, 176,155, -11,155, -35,300" href="http://www.dinerodelmundo.es/america-del-sur" alt="" />

<area title="Asia" shape="poly" coords="650,107, 559,162, 556,169, 556,183, 538,191, 450,177, 429,134, 402,144, 379,103, 367,98, 367,94, 372,86, 388,85, 394,87, 414,94, 415,88, 409,82, 414,79, 418,79, 415,71, 434,71, 438,47, 439,33, 460,19, 470,-4, 666,0" href="http://www.dinerodelmundo.es/asia" alt="" />

<area title="Europa" shape="poly" coords="367,0, 469,0, 460,20, 439,33, 438,47, 434,73, 428,73, 415,73, 419,79, 414,79, 409,82, 416,88, 415,94, 394,87, 388,85, 372,86, 367,93, 367,98, 378,103, 367,101, 350,102, 340,94, 323,94, 316,98, 304,98, 250,107, 255,49, 304,27, 304,0" href="http://www.dinerodelmundo.es/europa" alt="" />

<area title="Oceanía" shape="poly" coords="650,107, 560,162, 556,169, 556,183, 539,191, 450,177, 490,266, 666,266" href="http://www.dinerodelmundo.es/oceania" alt="" />

</map></div>

und zu guter letzt der CSS Code:
#dineromap {width:650px; height:266px; background:url(http://fotos.dinerodelmundo.es/el-dinero-del-mundo.jpg) no-repeat; position:relative; z-index:1;}
#dineromap2 {width:650px; height:266px; no-repeat; position:relative; z-index:2;}

Habe wieder verschiedene configs ausprobiert. Was mache ich falsch?

Grüße

@@fivezoom:

nuqneH

Nach langem suchen bin ich auf folgende Lösung von kerki gestolper:

Grandiose Idee! ;-)

Keine Ahnung wie ich das fixen kann.

Siehst so aus, als ob dein JavaScript das falsche Bild tauscht, nämlich div[@id="banner"]/img.

Und auch die HTML-Fehler fixen.

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

Nein, das ist keine Entschuldigung. Du willst Hilfe, also mach es Hilfenden nicht unnötig schwer und bürde ihnen Copy&Paste-Orgien auf!

Also bitte: www.dinerodelmundo.es

Wenn du etwas nicht indiziert haben willst, liegt es an dir, den SEs dies http://de.selfhtml.org/diverses/robots.htm@title=mitzuteilen.

(Übrigens bin ich mir nicht sicher, ob Postings überhaupt von SEs durchsucht werden, solange sich nicht im Archiv sind.)

Qapla'

[Gunnar Bittersmann]

@@fivezoom:

nuqneH

Hier nochmal der Java CODE:

Leerzeichen in Komposita? Aber auch Java-Code ist da keiner.

<!--
  [snip]
//-->

Die HTML-Auskommentierung ist völlig überflüssig, evtl. sogar falsch. In XHTML sollten JavaScript-Bereiche meist besser als <http://de.selfhtml.org/html/xhtml/unterschiede.htm#script_style@title=CDATA gekennzeichnet> werden.

function Bildwechsel(Bildnr,Bildobjekt)
{ window.document.images[Bildnr].src = Bildobjekt.src; }

Die Funktion erwartet als ersten Parameter die Nummer des zu wechselnden Bildes. Das erste Bild im HTML-Dokument hat die Nummer 0, das nächste 1, …

<area onmouseover="Bildwechsel(0,Highlight1)" onmouseout="Bildwechsel(0,Normal1)" …>

Und wenn du die Funktion so aufrufst, dass sie das Bild mit der Nummer 0 wechselt, dann wechselt sie eben genau dieses, nicht das von dir gewünschte.

Besser wäre es aber, dem Bild eine ID zu geben und darüber anzusprechen. Kann ja sein, dass sich die Seite mal ändert und Bilder hinzukommen oder rausfallen, dann hättest du dasselbe Problem wieder.

Qapla'

PS: Bitte kein TOFU!

[fivezoom]

Kannst Du mir vielleicht ein Tutorial empfehlen oder wo finde ich einen funktionierenden code? Ich bin doch kein Programmierer und möchte auch keiner werden! Ich brauche nur eine Problemlösung. Das Ding hat mich schon nen ganzen Tag gekostet.

Hat das vielleicht jemand in der Konfiguration im Einsatz?

Grüße

[Gunnar Bittersmann]

@@fivezoom:

nuqneH

Ich brauche nur eine Problemlösung.

Du musst nur richtig zählen. Wenn du nicht Bild Nummer 0 tauschen willst, sondern Bild Nummer – ja welches denn? –, dann solltest du nicht an die Funktion Bildwechsel() für Bildnr den Wert 0 übergeben, sondern den gewünschten.

Qapla'

[fivezoom]

Ich glaub ich raff das nicht.

Habe es mit 1 und mit 2 jetzt ausprobiert. Beides mal nichts. Welche Bilder muss ich denn zählen? Die Bilder auf der Seite? Ist das zweite Bild!

Habe folgendes ausprobiert:
"onmouseover="Bildwechsel(2,Highlight1)" onmouseout="Bildwechsel(2,Normal1)""

Sorry!

[fivezoom]

Moin, Problem gelöst! Danke! Die alt="" Tags waren das Problem! Und dann richtig zählen eben!   ;)

[MudGuard]

Hi,

Normal1.src = "http://fotos.dinerodelmundo.es/el-dinero-del-mundo-empty.png" alt="";

Was soll das alt="" bewirken, außer einem Syntaxfehler?

cu,
Andreas

[Der Martin]

Moin Gunnar,

www.dinerodelmundo.es (Links sind extra nicht verlinkt da die Domain noch nicht indexiert werden soll! Sorry!)
Nein, das ist keine Entschuldigung. Du willst Hilfe, also mach es Hilfenden nicht unnötig schwer und bürde ihnen Copy&Paste-Orgien auf!

ACK. Und wenn man später mal im Archiv nach dem Domainnamen sucht (oder wenn Google im Rchiv sucht), findet man ihn so oder so, egal ob als Link oder nur als Hostnamen im Fließtext. Das ist also auch kein Argument fürs Nichtverlinken.

(Übrigens bin ich mir nicht sicher, ob Postings überhaupt von SEs durchsucht werden, solange sich nicht im Archiv sind.)

Da bin ich mir auch nicht sicher - von Mail-Harvestern allerdings schon. Die Mailadresse, die ich hier (und nur hier!) verwende, wird fleißig bespammt, und im Archiv werden ja keine Mailadressen mehr angezeigt (ich weiß nicht, ob sie überhaupt gespeichert werden, vermutlich nicht). Das hat interessanterweise genau am 01.07.2006 buchstäblich von einem Tag auf den anderen angefangen. Davor war diese Adresse nahezu clean.

So long,
 Martin