从xml文档中分配URL链接以与xslt中的每个图像相关联

时间:2013-09-05 16:47:32

标签: xml xslt transformation

大家好我还有一个与XML和XSLT有关的问题。我只是想知道如何从xml文档中分配URL链接以与动态创建的每个图像相关联。我已经使用for-each循环显示每个图像,我使用position()方法在每个图像过滤时为每个图像分配了一个ID。那么有没有办法将url分配给每个图像的id?无论如何都无法找到它。希望有道理。欢呼声。

xslt如下。

  <xsl:for-each select="cars/car-types">

  <div id = "car_types">
    <h5 id = "Model{position()}"> <xsl:value-of select="name"/> </h5>


 <div id ="imagelist">   
 <img src="{image}" id ="carType{position()}"> //sets the car type with an id of "carType1" and increments.

  <xsl:attribute name="src">
    <xsl:value-of select="image"/>

  </xsl:attribute>
</img>
 </div>
 </div>

    </xsl:for-each>

XML如下,我已经真正简化了xml,因为发布整个内容的时间相当长。

<cars>
    <car>
            <name>BMW</name>
            <image>bmw.gif</image>
            <link>http://something</link>
    </car>
    <car>
            <name>Ford</name>
            <image>ford.jpg</image>
            <link>http://something</link>
    </car>
</cars>

我已设法输出图像,下一步是添加每个汽车图像的链接。 (当单击图像时,它会将您带到另一个包含该车辆信息的html页面。)

这是我期望的HTML输出

 </head>
    <body>

    <h5 id="Model1">BMW</h5>
    <div id="imagelist">
    <img src="http://www.bmw.com/_common/highend/templates/individual/experience/mseries/m3coupe/2007/game/image/bmw_m3_coupe_background.jpg id="carType1">

<a href="http://www.bmw.com/" target="_blank"></a> <!--This is the href link I want to add from the XML doc to each image. -->
    </div>

    <h5 id="Model2">Ford</h5>
    <div id="imagelist">
    <img src="http://http://cinemuck.com/wp-content/uploads/2013/04/ford2.jpg" id="carType2">
    <a href="http://www.ford.co.uk/" target="_blank"></a> 
    </div>

    <h5 id="Model3">Volvo</h5>
    <div id="imagelist">
    <img src="http://http://www.heritage-motors.co.uk/userimages/volvo2.jpg" id="carType3">
    <a href="http://www.volvo.com/" target="_blank"></a> 
    </div>

    <h5 id="Model4">Jaguar</h5>
    <div id="imagelist">
    <img src="http://http://autocarimages.com/images/Jaguar%20car%20images/1.jpg" id="carType4">
    <a href="http://www.jaguar.co.uk/" target="_blank"></a> 

    </div>

1 个答案:

答案 0 :(得分:0)

如果您为每个汽车图片添加链接,则只需为 img 标记添加 标记,然后构建 href 属性为此以类似的方式

试试这个XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="xml" indent="yes"/>
   <xsl:template match="/">
      <xsl:for-each select="cars/car">
         <div id="car_types">
            <h5 id="Model{position()}">
               <xsl:value-of select="name"/>
            </h5>
            <div id="imagelist">
               <img src="{image}" id="carType{position()}"/>
               <a href="{link}" target="_blank">Click here</a>
            </div>
         </div>
      </xsl:for-each>
   </xsl:template>
</xsl:stylesheet>

注意,当您使用属性值模板为 img 构建 src 元素时,XSLT中不需要额外的<xsl:attribute name="src">