Homework SourseUsing javascript add a small image at the top center of the
Using javascript, add a small image at the top center of the page. When the user clicks on any part of the page, the image will be moved to the new cursor location and centered there. The “move” has to be animated and image must move “smoothly” to the new location, not jump
Solution
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html lang=\"EN\" dir=\"ltr\" xlmns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=content-type content=text/xml;
charset=utf-8 />
<title>movement.html</title>
<link rel=stylesheet
type=text/css href=movement.css />
<script type=text/javascript src=movement.js>
</script>
</head>
<body onload=init() >
<h1> Click buttons to move ball </h1>
<div id=surface>
<div id=sprite
style=position:absolute;
top:100px; left=100 px;
height:25 px; width: 25 px;>
<img src=ball.gif alt=ball />
</div>
</div>
<form action= \"#\"
id=controls>
<fieldset>
<button type=button onclick=moveSprite(-5,0)>
left
</button>
<button type =button onclick=moveSprite(-5,0)>
right
</button>
</fieldset>
</form>
<p id=output>
x=100, y=100
</p>
</body>
</html>
