I am facing an issue with multiple divs covering different portions of a menu on a background image of a webpage.
Each div contains an anchor tag linking to another page and playing a click sound upon clicking.
To ensure the cursor changes across the entire div, I used a CSS technique. Check out the code snippet below:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
<a href= "#" class="fill-div" onclick="playSound('Sounds/click.ogg');"> </a>
</div>
Here is the CSS styling for apWelcome and filling out the area:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The challenge I'm facing is that in Firefox 24, the click behavior works fine but there's no sound. In Chrome, the sound plays but the page jumps down visually. Internet Explorer does not show the cursor or functional behavior.
If anyone has a workaround that works across all three browsers or a completely different method, please share. Thank you.