Flackern bei Kombination ImageMap + JavaScript
Jeremy
- javascript
0 ChrisB
Hallo zusammen,
für mich ist JavaScript etwas Neuland, bin aber gezwungen es für eine Idee einzusetzen und hab jetzt auch etwas Blut geleckt ;-) Ich möchte eine Karte zerteilen und beim mouseover über bestimmte Regionen einfach ein übergeblendetes Bild erscheinen lassen. Dass funktioniert auch, leider flackert dass Ganze ziemlich unangenehm. Hier mal mein Code:
HTML-Teil:
<div id="main">
<div id="whole_card">
<map name="Card">
<area id="north" shape="poly" coords="0,0,912,0,863,470,835,
466,818,494,779,494,770,517,637,476,
571,523,538,506,500,550,476,541,418,
509,379,499,367,481,298,577,227,508,148,521,184,
568,149,568,139,608,157,620,139,636,23,627"
href="references_North.html" alt="Norden" title="Norden"
onmouseover="popUp_Cards(id,true)"
onmouseout="popUp_Cards(id,false)">
</map>
<img mame="Card_Pic" src="Bilder/Postleitzahlen_Ges.jpg"
width="457" height="617" border="0"
alt="Postleitzahlen" usemap="#Card"/>
</div>
<div id="north_pic">
<img mame="Card_Pic" src="Bilder/Postleitzahlen_Nord.png"
width="457" height="300" border="0" >
</div>
CSS-Teil:
#whole_card{
position: absolute;
z-index:500;
top: 221px;
}
#north{
position: absolute;
top: 221px;
left: 400px;
border: solid blue;
}
#north_pic{
position: absolute;
top: 221px;
left: 0px;
border: solid blue;
visibility: hidden;
}
JavaScript Teil:
function popUp_Cards(id, flag) {
if(flag==true){
jer1= document.getElementById(id+"_pic");
if(jer1){
jer1.style.visibility = "visible";
}
}else{
document.getElementById(id+"_pic").style.visibility = "hidden";
}
}
Achja um der Frage vorzubeugen: Ja ich weiss es gibt noch andere Arten die Karte ohne JavaScript umzusetzen - ich kenn jetzt so ca 5, aber keine kann dass was ich will ;-)
Hi,
Ich möchte eine Karte zerteilen und beim mouseover über bestimmte Regionen einfach ein übergeblendetes Bild erscheinen lassen. Dass funktioniert auch, leider flackert dass Ganze ziemlich unangenehm.
Wenn du das Bild an der Mausposition einblendest - dann findet natuerlich auf der darunter liegenden Area der mouseout-Event statt. Also wird das gerade eingeblendete Bild wieder ausgeblendet ... daraufhin kommt dann wieder mouseover auf der Area, es wird wieder eingeblendet, etc. pp.
MfG ChrisB