Javascript 具有onclick声音效果的自定义光标_Javascript_Html

Javascript 具有onclick声音效果的自定义光标

javascript html

Javascript 具有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">

我正在尝试将光标更改为具有声音效果的自定义图像。我目前的问题是光标消失了，但替换图像没有显示，声音剪辑也没有播放。我做错了什么

<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>


#apDiv1{
位置：绝对位置；
宽度：1152px；
高度：864px；
z指数：2；
左：25px；
顶部：25px；
}
函数setCursor（）{
oBoxInner.innerText=sInput.value；
oboxiner.style.display='block'；
oBox.style.cursor=“crosshair.gif”；
}
功能播放声音（声音文件）{
document.getElementById（“gunShot”）.innerHTML=document.getElementById（“gunShot”）.innerHTML=“”；
}

谢谢你的帮助

编辑：

我将dreamweaver与PC和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>


$（文档）.ready（函数（）{
$（“#测试区域”）.mouseout（函数（）{
$（'#mycursor'）.hide（）；
返回false；
});
$（“#测试区域”）.mouseenter（函数（）{
$（'#mycursor'）.show（）；
返回false；
});
$（“#测试区域”）.mousemove（函数（e）{
$（'#mycursor'）.css（'left'，e.clientX-20）.css（'top'，e.clientY+7）；
});
});
#试验区{
高度：1152px；
宽度：864px；
边框：3个虚线#中交；
背景：#FFFFFF；
填充：20px；
光标：无；
顶部：25px；
左：25px；
z指数：1；
}
#我的光标{
光标：无；
宽度：100px；
高度：100px；
背景：url（crosshiers.cur）；
重复：不重复；
位置：绝对位置；
显示：无；
排名：0；
左：0；
z指数：10000；
}
将鼠标移到这个区域上。

代码中有一些错误

未定义oBox

oBox.style.cursor=“crosshair.gif”
光标最好是.cur

我认为embed
标记只支持MIDI，并且您在单击鼠标时引用gunshot.mp3
，并尝试调用src中的reffrence至\”“+gunshot.mp3+“\”
，应该是soundfile

您有两次document.getElementById（“枪声”）.innerHTML=document.getElementById（“枪声”）.innerHTML

您希望哪些浏览器支持声音？Netscape、IE6、Chrome。。ect
oBox

的定义来源于何处，以及您从OBOXINER和oBox测试的浏览器甚至没有定义。它是

document.getElementById（“gunShot”）.innerHTML=document.getElementById（“gunShot”）.innerHTML

？并且您正在使用

bgcolor=“#000000”

？？？停止这些，开始使用CSS。