animated gif in DIV-Background funktioniert nicht

deb_ugger

Erfahrenes Mitglied
Hi!

Ich hab da folgendes Problem: Und zwar möchte ich ein animated gif als background-image in einem DIV abspielen. Soweit ja kein Problem. Jetzt soll dieses DIV jedoch erst bei einem Klick auf ein bestimmtes Element erscheinen (z.B. onMouseDown auf Textlink). Wenn ich das mache, erscheint jetzt zwar das DIV, das Background-Image ist jedoch nicht mehr "animated". Kennt jemand dieses Problem?

Hier der Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Unbenannt</title>
<style>
#test {
	background-image: url(animated.gif);
	background-repeat: no-repeat;
	top: 100px;
	left: 100px;
	width: 260px;
	height: 85px;
	position: absolute;
	visibility: hidden;
	display: none;
}
</style>

<script>
function makevisible() {
	document.getElementById('test').style.visibility = 'visible';
	document.getElementById('test').style.display = 'block';
	document.getElementById('test').style.backgroundImage = 'url(animated.gif)';
}
</script>
</head>

<body>
<div id="test"></div>
<a href="javascript:;" onMouseDown="makevisible();">make visible</a>

</body>
</html>

mfg,
debugger
 
Zuletzt bearbeitet:
und was noch viel interessanter ist...
wenn ich in das javascript ein alert einbau, funktionierts auf einmal ;)

Code:
<script> 
function makevisible() {
   alert("test");
   document.getElementById('test').style.visibility = 'visible'; 
   document.getElementById('test').style.display = 'block'; 
   document.getElementById('test').style.backgroundImage = 'url(animated.gif)'; 
} 
</script>
 
Zuletzt bearbeitet:
Grosses Problem - kleine Lösung:
ersetze das href="javascript:;" durch href="javascript:void(0)" oder nehme es ganz heraus... den Cursor kriegt man auch per CSS hin.
 
Zurück