Skip to content

Instantly share code, notes, and snippets.

@jimbog

jimbog/events.html

Created November 21, 2014 04:42
Show Gist options
  • Save jimbog/8c14e25ca2763b851dfc to your computer and use it in GitHub Desktop.
Save jimbog/8c14e25ca2763b851dfc to your computer and use it in GitHub Desktop.
Download ZIP
where is waldo with for js events class
Raw
events.html
<!DOCTYPE html>
<html>
<head lang="en">
<style></style>
<meta charset="UTF-8">
<title>Where is Waldo</title>
</head>
<body>
<img src="waldo.jpg" alt="waldo"/>
<br/>
<button id="startGame">Start Game</button>
<script>
var waldo = document.getElementsByTagName("img")[0];
waldo.style.position = "absolute";
waldo.style.top = "0px";
waldo.style.right = "0px";
var startGame = document.getElementById("startGame");
startGame.onclick = function () {
this.style.visibility = 'hidden';
waldo.style.opacity = 0;
}
waldo.addEventListener("mouseover", function(){
console.log(this);
this.style.opacity = 1;
})
waldo.addEventListener("mouseout", function(){
this.style.opacity = 0;
this.style.left = (Math.random() * 800) + "px";
this.style.top = (Math.random() * 600) + "px";
console.log(this.style.top);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment