Last updated on February 17th, 2022 at 04:49 pm
Javascript random image display with preference option, Display images or banners while controlling how often they appear. Great for showing preferred banner over others!
How to modify preference of the image?
Inside the script there is section that define each banner and it is in this format
new banner("imageURL","mainURL","Description","PREFERENCE")
imageURL is the URL of the Image to be displayed
mainURL is the hyperlink that you would like to add when someone clicks on the image
Description is the details of the banner or image
PREFERENCE is the probability that you would like to display the banner (out of 100)
In this script I have defined 3 images, in that given the probability and other details. You can add any number of banners. As you can see they are defined in array.
banners[0] = new banner("https://mistonline.in/jquery/image2.jpg",
"https://mistonline.in/wp/php target='_blank'",
"PHP tutorials",
30);
banners[1] = new banner("https://mistonline.in/jquery/image3.jpg",
"https://mistonline.in/wp/jquery target='_blank'",
"Description Here",
35);
banners[2] = new banner("https://mistonline.in/jquery/image6.jpg",
"https://mistonline.in/wp/javascript target='_blank'",
"Description Here",
35);
You can modify the image width height etc., by changing respective values in this line of the code
document.write("<A HREF=" + banners[i].url + "><img SRC='" + banners[i].imgSource + "' WIDTH=600 HEIGHT=120 BORDER=0 ALT='" + banners[i].alt + "'/>");
Above are the main section that you need to modify, here is the complete javascript section. Add it within the head tag
<script languagge="JavaScript">
function banner(imgSource,url,alt,chance) {
this.imgSource = imgSource;
this.url = url;
this.alt = alt;
this.chance = chance;
}
function dispBanner() {
with (this) document.write("<A HREF=" + url + "><img SRC='" + imgSource + "' WIDTH=468 HEIGHT=60 BORDER=0 ALT='" + alt + "'/>");
}
banner.prototype.dispBanner = dispBanner;
banners = new Array();
//change the preference here. i have given the first one with high preference.
//usage
//new banner("imageURL","mainURL","Description","PREFERENCE")
banners[0] = new banner("https://mistonline.in/jquery/image2.jpg",
"https://mistonline.in/wp/php target='_blank'",
"PHP tutorials",
30);
banners[1] = new banner("https://mistonline.in/jquery/image3.jpg",
"https://mistonline.in/wp/jquery target='_blank'",
"Description Here",
35);
banners[2] = new banner("https://mistonline.in/jquery/image6.jpg",
"https://mistonline.in/wp/javascript target='_blank'",
"Description Here",
35);
sum_of_all_chances = 0;
for (i = 0; i < banners.length; i++) {
sum_of_all_chances += banners[i].chance;
}
function randomBanner() {
chance_limit = 0;
randomly_selected_chance = Math.round((sum_of_all_chances - 1) * Math.random()) + 1;
for (i = 0; i < banners.length; i++) {
chance_limit += banners[i].chance;
if (randomly_selected_chance <= chance_limit) {
document.write("<A HREF=" + banners[i].url + "><img SRC='" + banners[i].imgSource + "' WIDTH=600 HEIGHT=120 BORDER=0 ALT='" + banners[i].alt + "'/>");
return banners[i];
break;
}
}
}
</script>
Now add the below script to inside the body tag. The images or banners can be displayed inside id “banner“
<body>
<center><div id="banner"></div>
</center>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
this_banner = randomBanner();
document.getElementById("banner").innerHTML="This banner had a " + (this_banner.chance / sum_of_all_chances) * 100 + "% chance of being displayed"
</script>
</body>
admin