JavaScript Imagemap Probleme

Drrichardfahrer · 4 September 2009

Ich habe eine Usemap, auf der im FF alles funktioniert, im IE 6.0 jedoch nicht...

Woran liegt das?

Hier etwas Code:

HTML:

<script language="JavaScript" type="text/javascript">
function change(art) {

  switch (art) {
    case "sss": document.getElementById('teambild').innerHTML = '<img src="sonstige_bilder/sss.jpg" width="400" height="326" border="0" alt="" usemap="#sss_map" /></div>';
                   break;
    case "rss": document.getElementById('teambild').innerHTML = '<img src="sonstige_bilder/rss.jpg" width="400" height="326" border="0" alt="" usemap="#sss_map" /></div>';
                   break;
    case "fss": document.getElementById('teambild').innerHTML = '<img src="sonstige_bilder/fss.jpg" width="400" height="326" border="0" alt="" usemap="#fss_map" /></div>';
                   break;
  }
</script>

<body>
<map name="sss_map" id="sss_map">
 <area shape="poly" coords="[zahlen]" onmouseover="change('rss')" onmouseout="change('sss')" onclick="change('fss')" href="#" alt="" />
 <area shape="poly" coords="[zahlen]"  onmouseover="change('srs')" onmouseout="change('sss')" onclick="change('sfs')" href="#" alt="" />
 <area shape="poly" coords="[zahlen]" onmouseover="change('ssr')" onmouseout="change('sss')" onclick="change('ssf')" href="#" alt="" />
</map>

<map name="fss_map" id="fss_map">
 <area shape="poly" coords="[zahlen]" onmouseover="change('fss')" onmouseout="change('fss')" onclick="change('fss')" href="#" alt="" />
 <area shape="poly" coords="[zahlen]"  onmouseover="change('frs')" onmouseout="change('fss')" onclick="change('sfs')" href="#" alt="" />
 <area shape="poly" coords="[zahlen]" onmouseover="change('fsr')" onmouseout="change('fss')" onclick="change('ssf')" href="#" alt="" />
</map>

<div id="teambild"><img src="sonstige_bilder/sss.jpg" width="400" height="326" border="0" alt="" usemap="#sss_map" /></div>

Zur Erläuterung:
Auf dem Imagemap sind 3 Personen, die entweder schwarzweiß sind (s), umrandet sind (r) oder farbig sind (f). Und je nach Mouseover bzw. Mouseout lade ich ein neues Bild rein mit dem jeweiligen Bildnamen... z.B. "fss" (=> 1. Person in Farbe, zweite und dritte Person schwarzweiß)

Liebe Grüße, Drrichardfahrer

robert · 4 September 2009

Drrichardfahrer schrieb:
Ich habe eine Usemap, auf der im FF alles funktioniert, im IE 6.0 jedoch nicht...

WAS funktioniert nicht - ich gehe mal davon aus, du meinst, dass der onmouseout nicht funktioniert? Das konnte ich jedenfalls mit deinem Code rekonstruieren.

Abhilfe schafft hier im IE6 das direkte Zugreifen auf die Attribute src bzw. usemap vom img-Tag selbst.

Dazu müsstest du deinem img-Tag noch ne id geben

HTML:

<div id="teambild">
   <img src="sonstige_bilder/sss.jpg" width="400" height="326" border="0" alt="" id="bild" usemap="#sss_map" />
 </div>

Und dann kannste mit JS das ganze so ändern:

Code:

case "sss":  document.getElementById('bild').src = "sonstige_bilder/sss.jpg"; 
                      document.getElementById('bild').usemap="#sss_map"; 
                      break;

Drrichardfahrer · 7 September 2009

Danke

Ich habs jetzt anders - gänzlich mit <divs> gelöst...

JavaScript Imagemap Probleme

Drrichardfahrer

Well-known member

robert

Well-known member

Drrichardfahrer

Well-known member

Ähnliche Themen