Ondersteuning » Thema en CSS/opmaak » geluid toevoegen aan mouse-over in het menu

geluid toevoegen aan mouse-over in het menu

  • MACasuba

    (@macasuba)


    12 jaren, 2 maanden geleden

    Via deze site heb ik een deel van mijn oplossing gevonden: http://css-tricks.com/play-sound-on-hover/
    Ik heb nu een kleine html opzet, waarin met mijn WordPress style.css er een geluid komt bij de mouse-over in het menu.
    Maar hoe krijg ik dat in WordPress?
    De layout (feel and look) aanpassen was in de CSS geen probleem, maar dat is niet de plaats waar het menu zal worden aangeroepen.
    De vraag is, kan het in WordPress – en hoe ?

    Hier een deel van mijn test html pagina:

    <head>
	<meta charset='UTF-8'>

	<title>Play Sound on :hover</title>

	<link rel='stylesheet' href='css/style.css'>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>

		<ul id="nav-two" class="#access">

           <a>
		   	<a href="#">Home</a>
                <audio id="beep-two">
				<source src="audio/end.mp3" ></source>
				<source src="audio/end.ogg" ></source>
				Your browser isn't invited for super fun time.
			</audio>
			</a>
		   <a><a href="#">About</a>
           		   	<audio id="beep-two" >
				<source src="audio/beep.mp3" ></source>
				<source src="audio/beep.ogg" ></source>
				Your browser isn't invited for super fun time.
			</audio>
           </a>

		</ul>

		<script>$("#nav-two a")
  .each(function(i) {
    if (i != 0) {
      $("#beep-two")
        .clone()
        .attr("id", "beep-two" + i)
        .appendTo($(this).parent());
    }
    $(this).data("beeper", i);
  })
  .mouseenter(function() {
    $("#beep-two" + $(this).data("beeper"))[0].play();
  });
$("#beep-two").attr("id", "beep-two0");</script>
</body>

  • Het onderwerp ‘geluid toevoegen aan mouse-over in het menu’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven