Блог

Главная - Вопросы по программированию - пользовательский курсор со звуковым эффектом onclick

пользовательский курсор со звуковым эффектом onclick

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь изменить курсор на пользовательское изображение со звуковым эффектом. Моя текущая проблема в том, что курсор исчезает, но заменяющее изображение не отображается, и звуковой клип не воспроизводится. Что я сделал не так?

 <head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>

<SCRIPT LANGUAGE="JavaScript">

function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>

<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src="" gunshot.mp3 "" hidden="true" autostart="true" loop="false" />";
}
</script>   

</head>
<body bgcolor="#000000">

<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')">    <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>

</body>

Спасибо за вашу помощь.

Редактировать:

Я использую dreamweaver как на ПК, так и на Mac для совместимости с несколькими браузерами, в основном IE, Firefox, Chrome и Safari. Я думал, что .gif может быть частью проблемы вместо .cur. Другой код курсора, который я использую, это:

 <head>
<script type="text/javascript">
$(document).ready(function(){
   $('#test-area').mouseout(function(){
       $('#mycursor').hide();
       return false;
   });
   $('#test-area').mouseenter(function(){
       $('#mycursor').show();
       return false;
   });
    $('#test-area').mousemove(function(e){
        $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY   7);
    });
});
</script>
<style type="text/css">
#test-area {
    height: 1152px;
    width:864px;
    border: 3px dashed #CCCCCC;
    background: #FFFFFF;
    padding: 20px; 
    cursor: none; 
    top: 25px;
    left: 25px;
    z-index:1;
}
#mycursor {
    cursor: none;
    width: 100px;
    height: 100px;
    background: url(crosshairs.cur); 
    repeat: no-repeat;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 10000;
}
</style>

</head>

<body bgcolor="#000000">

  <div id="test-area">
        Move mouse over this area.
  </div>

  <div id="mycursor">
  </div>

</body>

Комментарии:

1. откуда oBox он определяется и в каких браузерах вы тестировали

2. oBoxInner и oBox даже не определены. И что это? document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML ??

3. И вы используете bgcolor="#000000" ??? Остановите их и начните использовать CSS.

Ответ №1:

у вас есть несколько ошибок в коде

oBox не определено. oBox.style.cursor="crosshair.gif";

Курсор лучше всего .cur

embed тег, который, я думаю, поддерживает только MIDI, и ваша ссылка gunshot.mp3 в вашем oncick и попытка вызвать ссылку "" gunshot.mp3 "" в src, должны быть soundfile

и у вас есть document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML ДВАЖДЫ?

Какие браузеры вы хотите поддерживать звук? Netscape, IE6, Chrome.. и т. д.

Метки: