Higher – Javascript mouse events

The code bellow uses mouse events to run a javascript function.

On line 15  the onmouseover and onmouseout events are used to call the function on line 6.

Line 7 targets the swap id and uses the argument passed to replace the image source.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
 
<script type="text/javascript">
function changeImage(img_src) {
document.getElementById("swap").src = img_src;
 
}
</script>
 
</head>
<body>
<h1>roll over</h1>
<img id="swap" src="redButton.jpg" onmouseover='changeImage("blueButton.jpg")' onmouseout='changeImage("redButton.jpg")'>
 
</body>
</html>