ImageSwap langsam im Firefox!
Merius
- javascript
Hallo, ich habe folgendes Problem.
Ich habe ein Bild, in dem man verschiedene Bereiche auswählen kann. Bei den mouseover Events wird das aktuelle Objekt markiert (image swap) und bei mosueout wieder das Standard Bild angezeigt (image swap).
Realisiert habe ich das ganze mittels Javascript.
Im IE7 und im neuen Opera funktioniert das Bestens, sobald ich auf den ausgewählten Bereich fahre, erscheint das neue Bild sofort. Der Firefox allerdings braucht ein paar Sekunden und dass ist nicht tolerierbar.
Interessant ist auch, teste ich dass auf localhost, habe ich auch keine Verzögerung, auf dem Webserver führt es allerdings zu 2-3 Sekunden Verzögerungen.
Hat jemand eine Ahnung woran dass liegen könnte?
Das Bild
<div>
<img id="pic" src="show01.jpg" usemap="#warrior" />
</div>
Die Map
<map id="warrior_map" name="warrior">
<area shape="poly" coords="12,8,28,155,41,153,27,6" href="battle.php?sel=sword">
<area shape="poly" coords="62,97,102,88,159,99,161,69,102,70,56,82" href="battle.php?sel=horn">
</map>
JavaScript Funktion zum preload der Bilder sowie hinzufügen der mouseover,out Events.
<script type="text/javascript">
var maps=new Array();
var preloads=[];
start='show01.jpg';
maps[0]='show02.jpg';
maps[1]='show03.jpg';
window.onload=function() {
elem=document.getElementsByTagName('area');
for(c=0;c<elem.length;c++) {
elem[c].id='a'+c;
elem[c].onmouseover=function() {
document.getElementById('pic').src=maps[this.id.split('a')[1]];
}
elem[c].onmouseout=function() {
document.getElementById('pic').src=start;
}
}
}
function preload(){
for(i=0;i<arguments.length;i++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[i];
}
}
preload('show01.jpg','show02.jpg','show03.jpg');
</script>