onmouseenter Event

You can apply this same logic to an image. By putting your mouse over an image, it can increase in size -- or decrease, or make it do whatever you wish.

This is what the final product will look like, where you will place your mouse over the image to trigger it to become bigger in scale:


To get there, you use the same logic and steps that were used previously, by identifying the functions in JavaScript and the elements in HTML.

  • Identify the image that is going to be used (it's source, or src). The onmouseenter event will be a function of the bigger image, while the onmouseleave event will be a function of the normal image. In the JavaScript code below, you can see that I identified the bigger image as "bigdog" and the normal image as "normaldog". I then identified their heights and widths that I wanted them to change to, when the mouse hovers over and recognizes the function.
    • 			
function bigdog(x) {
    x.style.height = "260px";
    x.style.width = "360px";
}

function normaldog(x) {
    x.style.height = "130px";
    x.style.width = "180px";
}
  • We then put this information into HTML, which follows the same format.
    • 			
< img onmouseenter="bigdog(this)"
onmouseleave="normaldog(this)"
src="images/IMG_0814.jpg"
width="180" height="130" >
    Back to page 1!