Ребятки кому не сложно помогите пожалуйста,не могу сделать адаптацию глаз(всё остальное ужимается а глаза не ужимаются без потери функциональности",всё максимально криво и голова кругом,и скажите пожалуйста как мне сделать чтобы при наведении мышкой на ссылку игры,картинка головы подменялось на другую картинку"там та же голова с другой улыбкой"
очень прошу помощи.
a0559877.xsph.ru загрузил вид на хост
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/dda33126b8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
html,
body {
background-position: center;
background-repeat: no-repeat;
/* background-image: url(/img/boy-308465_1280.png); */
background-size: 40%;
}
.eye1 {
width: 100px;
height: 100px;
border-radius: 100%;
border: 3px solid black;
position: absolute;
top: 40%;
left: 40%;
background-color: tan;
}
.pupil1 {
width: 30px;
height: 30px;
background: #000;
position: absolute;
left: 70px;
bottom: 35%;
border-radius: 100%;
}
.eye2 {
width: 100px;
height: 100px;
border-radius: 100%;
border: 3px solid black;
position: absolute;
top: 40%;
left: 50%;
background-color: tan;
}
.pupil2 {
width: 30px;
height: 30px;
background: #000;
position: absolute;
left: 70px;
bottom: 35px;
border-radius: 100%;
}
/* .link :hover {
body background-image: url(/img/boy-308465_1280.png);
background-position: center;
background-repeat: no-repeat;
background-size: 40%;
} */
.link {
/* background: url(/img/boy-308465_1281.png); */
/* Путь к файлу с исходным рисунком */
display: block;
/* Рисунок как блочный элемент */
}
.link :hover {
-webkit-transform-style: flat;
}
.smile:hover {}
</style>
</head>
<body>
<div>
<h1 align="center ">Во что-бы поиграть?!?</h1>
</div>
<img class="smile" style=" position: absolute;margin-left: 25%;" src="/img/boy-308465_1281.png" width="50%" />
<div>
<a style=" margin-left: 10%; border: 5px solid gold; width: 80px; " class=" link " href="/игра2/findPresent.html " ;>
<h2>Поиск сокровищ</h2>
</a>
</div>
<div>
<a style=" margin-left: 80%;border: 5px solid gold; width: 150px; " ; class="link " href=" # ">
<h2>Сапер<i class=" fas fa-bomb "></i></h2>
</a>
</div>
<div>
<a style="margin-left: 10%; margin-top: 40%;border: 5px solid gold; width: 150px; " class="link " href=" # ">
<h2>Морской бой</h2>
</a>
</div>
<div>
<a style=" margin-left: 80%;border: 5px solid gold; width: 150px; " " class=" link " href=" # ">
<h2>Танчики</h2>
</a>
</div>
</div>
<div class=" main ">
<div class=" eye1 ">
<div class=" pupil1 ">
</div>
</div>
<div class=" eye2 ">
<div class=" pupil2 ">
</div>
</div>
</div>
</div>
<script>
document.onmousemove = function(event) {
let x = event.x - 560;
let y = event.y - 380;
document.querySelector('.eye1').style.transform = 'rotate(' + 57.2958 * arcctg(x, y) + 'deg)';
document.querySelector('.eye2').style.transform = 'rotate(' + 57.2958 * arcctg(x - 116, y) + 'deg)';
function arcctg(x, y) {
if (x > 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
if (x < 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
if (x < 0 && y < 0) return Math.PI + Math.atan(y / x);
if (x > 0 && y < 0) return 3 * Math.PI / 2 + Math.abs(Math.atan(x / y));
}
}
</script>
<script src=" https://code.jquery.com/jquery-3.5.1.slim.min.js " integrity=" sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj " crossorigin=" anonymous ">
</script>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js " integrity=" sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns " crossorigin=" anonymous ">
</script>
</body>
</html>
