Product Thumbnail Code

      // Thumbnail Image
      var ig = cel('img');
      var a_ig = cel('a');
      if (tmpItem.thumburl)
      {
         ig.setAttribute('src', tmpItem.thumburl);
         ig.setAttribute('alt', tmpItem.title);
         ig.style.cssText = "border:0px;height:" + tmpItem.thumbdims[0] + "px;width:" + tmpItem.thumbdims[1] + "px";
      }
      else
      {
         ig.setAttribute('src', "./images/cogs.jpg");
         ig.setAttribute('alt', "No Product Image");
         ig.style.cssText = "border:0px;height:52px;width:75px";
      }

      a_ig.style.cssText = "font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #0068B3; font-weight: bold; text-decoration:none;";
      a_ig.setAttribute('href', tmpItem.url);
      a_ig.setAttribute('target', '_blank');

Like the product title, the thumbnail’s source url is appended to an IMG element variable. The width and height of the thumbnail are also defined as attributes of the IMG element. Since we also want the image to linked, the IMG element variable, as the innermost tag, is appended to an anchor variable for the product url. In the event that no thumbnail exists for a given item, there is a conditional statement assigning a default placeholder image in the thumbnail element.

Please note:

The anchor element variable containing the image element will be appended to a table cell in another part of the code. The reason the code was written this way is because the order of precedence in which elements are appended affects the layout of the result table. Were we to append the wrong element too early, it would end up situated in different position than desired, so for clarity, I have grouped all the code relating to appending element variables to the table element at the end of the loop code.