<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS обработчики</title>
<script>
function OnMouseOver(img) {
img.width = 500;
}
function OnMouseOut(img) {
img.width = 100;
}
window.onload = function () {
let counter = 0;
let img = document.getElementById('img');
img.onclick = function (event) {
if (counter == 0) {
img.style.width = '100px';
counter = 1;
} else if (counter == 1) {
img.style.width = '500px';
counter = 0;
}
console.log(event.type + " на " + event.currentTarget);
console.log("Координаты: " + event.clientX + ":" + event.clientY);
}
}
</script>
</head>
<body>
<img onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)" width="100" src="img/Catalina.jpeg" alt="">
<br>
<img id="img" src="" width="100" alt="">
</body>
</html>