Member Avatar for Kniggles

Hi , I have a gif of a moving ball (ball.gif) that plays once on loading,

and when clicked it playsthe sound file (ping.mp3),but duz not move the ball.

1.How duz one get the ball.gif not to play on page loading ?
and
2.How can you make ball.gif play with ping.mp3 on the same onclick event ?

thanks.

  • 2 Contributors
  • 2 Replies
  • 219 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Kniggles

Dani AI

Generated

Short answer: don’t put the animated GIF in the page on load; show a static image and swap it to the GIF only when the user clicks, and play the sound via an HTML5 <audio> element. ’s idea (start with one image and replace it) is the right approach. The reason your ball moves on load is likely because the GIF was preloaded; if the browser decodes it during preload the animation will start immediately.

Example pattern to use (keeps things simple and avoids the old embed/innerHTML approach):

<img id="ball" src="ball-static.png" width="90" height="90" alt="ball">
<audio id="ping" src="ping.mp3" preload="none"></audio>
document.getElementById('ball').addEventListener('click', function () {
  var img = this;
  // force a fresh fetch so animation restarts reliably
  img.src = 'ball.gif?t=' + Date.now();
  var a = document.getElementById('ping');
  a.currentTime = 0;
  a.play().catch(function(){ /* optional fallback for autoplay restrictions */ });

  // optional: after the GIF's duration swap back to the still image
  setTimeout(function () { img.src = 'ball-static.png'; }, 800); // adjust ms to GIF length
});

Troubleshooting tips:

  • Remove any preloading of the animated GIF (that includes Dreamweaver-style MM_preloadImages or adding the GIF to an Image() that’s immediately decoded). Preloading often starts the animation.
  • Caching can prevent a restart; the query-string timestamp above forces a new request and restarts the GIF.
  • If you need precise frame control or to pause/resume the animation, consider using video, a sprite + CSS animation, or drawing frames on a canvas — GIFs can’t be paused/resumed programmatically.
  • Modern audio.play() returns a Promise; handle rejections (mobile/autoplay policies) if needed.

Reference ’s setup: remove inline embed injection and the preload that points at the animated file, then swap the src and use the <audio> approach shown above.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

You may want to start with a single image, and onclick replace it with the animated one.

Member Avatar for Kniggles

hi again pritaes ,
have got this far ,

<title>Untitled Document</title><SCRIPT>
function EvalSound(soundobj) {
  var thissound = eval ( "document." + soundobj);
 thissound.Play();
}</SCRIPT>

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('oorlo.gif')">
<SCRIPT language=javascript type=text/javascript>
 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </SCRIPT>
 <SPAN id=dummy></SPAN>
 <DIV id=soundimage>
<a href="#" onmouseout="MM_swapImgRestore()" onclick="MM_swapImage('Image1','','oorlo.gif',1)playSound(ping.mp3')"><img src="b1.png" width="90" height="90" id="Image1" /></a>
</DIV>


</body>

the ball will bounce no sound as yet, have made it with sound but no bounce :(

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.