Javascript DOM onmouseover Event

Introduction

Execute a JavaScript when moving the mouse pointer onto an image:

The function bigImg() is triggered when the user moves the mouse pointer over the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image.

<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" 
     onmouseout="normalImg(this)" 
     border="0" 
     src="image3.png" 
     alt="Smiley" 
     width="32" 
     height="32">
<script>
function bigImg(x) {/*w  w w. jav a2  s. c o  m*/
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children.

Bubbles: Cancelable: Event type: Supported HTML tags:	Yes Yes MouseEvent All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

Previous Next

Javascript DOM onmouseover Event

Introduction

Related