Random background image for div

Question

I have an ASP.NET site that shows a number of products from a database. At the moment the background image for each product is set in CSS in the productBox class. What I would like is for each product to have a random background image from a selection of 4 images. I'm thinking that using jquery would be the way forward ?

<div class="productBox">
  <div class="productouter">
      <div class="productImageContainer">
        <a id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_hlImageLink" class="productImage" href="Product-Flea-Monkey-Jacket_23.aspx"><img src="repository/product/thumbs/150x150_NB701-FLEA-MONKEY-JACKET-close-front.jpg" style="border-width:0px;" /></a>
      </div>

      <div class="productinner">
          <a id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_hlProduct" class="catalogProductName" href="Product-Flea-Monkey-Jacket_23.aspx">Flea Monkey Jacket</a>

          <span id="ctl00_ContentPlaceHolder1_catalogList_dlCatalog_ctl01_lblOurPrice" class="ourPrice">£ 96.00</span>

          </div>
  </div>
</div>

Answer 1

images = [url1, url2, url3, url4];
$('div.productImageContainer').css('background', images[random_pos]);

you can get a random_pos with some manipulation over the results returned by Math.random()

e.g.

var random_pos = Math.round(Math.random() * images.length-1);

Answer 2

I would define a css class background image, ex:

.productBoxBg {...}

add it to fist div:

<div class="productBox productBoxBgg">...</div>

Generated on the fly with product page. There You can put Your randomly selected image.

Answer 3

Heres how I did it for a project I worked on recently:

var theClasses = new Array() 

theClasses[0] = 'url(--path to 1st image--)'
theClasses[1] = 'url(--path to 2nd image--)'
theClasses[2] = 'url(--path to 3rd image--)'
theClasses[3] = 'url(--path to 4th image--)'

var p = theClasses.length;
var preBuffer = new Array()
for (i = 0; i < p; i++) {
     preBuffer[i] = new Object()
     preBuffer[i].src = theClasses[i]
}
var whichClass = Math.round(Math.random() * 3);
function setRandomClass() {
     var getDiv = document.getElementById("site-head-image");
     getDiv.style.backgroundImage = theClasses[whichClass];
}

so basically, you create an array with all the paths for your images, create a math function to set a random number between 0 - n, (n being the amount of images you have -1 due to it starting at 0 instead of 1), and then apply that random image as the background image to the div with the setRandomCLass function.

EDIT: forgot to mention to kick start the setRandomClass function on page load, the code above you can put in a javascipt script block in the head of the page.

Answer 4

I'm getting a little closer !!!

I've changed the code slightly

    <asp:DataList ID="dlCatalog" runat="server" SkinId="catalogList">
      <ItemTemplate>
          <asp:Panel ID="productPanel" runat="server" >     
             <div class="productImageContainer">
             <asp:HyperLink ID="hlImageLink" runat="server" NavigateUrl='<%# GetNavigateUrl(Eval("ProductId").ToString(), Eval("Name").ToString()) %>' SkinID="noDefaultImage" />
             </div>
             <asp:HyperLink ID="hlProduct" runat="server" NavigateUrl='<%# GetNavigateUrl(Eval("ProductId").ToString(), Eval("Name").ToString()) %>' Text='<%#Eval("Name") %>' CssClass="catalogProductName" /><br />
             <asp:Label ID="lblRetailPrice" runat="server" CssClass="retailPrice" /><asp:Label ID="lblOurPrice" runat="server" CssClass="ourPrice" /><br />
             <asp:Rating ID="ajaxRating" runat="server" SkinID="rating" ReadOnly="true" />
          </asp:Panel>
      </ItemTemplate>
    </asp:DataList>

The code behind:

foreach (DataListItem CatalogItem in dlCatalog.Items)
        {
            // Find Panel / Div Tag called productBackground within Datalist
            Panel productBackground = (Panel)CatalogItem.FindControl("productPanel");

            // Some code here to generate a random number between 0 & 3
            System.Random RandNum = new System.Random();
            int myInt = RandNum.Next(4);

            if (productBackground !=null)
            {
                switch(myInt)
                {
                    case 0:
                        productBackground.BackImageUrl = "../App_Themes/Theme/images/frame1.gif";
                        break;
                    case 1:
                        productBackground.BackImageUrl = "../App_Themes/Theme/images/frame2.gif";
                        break;
                    case 2:
                        productBackground.BackImageUrl = "../App_Themes/Theme/images/frame3.gif";
                        break;
                    case 3:
                        productBackground.BackImageUrl = "../App_Themes/Theme/images/frame4.gif";
                        break;
                }

            }
        }

Stepping through the code appears to assign a random number and selects a different case, but when the page is rendered I only get the one background image rendered.