Зайцев Я - Добавляем звуки при наведении мыши или клике на меню
^ В верх

Зайцев.Я

Все самое интересное в разделе "Флудилка"


Войти
x
x

Кто на сайте

×

Сообщение

PLG_KUNENADISCUSS_DEPENDENCY_FAIL

Сайт можно заказать здесь http://zaycev.me/

Главная

Добавляем звуки при наведении мыши или клике на меню

И так - всё просто , звук является частью дизайна и способность проигрывать звуковые ролики. Чтобы проиграть звук при прохождении курсором мыши определённой области нам придется полагаться на HTML5 или Flash. Но кто в наше время захочет связываться с Flash?  Поэтому обратимся к HTML5, который может проигрывать звук с помощью своего элемента <audio> (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). Чтобы обеспечить поддержку данной функции как можно большим числом браузеров будем использовать и MP3 источники (WebKit и IE) и OGG (Firefox и Opera).

Открываем index.php → между тегами <header> вставляем вызов процедуры выполнения скрипта:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Далее вставляем скрипт в том месте страницы index.php где у нас позиция модуля меню , а точнее сразу за ним перед закрывающим тегом </div>

Заранее измените на свои элементы отмеченные красным и синим цветом, как понятно красным отмечен путь к звуковым файлам ,а синим ID или CLASS модуля меню , его вы можете посмотреть кликнув правой кнопкой мыши по меню и выбрав пункт "Просмотр кода элемента"

<audio id="beep-two" preload="auto"> {
display:none;

}
<source src="/audio/beep.mp3" controls></source>
<source src="/audio/beep.ogg" controls></source>
К сожалению ваш браузер не поддерживает элемент &lt;audio&gt;.
</audio>

<script>$(swmenu)
.each(function(i) {
if (i != 0) { 
$("#beep-two")
.clone()
.attr("id", "beep-two" + i)
.appendTo($(this).parent()); 
}
$(this).data("beeper", i);
})
.click(function() {
$("#beep-two" + $(this).data("beeper"))[0].play();
});
$("#beep-two").attr("id", "beep-two0");</script>

ВАЖНО ПРАВИЛЬНО ОПРЕДЕЛИТЬ МЕСТО, КУДА ВСТАВИТЬ ЭТОТ КОД!

Заливаем звуковые файлы по FTP на Ваш сайт и проверяем что получилось.

В данном примере звук будет проигрываться при нажатии на пункт меню , если хотите слышать звуки при наведении на пункт меню ,то меняем .click(function() на .mouseenter(function()

Рабочий вариант (как демо-пример) находиться на этом сайте... По счелкайте по главному меню. Успехов!!!

 Кому понравился звук перелистывания страниц с моего сайта, скачать его можно тут. Выберете "Сохранить как"

 

Яндекс.Метрика Рейтинг@Mail.ru