Image d'arrière-plan aléatoire pour div

Question

J'ai un site ASP.NET qui montre un certain nombre de produits à partir d'une base de données. Actuellement, l'image d'arrière-plan de chaque produit est définie en CSS dans la classe productBox. Ce que je voudrais, c'est que chaque produit ait une image de fond aléatoire parmi une sélection de 4 images. Je pense que l'utilisation de jquery serait la voie à suivre?

<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

Je me rapproche un peu !!!

J'ai changé le code légèrement

<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> 

Le code derrière:

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; 
       } 

      } 
     } 

pas à pas dans le code semble attribuer un nombre aléatoire et sélectionne un cas différent, mais lorsque la page est rendu je reçois seulement l'image de fond rendue.

Answer 2

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

vous pouvez obtenir un random_pos avec une certaine manipulation sur les résultats retournés par Math.random()

par exemple

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

Answer 3

Je définirais une image de fond de classe css, ex:

.productBoxBg {...} 

ajouter à poing div:

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

générées à la volée avec la page du produit. Là, vous pouvez mettre votre image sélectionnée au hasard.

Answer 4

Voici comment je l'ai fait pour un projet que je travaillé récemment:

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]; 
} 

donc en gros, vous créez un tableau avec tous les chemins pour vos images, créez une fonction mathématique pour définir un nombre aléatoire entre 0 - n, (n étant la quantité d'images que vous avez -1 en raison de lui commençant à 0 au lieu de 1), puis appliquez cette image aléatoire comme image d'arrière-plan au div avec la fonction setRandomCLass.

EDIT: oublié de mentionner pour lancer la fonction setRandomClass de la charge de page, le code ci-dessus, vous pouvez mettre dans un bloc de script javascipt dans la tête de la page.