title: Replacing the slide image with another image in a slideshow(Jquery Cycle) using Javascript
body: <p>I have 10 images that are displayed as a slideshow using the Jquery Cycle plugin. 
  At a time 4 images are displayed . When the user clicks the next button the next 4 images are displayed.</p>
  
  <p>Under each image there is a dropdown. When I select an item in the dropdown I want to change the image to some other image depending on the item the user has selected in the dropdowm.</p>
  
  <p>I also need to change the 'href' of the image when the user selects another item in the dropdown.</p>
  
  <p>When the user selects an item in the dropdown I using the javascript code   given below to change the image and other details</p>
  
  <p>Javascript Code</p>
  
  <pre><code>document.getElementById('prodLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
  
              document.getElementById('prodImageLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
              document.getElementById('prodImage' + productId).src = "ProductImages/" + productImage;
              document.getElementById('prodImage' + productId).className=document.getElementById('prodImage' + productId).className;
              document.getElementById('prodNameLink' + productId).href = "productDetails.aspx?id=" + productAttributeValueId;
              document.getElementById('productPrice' + productId).innerHTML = productPrice;
              document.getElementById('prodAttribute' + productId).innerHTML = attributeValue;
  </code></pre>
  
  <p><strong>The HTML Code</strong></p>
  
  <pre><code>&lt;div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0"
    data-cycle-slides="&amp;gt; ul" data-cycle-prev="div.pagers a.latest_prev" data-cycle-next=
    "div.pagers a.latest_nxt"&gt;
      &lt;ul class="product_show"&gt;
        &lt;li class="column"&gt;
          &lt;div class="img"&gt;
            &lt;div class="hover_over"&gt;
              &lt;a class="link" href="#"&gt;link&lt;/a&gt; &lt;a class="cart" href="#"&gt;cart&lt;/a&gt;
            &lt;/div&gt;&lt;a href="#"&gt;&lt;img src="images/photos/4c_pic8.jpg" width="218" height="207"
            alt="" /&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;a href="#" style="line-height:14px;"&gt;Product 1,&lt;br /&gt;
          1 Kg Pouch&lt;br /&gt;&lt;/a&gt; &lt;span class="ourPrice"&gt;Our Price: $121.20&lt;/span&gt;&lt;span class=
          "saveText"&gt;&lt;br /&gt;&lt;/span&gt;
  
          &lt;div class="dropdowndiv"&gt;
            &lt;select name="search_category1" class="default" tabindex="1" style=
            "color: #333333;"&gt;
              &lt;option value=""&gt;
                Pack size
              &lt;/option&gt;
  
              &lt;option value="amazed"&gt;
                Amazed
              &lt;/option&gt;
  
  
            &lt;/select&gt;
          &lt;/div&gt;&lt;br /&gt;
          &lt;br /&gt;
          &lt;label for="textfield"&gt;Qty&lt;/label&gt; &lt;input type="text" name="textfield" id=
          "textfield" class="carttextbox" /&gt; &amp;nbsp; &lt;img src="images/img/but_addtocart.png"
          alt="" width="72" height="16" align="absmiddle" /&gt;&lt;br /&gt;
          &lt;br /&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>