Дмитрий_Кирсанов,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CrazyCircle</title>
<style>
.crazycircle
{
position: absolute;
margin-top: 300px;
margin-left: 450px;
width: 60px;
height: 60px;
background: url(circleimg/sadsmileface.jpeg) rgb(255, 0, 0);
}
.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;
}
</style>
</head>
<body>
<div class="x">
<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>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))
{
document.getElementById("crazycircle").style.marginLeft = parseInt(computedStyle.marginLeft)+5+"px";
}
}
}
window.onload = Init();
</script>
</body>
</html>