title: Assigning a URL link from an xml document to associate with each image in xslt
body: <p>Hi guys I have another question relating to XML and XSLT. I'm Just wondering how I would I go about assigning a URL link from an xml document to associate with each image that is dynamically created. I have displayed each image by using a for-each loop, I have assigned an ID to each image as it filters through, using position() method. So is there a way of assigning the url to the id of each image?? Cant find anyway of doing it. Hope that makes sense. Cheers.</p>
  
  <p>The xslt is as follows.</p>
  
  <pre><code>  &lt;xsl:for-each select="cars/car-types"&gt;
  
    &lt;div id = "car_types"&gt;
      &lt;h5 id = "Model{position()}"&gt; &lt;xsl:value-of select="name"/&gt; &lt;/h5&gt;
  
  
   &lt;div id ="imagelist"&gt;   
   &lt;img src="{image}" id ="carType{position()}"&gt; //sets the car type with an id of "carType1" and increments.
  
    &lt;xsl:attribute name="src"&gt;
      &lt;xsl:value-of select="image"/&gt;
  
    &lt;/xsl:attribute&gt;
  &lt;/img&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  
      &lt;/xsl:for-each&gt;
  </code></pre>
  
  <p>XML is as follows, I have really simplified the xml, as it is rather long to post whole thing.</p>
  
  <pre><code>&lt;cars&gt;
      &lt;car&gt;
              &lt;name&gt;BMW&lt;/name&gt;
              &lt;image&gt;bmw.gif&lt;/image&gt;
              &lt;link&gt;http://something&lt;/link&gt;
      &lt;/car&gt;
      &lt;car&gt;
              &lt;name&gt;Ford&lt;/name&gt;
              &lt;image&gt;ford.jpg&lt;/image&gt;
              &lt;link&gt;http://something&lt;/link&gt;
      &lt;/car&gt;
  &lt;/cars&gt;
  </code></pre>
  
  <p>I have managed to output the images, the next step is to add the link to each car image. (when an image is clicked it takes you to another html page with information for that vehicle.)</p>
  
  <p>Here is the HTML output I expect</p>
  
  <pre><code> &lt;/head&gt;
      &lt;body&gt;
  
      &lt;h5 id="Model1"&gt;BMW&lt;/h5&gt;
      &lt;div id="imagelist"&gt;
      &lt;img src="http://www.bmw.com/_common/highend/templates/individual/experience/mseries/m3coupe/2007/game/image/bmw_m3_coupe_background.jpg id="carType1"&gt;
  
  &lt;a href="http://www.bmw.com/" target="_blank"&gt;&lt;/a&gt; &lt;!--This is the href link I want to add from the XML doc to each image. --&gt;
      &lt;/div&gt;
  
      &lt;h5 id="Model2"&gt;Ford&lt;/h5&gt;
      &lt;div id="imagelist"&gt;
      &lt;img src="http://http://cinemuck.com/wp-content/uploads/2013/04/ford2.jpg" id="carType2"&gt;
      &lt;a href="http://www.ford.co.uk/" target="_blank"&gt;&lt;/a&gt; 
      &lt;/div&gt;
  
      &lt;h5 id="Model3"&gt;Volvo&lt;/h5&gt;
      &lt;div id="imagelist"&gt;
      &lt;img src="http://http://www.heritage-motors.co.uk/userimages/volvo2.jpg" id="carType3"&gt;
      &lt;a href="http://www.volvo.com/" target="_blank"&gt;&lt;/a&gt; 
      &lt;/div&gt;
  
      &lt;h5 id="Model4"&gt;Jaguar&lt;/h5&gt;
      &lt;div id="imagelist"&gt;
      &lt;img src="http://http://autocarimages.com/images/Jaguar%20car%20images/1.jpg" id="carType4"&gt;
      &lt;a href="http://www.jaguar.co.uk/" target="_blank"&gt;&lt;/a&gt; 
  
      &lt;/div&gt;
  </code></pre>