具有onclick音效的自定义光标

时间:2011-11-01 02:45:39

标签: 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>

感谢您的帮助。

编辑:

我在PC和Mac上使用Dreamweaver实现多种浏览器兼容性,主要是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 个答案:

答案 0 :(得分:1)

您在代码中有一些错误

oBox未定义。 oBox.style.cursor="crosshair.gif";

光标最好是.cur

embed标记我认为只支持MIDI,而您在oncick中引用gunshot.mp3并尝试在src中调用\""+gunshot.mp3+"\",应该是soundfile < / p>

你有document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?

您想要支持哪些浏览器声音? Netscape,IE6,Chrome等等。