Почему не работает функция?
function Init()
{
document.getElementById("left").onmouseover = function()
{
var computedStyle = getComputedStyle(document.getElementById("crazycircle"));
if ((parseInt(computedStyle.marginTop) > -10) && (parseInt(computedStyle.marginTop) < 620) && (parseInt(computedStyle.marginLeft) > -10)
&& (parseInt(computedStyle.marginLeft) < 960))
{
computedStyle.marginLeft = parseInt(computedStyle.marginLeft)+5+"px";
}
}
}
window.onload = Init;
.crazycircle
{
position: absolute;
margin-top: 300px;
margin-left: 450px;
width: 60px;
height: 60px;
background: url(circleimg/sadsmileface.jpeg);
}
.left
{
position: relative;
top: 0px;
left: 0px;
width: 5px;
height: 55px;
background-color: green;
}
.right
{
position: relative;
top: -55px;
left: 55px;
width: 5px;
height: 55px;
background-color: green;
}
.top
{
position: relative;
top: -115px;
left: 0px;
width: 60px;
height: 5px;
background-color: green;
}
.low
{
position: relative;
top: -60px;
left: 0px;
width: 60px;
height: 5px;
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CrazyCircle</title>
<link href="circlecss/crazycircle2.css" rel="stylesheet">
</head>
<body>
<div>
<div class = "crazycircle" id = "crazycircle">
<div class = "left" id = "left"></div>
<div class = "right" id = "right"></div>
<div class = "top" id = "top"></div>
<div class = "low" id = "low"></div>
</div>
</div>
<script src = "/js/CrazyCircle.js"></script>
</body>
</html>