nicht angemeldet
Vorladefunktion verhindert vollständige GIF Animation
Hallo,
ich hab folgendes Problem:
Ein div mit einer Hintergrundgrafik, beim mouseOver mit der maus wird ein GIF als Hintergrund geladen, und beim mouseOut ein anderes.
Das Funktioniert soweit wunderbar.
Nun hab ich ein JS-Funktion gebaut, welche die Grafiken vorläd um zu verhindern, dass es zu einer verzögerung kommt.
Nun hab ich das Problem, dass beim mouseOver bzw. mouseOut, nur noch der letzte Frame des GIFs angezeigt wird, und nicht mehr die Animation.
Meine Frage, wie löse ich das nun?
HTML
-----------------------------------------
1.
<body onLoad="preloadmenue('pics/hover/start_out.gif','pics/hover/start_over.gif');">
2.
<div id="navi_element_1" onMouseOver="this.style.background='url(pics/hover/start_over.gif)';" onMouseOut="this.style.background='url(pics/hover/start_out.gif)'">
</div>
-----------------------------------------
CSS
-----------------------------------------
#navi_element_1
{
width: 198px;
height: 30px;
background-image:url(pics/start.jpg);
}
-----------------------------------------
JS
-----------------------------------------
function preloadmenue() {
pre_img = new Array;
args = preloadmenue.arguments;
max = args.length;
for(z=0;z<max;z++)
{
pre_img[z] = new Image;
pre_img[z].src = args[z];
}
}
-----------------------------------------
-
Hallo,
Nun hab ich das Problem, dass beim mouseOver bzw. mouseOut, nur noch der letzte Frame des GIFs angezeigt wird, und nicht mehr die Animation.
Kann ich so nicht nachvollziehen, das mag aber auch mit am jeweiligen Browser
liegen.M.E. schaut das "übliche" Problem meist so aus, dass die Animation nach dem
ersten Aufruf immer wieder durchläuft, also unabhängig vom Bildwechsel.Um den Start der Animation beim jeweiligen Aufruf sicherzustellen, müßte
jedesmal ein neues img-Objekt erzeugt werden, was als Hintergrund vmtl. nicht
klappt.Einfacher wäre es wohl, die Bilder direkt einzubinden und auszutauschen.
Grüsse aus Düsseldorf
Cyx23
-
Danke für die Antwort!
also ich hab nun probiert mit einer anderen Funktion über eine temporären Variable und einem erneuten New Image() die Bilder anzuzeigen.
hat im FF wunderbar funkioniert nur der verd***** IE macht probleme...
Die Bilder sind kurz weg, und dann sichtbar.kann ich das irgendwie verhindern, dass der IE das nochmals komplett neu läd?
denn so sieht es für mich aus.QuellCode der neuen Funktion
------------------------------------------
function chopImage(target,url)
{
var target;
var url;
if(pre_img.length != 0)
{
var max;
max = pre_img.length;
for(x=0;x<max;x++)
{
if(pre_img[x].pr_name == url)
{
tmp = new Image();
tmp.src = pre_img[x].src;
document.getElementById(target).style.background = "url("+tmp.src+")" ;
}
}
}
}
-------------------------------------------
Hallo,
kann ich das irgendwie verhindern, dass der IE das nochmals komplett neu läd?
Hab das gerade mal getestet, funktioniert gut unter FF, Opera oder Safari,
beim IE 6 sieht es auch noch ok aus.Mit IE 7 und 8 scheinen jedoch die Animationen erst gar nicht neu zu starten.
Vielleicht läßt sich bei den IEs irgendwo per DOM ansetzen.
Grüsse
Cyx23
-
IE ist einfach grauenhaft...
-
-
-