Допустим, у меня есть следующий HTML-код:
<!doctype html>
<html lang="en">
<head>
<title> Lab 6 - Task 1 </title>
<meta charset="utf-8">
<script src="imagechanger.js"></script>
<style>
div {
width: 50%;
margin: auto;
text-align: center;
font-family: sans-serif;
}
img { width: 300px; }
</style>
</head>
<body>
<div>
<h1> Fernandel Faces </h1>
<img src="face1.png" id="faces">
<p> Ask a question! </P>
<p> Move Mouse Over Fernandel for a Response </p>
</div>
</body>
</html>
, и у меня есть 4 файла с именами face1.png, face2.png, face3.png и face4.png, как мне написать свой JavaScript, чтобы при наведении курсора мыши на исходное изображение каждый раз он случайно менялся на один из 4 изображения?
ОТВЕТ :
window.onload=function(){
var images = ["face1.png", "face2.png", "face3.png", "face4.png"];
document.getElementById("faces").addEventListener("mouseover", function(event) {
var random = images[Math.floor(Math.random() * images.length)];
event.target.setAttribute("src", random);
});
}