I will give you an example of how I have used it. I was given an image of a house plan and also pictures taken from the actual house. So, the requirement from the client was, when a user hovers over different areas (like the living room for example), the picture of the living room to appear next to the cursor. The example code below is given with a div and an image to differentiate the elements. I am not going to concentrate on the HTML, I will only give an example of how it looks and will explain the functionality after the JS code.

Simple HTML example (dont forget to style it)


The JS functionality


So A quick explanation. It declares the image as a variable $img and hides it. Then it checks if the user has hovered over the div with the functions mousemove and mouseleave. If it has hovered, then it stops any kind of animation and fades the image on screen. Then it finds the parameters of the cursor on the screen and sets the image on top center of it. If you have many images and many ‘hover spots’ on a image, you can use a image mapping and according to the different ID’s to fade in different images. Voila!

If you find my blogging useful, please share it.