Comments on: How do I create a JavaScript that displays random image with the same ImageMap coordinates?

Comments on: How do I create a JavaScript that displays random image with the same ImageMap coordinates? http://www.findistore.com/how-do-i-create-a-javascript-that-displays-random-image-with-the-same-imagemap-coordinates We are Professional Web Designer. We specialize in Website Design & eCommerce Web Services Tue, 09 Mar 2010 15:00:20 -0800 http://wordpress.org/?v=2.8.3 hourly 1 By: richarduie http://www.findistore.com/how-do-i-create-a-javascript-that-displays-random-image-with-the-same-imagemap-coordinates/comment-page-1#comment-4388 richarduie Mon, 06 Jul 2009 12:03:10 +0000 http://www.findistore.com/how-do-i-create-a-javascript-that-displays-random-image-with-the-same-imagemap-coordinates#comment-4388 The only constraint is that all of the images must be at least as large as the coordinate definitions of your map areas. ~~~~~~~~~~~~ <html> <head> <script> // create array of string to hold names of image files var imgSrcs = [ 'img0.gif', 'img1.gif', 'img2.gif' ] // assign a randomly selected source attribute to the map function setImgSrc() { // how many images available for random selection var last = imgSrcs.length; // get a random real value on the scale [0, last] var imgIdx = Math.random() * last; // convert real to integer by truncation - ensure index // value stays in array index range, in case random()*last // produced last, i.e., random() generated 1 var imgIdx = Math.min( last - 1, Math.floor( imgIdx ) ); document.getElementById( 'mapImg' ).src = imgSrcs[ imgIdx ]; } window.onload = setImgSrc; </script> </head> <body> <img id="mapImg" src="" width="200" height="200" alt="" usemap="#yourMap" /> <map name="yourMap">  <area shape="rect" coords="0,0,100,100" href="first.html" alt="" /> <area shape="rect" coords="0,100,0,100" href="second.html" alt="" /> </map> </body> </html> The only constraint is that all of the images must be at least as large as the coordinate definitions of your map areas.
~~~~~~~~~~~~
<html>
<head>
<script>
// create array of string to hold names of image files
var imgSrcs = [
'img0.gif', 'img1.gif', 'img2.gif'
]

// assign a randomly selected source attribute to the map
function setImgSrc() {
// how many images available for random selection
var last = imgSrcs.length;
// get a random real value on the scale [0, last]
var imgIdx = Math.random() * last;
// convert real to integer by truncation – ensure index
// value stays in array index range, in case random()*last
// produced last, i.e., random() generated 1
var imgIdx = Math.min( last – 1, Math.floor( imgIdx ) );
document.getElementById( ‘mapImg’ ).src = imgSrcs[ imgIdx ];
}

window.onload = setImgSrc;
</script>
</head>
<body>
<img id="mapImg" src="" width="200" height="200" alt="" usemap="#yourMap" />
<map name="yourMap">
<!– whatever your map’s area definitions are go here –>
<area shape="rect" coords="0,0,100,100" href="first.html" alt="" />
<area shape="rect" coords="0,100,0,100" href="second.html" alt="" />
</map>
</body>
</html>

]]>