Home » Uncategorized » Add Dynamic Image Example in HTML

Add Dynamic Image Example in HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
body { font: 14px/1.3 verdana, arial, helvetica, sans-serif; }
h1 { font-size:1.3em; }
h2 { font-size:1.2em; }
a:link { color:#33c; }
a:visited { color:#339; }
p { max-width: 60em; }

/* so linked image won't have border */
a img { border:none; }
</style>
<script type="text/javascript">
// place your images in this array
var random_images_array = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpeg', '13.jpg', '14.jpeg', '16.jpg', '18.jpg', '19.jpg', '20.jpeg', '21.jpeg', '22.jpg', '23.jpg', '25.jpg', '28.jpg', '29.png', '30.jpg', '31.jpg', '32.jpg', '33.jpg', '34.jpg', '35.jpg', '36.jpg', '37.jpg', '38.jpg', '39.jpg', '40.png', '41.jpg', '42.jpg', '43.jpg', '44.jpg', '45.jpg', '46.jpg', '47.jpg', '48.png', '49.png', '50.jpg'];
   
function getRandomImage(imgAr, path) {
    path = path || '/fconn/ganeshimages/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>
</head>
<body>

<h1 style="text-align:center;font-family:Comic Sans MS, cursive, sans-serif;">Green Ecosystem wishes you a very Happy "Ganesh Chaturthi" Ganpati Bappa Morya !</h1>

<div>
    <!-- This script segment displays an image from the array -->
    <script type="text/javascript">getRandomImage(random_images_array, '/fconn/ganeshimages/')</script>
</div>

<p>&nbsp;</p>

</body>
</html>

Subscribe our Rurban Life YouTube Channel.. "Rural Life, Urban LifeStyle"

Leave a Comment