Javascript
Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover</title>
</head>
<body>
<img id="hover-image" alt="Project 2" width="50%">
<script>
document.addEventListener("DOMContentLoaded", function () {
const image = document.getElementById("hover-image");
const originalSrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYCyz8Snqae3ov_dKtDPmdwv-WQQ8xjmoGJcUa0JJ2yh-5cmdXlmNhQtVbIWaomCgDUoU6nD4APJcYPtYSU0APaWI2jGssPGC2bRyFiPRhUmkV7c8UoP0Huy9SWz9RCkJwFegh0mH6bsjJjJFVZ_ZhyphenhyphenT85urNlh_FI8EzB397E8fLmletekMksrz7B1g/s1600/Project%202.gif"; // Project 2
const hoverSrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbb8rG0w4ybhOi9ROiZ69nIwYzmDlY_KVG4GNvst4EPl_3xsjE4LAlIbr6UmbH7wyB3OUNCBPw04G7GzZGIIU4W7qaLhprfdEF2igE3mkoKIFxnZjVLr6HPZxGcrSun9aLZz9trjjd5jLZ7K3cJ_7OVIN8b3NMz9CVu7BwmMQ065YP1rZIH0p46g4cKw/s1600/Project.gif"; // Project
image.src = originalSrc;
image.addEventListener("mouseenter", function () {
image.src = hoverSrc;
image.alt = "Project";
});
image.addEventListener("mouseleave", function () {
image.src = originalSrc;
image.alt = "Project 2";
});
});
</script>
</body>
</html>
Commenti
Posta un commento