The steps involved in randomly displaying an image from a set are very similar to those used for displaying random text strings.<\/p>\n
\r\nvar img_name = new Array(\"purple.gif\", \"red.gif\",\r\n\"blue.gif\", \"yellow.gif\", \"green.gif\", \"pink.gif\");\r\n\r\nvar l = img_name.length;\r\n\r\nvar rnd_no = Math.floor(l*Math.random());\r\n\r\ndocument.r_img.src = img_name[rnd_no];\r\n\r\n<img src=\"purple.gif\" width=\"100\" height=\"50\" \r\nname=\"r_img\" alt=\"Random image\" \/>\r\n<\/pre>\nIn the code above, we have JavaScript array containing 6 images. The array length found from length<\/strong><\/span> is, thus, 6 – img_name[0] would be “purple.gif”, img_name[1] would be “red.gif” and so on. We then use the Math.round()<\/span> to get a random number, multiply it with the array length and round it up using Math.floor()<\/span>.<\/p>\n
Note: Array are zero-indexed, so the last element in the array will the length of the array minus 1. However, since we are employing floor() to get an integer, we can use the value from ARRAY_NAME.length<\/span> directly.<\/p>\n
You can also use the id<\/span> attribute of the image tag instead of name<\/span>; as:<\/p>\n
\r\nvar img_name = new Array(\"purple.gif\", \"red.gif\",\r\n\"blue.gif\", \"yellow.gif\", \"green.gif\", \"pink.gif\");\r\n\r\nvar l = img_name.length;\r\n\r\nvar rnd_no = Math.floor(l*Math.random());\r\n\r\ndocument.getElementById(\"randomimage\").src = img_name[rnd_no];\r\n\r\n<img src=\"purple.gif\" width=\"100\" height=\"50\" \r\nid=\"randomimage\" alt=\"Random image\" \/>\r\n<\/pre>\nWhen can you display random images on a web page?<\/h2>\n
A potential use of the random image displaying code is when you want to show a single banner from a set – though I would prefer using server-side scripts like PHP or Perl for this. I have also employed the code to randomly rotate images at a designated place on the web page.<\/p>\n
\n\n
- < Back<\/a><\/li>\n
- 1<\/a><\/li>\n
- …<\/li>\n
- 10<\/a><\/li>\n
- …<\/li>\n
- 20<\/a><\/li>\n
- …<\/li>\n
- 30<\/a><\/li>\n
- …<\/li>\n
- 35<\/a><\/li>\n
- …<\/li>\n
- Next ><\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"The steps involved in randomly displaying an image from a set are very similar to those used for displaying random text strings. Initializing an array Storing the image file names in that array Finding the length of this array Using the Math.random() to generate a random number Using the randomly generated number as index for […]","protected":false},"author":1,"featured_media":15661,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-4476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/comments?post=4476"}],"version-history":[{"count":0,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/posts\/4476\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media\/15661"}],"wp:attachment":[{"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/media?parent=4476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/categories?post=4476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdevelopersnotes.com\/wp-json\/wp\/v2\/tags?post=4476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}