0

こんにちは皆さん、XML と XSLT に関する別の質問があります。xml ドキュメントから URL リンクを割り当てて、動的に作成された各画像に関連付けるにはどうすればよいのでしょうか。for-each ループを使用して各画像を表示しました。position() メソッドを使用して、各画像に ID を割り当てました。各画像のIDにURLを割り当てる方法はありますか?? とにかくそれを行うことを見つけることができません。それが理にかなっていることを願っています。乾杯。

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

1 に答える 1

1

各車の画像へのリンクを追加する場合は、imgタグにaタグを追加するだけで、同様の方法でそのための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要素を<xsl:attribute name="src">すでに構築している場合、XSLT に余分な要素は必要ないことに注意してください。

于 2013-09-05T21:46:10.933 に答える