Generate a random color in RGB using Javascript
function randomColor() { var chars = "0123456789abcdef"; var color = "#"; for (var i=0; i<6; i++) { var rnd = Math.floor(16 * Math.random()); color += chars.charAt(rnd); } return color; }
Show loading progress percentage of progress bar in Javascript
<script language="JavaScript" type="text/JavaScript"> function showprogress() { if (document.images.length == 0) { return false; } var loaded = 0; for (var i=0; i<document.images.length; i++) { if (document.images[i].complete) { loaded++; } } var percentage = Math.round( 100 * loaded / document.images.length); document.getElementById("progress").innerHTML = percentage + "% loaded"; if (percentage == 100) { window.clearInterval(ID); } } var ID = window.setInterval("showprogress();", 500); </script> <p name="progress">0% loaded</p>
A progress bar animated in Javascript
<script language="JavaScript" type="text/JavaScript"> function progress() { if (document.images["bar"].width < 200) { document.images["bar"].width += 5; document.images["bar"].height = 5; } else { clearInterval(ID); } } var ID; window.onload = function() { ID = setInterval("progress();", 500); } </script> <img src="black.gif" name="bar" />
The black.gif can be a 1×1 black pixel.
Animation images using Javascript
<script language="JavaScript" type="text/JavaScript"> var urls; function animate(pos) { pos %= urls.length; document.images["animation"].src = urls[pos]; window.setTimeout("animate(" + (pos + 1) + ");", 500); } window.onload = function() { urls = new Array( "0.png", "1.png", "2.png", "3.png", "4.png", "5.png", "6.png"); animate(0); } </script> <img src="0.png" name="animation" />
Preloading multiple images in Javascript
<script language="JavaScript" type="text/JavaScript"> function preloadImages(urls) { var img = new Array(); for (var i=0; i<urls.length; i++) { img[img.length] = new Image(); img[img.length - 1].src = urls[i]; } } window.onload = function() { var img = new Array( "active.gif", "inactive.gif", "other.gif"); preloadImages(img); } </script>
Preload images using Javascript
<script language="JavaScript" type="text/JavaScript"> function preloadImage(url) { var i = new Image(); i.src = url; } </script> <body onload="preloadImage('active.gif');"> </body>
Change images on mouse over and mouse out in Javascript
<script language="JavaScript" type="text/JavaScript"> function changeImage(name, url) { if (document.images[name]) { document.images[name].src = url; } } </script> <img name="myImage" src="inactive.gif" onmouseover="changeImage('myImage', 'active.gif');" onmouseout="changeImage('myImage', 'inactive.gif');" />
Create mouse sensitive buttons in Javascript
<img src="inactive.gif" onmouseover="this.src='active.gif';" onmouseover="this.src='inactive.gif';" />
