Search code examples
csshtmlaudiohref

Using Div tags with a href as placeholders for clickable menu elements

I have a number of divs covering a different portions of a menu on a background image on a webpage.

Within the div I hav an a href to link to another page a play a click sound

I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code 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>

The CSS for apWelcome and to fill out the area is listed below:

#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 problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.

Anyone know a workaround for this for all three browswers or a completely different method. Thank you.

Solution

  • read this article about sounds in html (cross browser). the different browsers allows differnent types of sounds files.

    also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)

    See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/