<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="images/logo.png">
</head>
<body>
<div id="container">
<div id="mainpic">
<video width="330" autoplay loop controls style="position:absolute;left:540px;top:45px;">
<source src="video.mp4" type="video/mp4">
</video>
</div>
<div id="menu">
<ul>
<li><a href="index.html"><img src="images/menu-index.png" alt=""></a></li>
<li><a href="portfolio.html"><img src="images/menu-portfolio.png" alt=""></a></li>
<li><a href="contacts.html"><img src="images/menu-contacts.png" alt=""></a></li>
</ul>
</div>
<div id="content">
<a href="#"><img src="images/1-button.png" alt="" style="position:absolute;left:120px;top:1390px;"></a>
<a href="#"><img src="images/2-button.png" alt="" style="position:absolute;left:120px;top:1844px;"></a>
<a href="#"><img src="images/3-button.png" alt="" style="position:absolute;left:120px;top:2180px;"></a>
<img src="images/bottom.png" alt="" style="position:absolute;left:0px;top:2315px;">
</div>
</div>
</body>
</html>
Кнопки "1-button.png", "2-button.png" и "3-button.png" нужно сделать так, чтобы при нажатии на них мышью они меняли изображение на другое (изображение нажатой кнопки) и издавали звук щелчка. Я сам JS не учил, прошу помочь мне с написанием скрипта. Пробовал приспособить то, что посоветовали тут, но не получилось — не работает. Помогите составить JS-скрипт, который бы менял изображение "1-button.png" при нажатии на него на "1-button-pressed.png", ну и соответственно с остальными двумя кнопками. А звук клика один — допустим, "click.mp3".