Member Avatar for Pleasant Day

Could anyone tell me what would be the code for this effect please.

I want the code for a button effect

The button is for a graphic button, on clicking it it changes its graphic to an ('on' image), plays a sound effect, then changes graphic to the first image('off' image), then it goes to a link.

Files would be

Images/offbutton.jpg
Images/onbutton.jpg
sound/buttonclick.wav

Thank you for any help given.

  • 2 Contributors
  • 5 Replies
  • 123 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A compact, reliable pattern for the effect described by (and a practical alternative to hunting through search results as suggested): prevent the link's default navigation, swap the graphic to an "on" state, play a short sound with the HTML5 Audio API, wait for the sound to finish (or use a short fallback timeout), restore the graphic, then navigate. Preload images to avoid flicker and guard against double clicks.

HTML example and plain JavaScript to implement that flow:

<a id="graphic-button" href="https://example.com/target">
  <img id="graphic-btn-img" src="off-state.png" alt="Action">
</a>

<script>
(function () {
  var link = document.getElementById('graphic-button');
  var img = document.getElementById('graphic-btn-img');
  var onSrc = 'on-state.png';
  var offSrc = 'off-state.png';
  var sound = new Audio('click-sound.mp3');
  sound.preload = 'auto';

  // Preload images
  new Image().src = onSrc;
  new Image().src = offSrc;

  var busy = false;

  link.addEventListener('click', function (e) {
    if (busy) { e.preventDefault(); return; }
    busy = true;
    e.preventDefault();
    img.src = onSrc;

    var finish = function () {
      img.src = offSrc;
      busy = false;
      window.location.href = link.href;
    };

    var p;
    try { p = sound.play(); } catch (err) { p = null; }

    if (p && typeof p.then === 'function') {
      p.then(function () {
        sound.onended = finish;
        setTimeout(function () { if (busy) finish(); }, 2000);
      }).catch(function () {
        setTimeout(finish, 150);
      });
    } else {
      sound.onended = finish;
      setTimeout(finish, 2000);
    }
  }, false);
})();
</script>

Notes and troubleshooting: prefer small MP3/OGG fallbacks rather than large WAV files for mobile compatibility; ensure server sends correct MIME types; test on target mobile browsers because autoplay policies vary (clicks are usually allowed, but playback can still be blocked). For accessibility, use a real <button> when keyboard behavior is needed and keep meaningful alt text. Limit audible feedback to avoid annoyance and always provide a fast fallback (short timeout or immediate navigation) if audio cannot play.

Recommended Answers

All 5 Replies

Member Avatar for Pleasant Day

5 pages deep in Google and not what I want it to do to be found, google does not give the answer.
Very simple things are often not to be found, people presume its common knowledge, and these things are often overlooked.

Edited by Pleasant Day because: n/a
Member Avatar for almostbob

just sick of people not making any attempt,
now post the code you have worked out for assistance

Member Avatar for Pleasant Day

I looked 5 pages in, that's 50 web sites, ranked at most viable, so the further back we go the less relevance. Often simple pieces of code are not found on the net, in the same way one cannot google on how to ride a bike, one is presumed to know. I do not, so I ask help from those willing to help. I myself do the same thing in areas I specialise in, and is part of being in and participating in a community.

Member Avatar for almostbob

'looking' is not an attempt,

this community has rules, RTFM

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.