my code shows an image in the centre of the webpage, and does 2 different actions if click is outside or inside image. I want to change the position of the image randomly at every onclick() event (no matter if the click is in or out), while staying within the page initial size.
The two actions are correctly done, but the image doesn't change position. Can someone tell me what i should change?
<html>
<head>
<title>random position</title>
</head>
<script src="http://ift.tt/2nSb99o">
$(window).height();
$(window).width();
</script>
<body>
<style>
#myImage { position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin:auto; }
</style>
<script>
function moveImg() {
var img = document.getElementById("myImage");
var width = $(img).width();
var height = $(img).height();
document.addEventListener("click", function(e) {
var offset = $(img).offset();
if (e.target === img) {
action 1;
}
else {
action 2;
}
// GENERATE RANDOM LOCATION IN BOTH CASES
img.offset.left = Math.floor(Math.random() * (window.width()- 0) + 0);
img.offset.top = Math.floor(Math.random() * (window.height()- 0) + 0);
}, false);
}
</script>
<img id="myImage" src="img.gif" onclick="moveImg()">
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire