Главная / Верстка / Веб решения / Разный звук при наведении для ссылок

Разный звук при наведении для ссылок


30.06.2013 11:3022412

В данном примере использования html тега audio мы научимся применять звуковой эффект таким образом , чтобы для нескольких ссылок были разные звуки. Где это может пригодиться ? Да где угодно , наверное везде где ваша фантазия поможет .

Скажем если у вас сайт о животных , и вы хотели бы при наведении мышки на ссылку ведущую в раздел кошек слышать мяуканье , а на собак гавканье , и тд.

Вариантов применения данного метода можно придумать множество . Воспроизведение звука с помощью тега аудио в html должно быть ненавязчивым, потому что раз , два , а потом будет действовать на нервы. Так что интерактивность это хорошо , но в меру...

Теперь перейдем к подробному рассмотрению :

Что нужно для воспроизведения аудио звука в html5 при наведении мышки ?

Понадобится библиотека jquery - подойдет любая , и аудиофайлы которые будем воспроизводить при наведении на ссылку. Каркас страницы будет стандартным , как и в других уроках , поэтому на нем заострять внимание я не буду , напомню лишь для новичков , что все коды которые описываются в примерах и уроках , нужно вставлять между тегами<body></body>

<!DOCTYPE html>
<html>
        
        <head>
                <meta charset="utf-8">
                <title>
                        Разный звук при наведении
                </title>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
                </script>
        </head>
        
        <body>
                <h1>
                        Разный звук при наведении для каждой ссылки
                </h1>
          
                <div id="myblock">
                        Звук при наведении на ссылку:
                        <a href="http://prohtml.net/services/templater" target="_blank">Бесплатный онлайн генератор шаблонов</a>
                        <audio id="myaudio" preload="auto">
                                <source src="oops.mp3">
                                        <source src="oops.ogg">
                                                Ваш браузер не поддерживает воспроизведение аудио при помощи html5.
                        </audio>
                </div>
                <div id="myblock2">
                        Другой звук при наведении на ссылку:
                        <a href="http://prohtml.net/catalog" target="_blank">Тематический каталог сайтов</a>
                        <audio id="myaudio2" preload="auto">
                                <source src="myau.mp3">
                                        <source src="myau.ogg">
                                                Ваш браузер не поддерживает воспроизведение аудио при помощи html5.
                        </audio>
                </div>
                <script>
                        var myaudio = $("#myaudio")[0];$("#myblock a").mouseenter(function(){myaudio.play();});var myaudio2 = $("#myaudio2")[0];$("#myblock2 a").mouseenter(function(){myaudio2.play();});
                </script>
        </body>

</html>
 


Сам тег audio так устроен что его функционал состоит в том чтобы управлять музыкой , звуком , но управление событием мышки находится за пределами его компетенции , для этого мы и подключили библиотеку , и создали с помощью query мини-обработчики события наведения мыши на объект , в данном случае это ссылка.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Html5 Audio , Звук При Наведении





«Разный звук при наведении для ссылок» - Похожие страницы

Звук при наведении на ссылку Звук при наведении на ссылку В данном примере использования html тега audio мы научимся применять звуковой эффект при наведении мышки на ссылку. Вариантов применения данного метода можно придумать множество , главное условие-не ставить ...
Биржа ссылок Sape+    Биржа ссылок SAPE —самая известная и, пожалуй, самая эффективная система купли-продажи ссылок в Рунете. Она дает возможность очень неплохого заработка на своем сайте, даже если на Вашем сайте совсем нет п...
Бэклинк – значение термина, роль внешних ссылок в поисковом продвижении Поисковое продвижение, как и любой специфический вид человеческой деятельности, имеет свою терминологию. Одним из часто используемых терминов в ней является «бэклинк». Так называется любая ссылка с одного са...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям