Question

Хочу чтобы при наведении мышкой на котика издавался звук. Как это можно реализовать?

Answer 1

Пример подобной реализации можете найти вот здесь.

Comments

ок, код есть, но гуглить я и без вас могу, куда это писать, что с этим делать?  

---

jacson007 jdfh,

Смотрим готовое решение вот здесь(и стили и скрипт все готовое лишь под себя подстроить) - http://jsfiddle.net/9avkgtgm/ изображения свои ставим и меняем на свои мелодии.

Установка очень проста, стили: 

.img-container {
    width: 100px;
    height: 100px;
    border: 2px #E62A14 dashed;
    margin: 50px auto;
    background: url(http://www.site-studio.ru/yandex.gif) center center no-repeat;
}

.img-container:hover {
    border-color: #145EE6;
    background-image: url(http://ozozhe.ru/img/poiski/google.gif);
}

в таблицу стилей, далее устанавливаем в нужном месте на сайте скелет каркас при наведении на который будет вопроизводиться мелодия:

<div class="img-container"></div>
<div id="jp"></div>

далее скрипт ставим здесь же ниже под кодом который выше:

<script>
var sounds = [
    'http://www.soundjay.com/button/beep-02.mp3',
    'http://www.soundjay.com/button/beep-06.mp3',
    'http://www.soundjay.com/button/beep-09.mp3',
    'http://www.soundjay.com/button/button-24.mp3'
];

$(document).ready(function() {
    $('#jp').jPlayer({
        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "mp3",
		wmode: "window"
    });
    
    
    
    $('.img-container').on('mouseenter' ,function(){
        var randomSound = sounds[Math.floor(Math.random()*sounds.length)];
                
        $('#jp').jPlayer("setMedia", {
         mp3: randomSound
        }).jPlayer("play");
    });
    
});                                      
</script>

---

Yuri_Geruk,

Ничего не работает.  Еще раз, CSS код надо в таблицу стилей, HTML код куда девать? JavaScript код куда девать?

 

надо вот на эту строчку из таблицы стилей (CSS) :

#sidebar:before {content:"";width:152px;height:65px;background:url(/.s/t/1191/cat.png);position:absolute;right:0;top:-23px;}

навесить звук.