Javascript Event Exercise to Move Picture

This exercise is for learning how to use Javascript event work on web page.

 

I made the web page for moving picture.

1. Create a document that has a small image of myself. (It should be hidden at first)
2. Regardless of the position of the cursor, the image must appear with the center of the position of the mouse cursor at the time. 
3. Included the external CSS file to make red heading on my web page.

Here is my code for the solution.

I load my image on document with style="display:none." It makes the picture hidden at first.

window.addEventListener("load", start); makes the document change if the page load at first.

In start() function, we put window.addEventListener("click", movePic); to trigger movePic() function if we do mouse click on the page.

 

Now, we get a value e to make our mouse cursor in the middle of the picture. We should change the display="inline", and position = "absoute."

To make the cursor in the middle of the picture, x variable should be the x-150/2, which is the half of the picture width, and y variable should be the y-200/2, which is the half of the picture height.

 

 

External CSS file

This is my external CSS file to make red-color heading.

I choose the h3 in main id!