image mouse over

by JibstaMan

HTML

<div id="test">
  <div id="image">
  
  </div>
</div>

CSS

body {
  margin: 0;
}

#test {
  width: 800px;
  height: 600px;
  background: black;
  position: relative;
}

#image {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 100px;
  height: 100px;
  background: #999;
}

#image.hover {
  background: white;
}

JavaScript

// simulate an in-game image object.
var image = {
	x: 200,
  y: 200,
  width: 100,
  height: 100
};

var img = document.getElementById('image');
document.addEventListener('mousemove', function(e)
{
	if (e.x > image.x && e.x < (image.x + image.width)
     && e.y > image.y && e.y < (image.y + image.height))
     {
     		// mouse is over the image
     		img.className = "hover";
     }
     else
     {
     		// mouse isn't over the image (anymore)
     		img.className = "";
     }
});