The reason why i want to do this is that in html 5 we can use svg (vector graphics) in browser with native support for svg, including IE 9.
The question is why does it not work in IE. Test this either like the example with four svg files or use any four gif's, jpg's or png files. If so, use an ordinary img tag in place of the embed used by me.
Greatful for any help with this and thanks.
- Code: Select all
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animated eyes</title>
<style type="text/css">
/*On div for every svg*/
#a {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#b {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#c {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#d {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#eye_wrapper{/*The div'sabove wrapped in this for easier placement*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 15px;
top: 15px;
}
</style>
<script>
var eyes=["a","b","c","d"];
function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
function dBort(){
document.getElementById("d").style.display="none";
if(document.getElementById("d").style.display="none"){
eyes=["a","b","c","d"];
}
}
setTimeout(dBort,1500);
return;//close function
if(document.getElementById("d").style.display="none"){
var avbryt=setInterval(visaOga,100);
}
}
}
var avbryt=setInterval(visaOga,100);
</script>
</head>
<body>
<!--The div's invisible at start-->
<div id="eye_wrapper">
<div id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>
<div id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>
<div id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>
<div id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>