» »

Музыкальная ёлочная ветка для сайта

Музыкальная ёлочная ветка для сайта

Всех с Наступающим Новым Годом, стал замечать народ подсуетился и стал оформлять свои сайты перед праздником, значит возник и спрос на украшательства.
Решил внести свою лепту в общую копилку новогодних плюшек, набросал вот такой музыкальный вариант, не будет занимать много мест (расположение слева сделал для тех у кого сайты с рекламными баннерами и обычно они справа, легко можно поменять на свою картинку под правую сторону) и при клике на изображение проиграет короткая мелодия (всеми знакомая Jingle Bells).

P.S. в title можно вписать не поздравление с Новым годом, а напоминание что нужно кликнуть по картинке)).

В архиве мелодия (mp3) 455kb и две картинки сделал форматом 150х171 и 200х229 (кому какая подойдёт).

Установка:
Так как до праздника осталось совсем немного, следовательно и стоять код будет недолго, поэтому можно просто всё вместе поставить в низ первого контейнера (чтобы отображалось на всех страницах и модулях). Заливаем картинку и mp3 в файловый менеджер сайта и здесь указываем путь к ним, и всё.

Копируем и ставим вверх сайта и при клике будет музыка:

Код
<div id="christmas" onclick="soundClick()">  
<img src="http://zornet.ru/Aben/Abryn/christmas-1.png" title="С Наступающим Новым Годом!" />  
</div>  

<style>  
#christmas {  
display: block;  
position: fixed;  
top: 0;  
left: 0;  
cursor: pointer;  
}  
</style>  

<script>  
function soundClick() {  
var audio = new Audio();  
audio.src = 'http://zornet.ru/Aben/Abryn/Jingle_bells.mp3';  
audio.autoplay = true;  
}  
</script>
19.12.2016 Загрузок: 13 Просмотров: 717 Комментарий: (12)

Поделиться в социальных сетях

Материал разместил

Комментарий: 12
siteschool4
siteschool4 20.12.2016 00:321
0
У меня на сайте не правильно показывается!
Kosten
Kosten 20.12.2016 00:562
0
Да, что с вашим сайтом, что не одна гирлянда не устанавливается корректно.
Kosten
Kosten 20.12.2016 01:133
0
Дико извиняюсь, так как проверил, просто установка была не очень правильной и ссылки не заточены были под папку, что поставил прямые ссылки, и теперь нужно скопировать и установить вверх сайта.

siteschool4
siteschool4 20.12.2016 02:045
0
Они меню перекрывают все как сделать что бы они не перекрывали?
Kosten
Kosten 20.12.2016 03:166
0
Но так писал вам, что у вас меню в самом вверху, безусловно будет перекрывать.
siteschool4
siteschool4 20.12.2016 02:044
0
Они меню перекрывают все как сделать что бы они не перекрывали?
Kosten
Kosten 20.12.2016 03:187
0
Но если ниже посадить, то не красиво будет, здесь как раз сделано, чтоб ветка в углу стояла.
Kosten
Kosten 20.12.2016 03:208
0
Вообще попробуйте скрипт, который можно в низ установить, к примеру вот этот, новый. Просто по дизайн , а точнее навигация у вас закрыта от того что вверх ставите.
Советник
Советник 20.12.2016 04:599
0
Что то не пойму, код уже есть готовый, но можно скачать, а там 2 изображение, и если в папку их, то не чего не появится, здесь копировать и ставить только остается, что намного лучше.
Kolinkor
Kolinkor 20.12.2016 05:0510
0
Так вот потому думаю и поставили, что не получается вывести, ну нужно читать комментарий для начала, а потом делать выводы.
Angerfist
Angerfist 20.12.2016 10:3311
0
В описании материала же обьяснил что два изображения потому что разные размеры на выбор и поэтому путь к файлам указываем сами. По поводу siteschool4, если та основная гирлянда перекрывает меню то гуглим z-index.
csretven
csretven 22.12.2016 05:0712
0
Есть у кого милодий на тему новый год, но только не такие большие, просто здесь нет функций отлючить, а так все сделано по уму, что можно вообще что то свое поставить, поставид деда мороза, просто веточка как то надоело, в прошлом году висела, пусть теперь дед мороз поет.
avatar