What I have right now only moves image for second then goes back to orginal position?
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" type="text/css" href="styles/formstyle.css"/>
<script type="text/javascript">
function northwest(image) {
var myElement;//create reference
myElement = document.getElementById('image').style;
myElement.top = "50px";
myElement.left = "50px";
}
function northeast(image) {
var myElement;//create reference
myElement = document.getElementById('image').style;
myElement.top = "14px";
myElement.left = "1106px";
}
<title>Move It!</title>
</head>
<body>
<div id = "para">
Blah Blah Blah Blah:) </div>
<div id ="image" ></div>
<div id = "links">
<form action = " ">
<p >
<a href="javascript: northwest('image')">move background image to the northwest</a>
<a href="javascript: northeast('image')">move background image to the northeast</a>
<a href="javascript: southwest('image')">move background image to the southwest</a>
<a href="javascript: southwest('image')">move background image to the southwest</a>
</p>
</form>
</div>
</body>
</html>
CSS
#image {
background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images/kito.jpg');
background-repeat: no-repeat;
position: absolute;
top: 205px;
left: 456px;
color: inherit;
width: 133px;
height: 107px;
filter:alpha(opacity=60);
opacity:0.6;
}
#para {
text-align: left;
font-family: Arial;
position: relative;
top: 73px;
left: 447px;
color: inherit;
width: 132px;
height: 341px;
}
You have this function attached to submit buttons. So you are submitting the form each time, essentially refreshing the page.
Consider making these anchors or buttons instead of submit. If you want to use submit, you need to stop the default behavior.