• ベストアンサー

XML画像データををHTMLで簡単に表示する方法

下記のXML画像データををHTMLで簡単に表示する方法をご教授下さい。 <?xml version="1.0"?> <photos> <photo url="http://www.kahokanko.com/demo/10.jpg"/> <photo url="http://www.kahokanko.com/demo/19.jpg"/> <photo url="http://www.kahokanko.com/demo/31.jpg"/> </photos>

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

HTMLと同様にスタイルシートで指定します。XMLですから、XSLTスタイルシートでHTMLに変換して、デザインはCSSに分担させても良いでしょう。 ★タブは全角スペースに置換してあるので、タブに戻すこと。 <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <photos>  <photo url="http://www.kahokanko.com/demo/10.jpg"/>  <photo url="http://www.kahokanko.com/demo/19.jpg"/>  <photo url="http://www.kahokanko.com/demo/31.jpg"/> </photos> とします。 [style.xsl] <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:template match="/">  <html>   <head>    <title>サンプル</title>    <link rel="styleSheet" type="text/css" href="./xx.css" />   </head>   <body>    <h1>画像を表示してみよう</h1>    <div>     <xsl:apply-templates />    </div>   </body>   </html>  </xsl:template>  <xsl:template match="photo">   <p class="album">    <img>     <xsl:attribute name="src">      <xsl:value-of select="@url" />     </xsl:attribute>    </img>   </p>  </xsl:template> </xsl:stylesheet> [xx.css] @charset "UTF-8"; html,body{margin:0;padding:0;} p.album img{display:block;float:left;width:360px;height:auto;margin:10px;}

murakami5656
質問者

お礼

解りやすい回答ありがとうございました。

関連するQ&A

  • xml画像データを表示するphp

    xml画像データを表示するphp下記で構文エラー....解りません ご教授宜しくお願い致します。 IMAGE.XML <?xml version="1.0"?> <photos> <photo url="http://www.kahokanko.com/menu/1.jpg"/> <photo url="http://www.kahokanko.com/menu/13.jpg"/> <photo url="http://www.kahokanko.com/menu/8.jpg"/> </photos> IMAGE.PHP <?php $xml = simplexml_load_file($req) foreach($req->photos->photo as $value){ printf('<img src="%s"><br>', $value->photo->URL); }

    • 締切済み
    • PHP
  • XSL変換したが画像が表示できません

    下記のXMLの画像データを表示するためXSL変換したが画像が表示できません ちなみに同drに設置しています。  PHOT.XML <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> <photos>  <photo url="http://www.kahokanko.com/demo/10.jpg"/>  <photo url="http://www.kahokanko.com/demo/19.jpg"/>  <photo url="http://www.kahokanko.com/demo/31.jpg"/> </photos> STYLE.XSL <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:template match="/">  <html>   <head>    <title>サンプル</title>    <link rel="styleSheet" type="text/css" href="./xx.css" />   </head>   <body>    <h1>画像を表示</h1>    <div>     <xsl:apply-templates />    </div>   </body>   </html>  </xsl:template>  <xsl:template match="photo">   <p class="album">    <img>     <xsl:attribute name="src">      <xsl:value-of select="@url" />     </xsl:attribute>    </img>   </p>  </xsl:template> </xsl:stylesheet>

  • xmlにファイル出力

    サーバー内dirにある画像ファイルを自動取得してxmlに出力しています。ソース下記。 <?php $doc = new domDocument('1.0'); $doc->formatOutput = true; $root = $doc->createElement('item'); $root = $doc->appendChild($root); $files = glob( '*.jpg'); foreach ($files as $file) { $img = $root->appendChild($doc->createElement('image')); $img->appendChild( $doc->createtextNode($file)); } $doc->save("123.xml"); ?> 実行結果↓↓↓↓ <?xml version="1.0"?> <item> <image>37.jpg</image> <image>43.jpg</image> <image>45.jpg</image> </item> 上記の実行結果を下記の様にしたいのですが?    ↓↓↓↓ <photo url="http://demo/photos/37.jpg" /> <photo url="http://demo/photos/43.jpg" /> <photo url="http://demo/photos/45.jpg" /> よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • HTML CSSについて

    HTML初心者です。 フォトアルバムを作りたいと思い 挑戦しているのですが なかなか上手くいかないので質問させてもらいます。 サムネイル作成にあたって a#thumbnail {background:url(photo1.jpg);} a#thumbnail {background:url(photo2.jpg);} a#thumbnail {background:url(photo3.jpg);} という記述のphoto○.jpgの画像のサイズをこの記述のなかで指定したいのですが なにか良い方法はあるでしょうか? よろしくおねがいします。

    • ベストアンサー
    • HTML
  • XMLでデータとして画像を指定する方法

    XMLでデータとして画像(例えばJPG)を指定する方法ってどんな方法があるのでしょうか?

    • 締切済み
    • XML
  • XML読み込みのテキストが表示されません

    FLASHで簡単な写真のスライドショーを作っています。 いろいろな例を参考に下記の段階まで作業を進めましたが、イメージは表示されたものの、どうしてもXMLからのテキストが読み込めず困っています。いろいろと調べてはみましたが、初心者ゆえ一人では解決できそうにありません。どなたか目を通して間違いを指摘していただけませんでしょうか?よろしくお願いします。 XMLファイルの記述: <?xml version="1.0" encoding="UTF-8"?> <Slides> <slideNode jpegURL="photos/photo1.jpg">#1 ABCDE</slideNode> <slideNode jpegURL="photos/photo2.jpg">#2 ABCDE</slideNode> <slideNode jpegURL="photos/photo3.jpg">#3 ABCDE</slideNode> </Slides> </xml> ActionScriptの記述: myXML.load("path_to_xml/data.xml"); var slides_xml = new XML(); slides_xml.load("slides.xml"); slides_xml.ignoreWhite = true; slides_xml.onLoad = startSlideShow; function startSlideShow(success) { if (success == true) { rootNode = slides_xml.firstChild; totalSlides = rootNode.childNodes.length; firstSlideNode = rootNode.firstChild; currentSlideNode = firstSlideNode; currentIndex = 1; updateSlide(firstSlideNode); } } function updateSlide(newSlideNode) { imagePath = newSlideNode.attributes.jpegURL; slideText = newSlideNode.firstChild.nodeValue; loadMovie(imagePath, targetClip); }

  • xmlでswfを読み込むには?

    flashでスライドショーを作っています。 同じフォルダにxmlファイルを作って指定した写真を取り込むようにしています。 そしてその写真のタイトルもフラッシュ内に表示されるところまで作りました。 xmlは以下のようなものです。 <?xml version="1.0" encoding="utf-8"?> <Photo> <picture image="photo01.jpg">タイトル01</picture> <picture image="photo02.jpg">タイトル02</picture> </Photo> そこで、画像とタイトルを読み込むだけでなく、 タイトルごとに別のswfファイル(ボタンを含んだswfファイル)も読みこむようにしたいのですが、 どのようにしたら良いでしょうか? わかる方いらっしゃいましたら、どうぞよろしくお願いします。

  • スクリプトでHTML上に書き出された画像を、SWFに読み込ませたい

    PHPなどのスクリプトによってHTML上に書き出された画像URLを、SWFに読み込ませて表示させたいのですがどのようにしたらよいでしょうか。 たとえば物件紹介などのサイトで、データベースに1つの物件に対して複数の画像を登録し、登録(アップロード)された画像URLをフラッシュでアルバムのように表示させたいのです。 PHPスクリプトによってHTML上に画像を書き出すことはできるのですが、それをSWFに読み込ませるにはどうしたらいいのかわかりません。 XMLに画像URLを登録していって、そのXMLをSWFに読み込んで表示、というのではなく、HTML上に書き出されたURLを読み込ませたいです。 アルバムはこちらを参考に作成しています。 http://hfm-kenchan.com/Lesson/log_qa/D0610061.htm ※スクリプトで書き出される画像ファイル名は一定の規則をもっていないため、連番で表示というのができません。 説明下手なもので分かり辛くてすみません。 どなたかご教授いただけないでしょうか。 よろしくおねがいいたします。 ■環境 ・Windows XP ・Flash8 ・ActionScript2.0

    • ベストアンサー
    • Flash
  • 連続でランダムに画像を表示させたい

    フェードで画像が切り替わるjQueryを使って画像を表示させています。 出てくる順番をランダムにしたいと思い、phpを記述しましたが、1枚目だけしか表示してくれません。 デモサイトがこちらです。 http://ijs.uh-oh.jp/demo/ ちなみにphpは、以下のように記述しました。 <figure id="fadein">  <?php $image=array( "image/photo01.jpg", "image/photo02.jpg", "image/photo03.jpg", "image/photo04.jpg", "image/photo05.jpg", ); $image = $image[rand(0, count($image)-1)]; echo '<img src=" '.$image.' " alt="">'; ?> </figure> 1枚だけでなく、ランダムで連続して表示させる方法をご教授ください。 phpは超初心者で自分なりに調べてみましたが、ギブアップしました(>_<)

    • ベストアンサー
    • PHP
  • tumblrのxmlをsimplexml_load_fileで取得して参照するには

    よろしくお願いします。 tumblrというサイトのxmlを phpのsimplexml_load_fileを使って取得したいのですが 1) $xml->posts->post->photo-url[0]; とするとphoto-urlの値にアクセスできず 下記のように記述すると値を取得できます。 2) $pu=$xml->posts->post->{"photo-url"}[0]; なぜ1の方法でアクセス出来ないのでしょうか? ■xml <?xml version="1.0" encoding="UTF-8"?> <tumblr version="1.0"> <tumblelog></tumblelog> <posts start="0" total="10"> <post> <photo-caption></photo-caption> <photo-link-url></photo-link-url> <photo-url max-width="1280"></photo-url> <photo-url max-width="500"></photo-url> <photo-url max-width="400"></photo-url> <photo-url max-width="250"></photo-url> <photo-url max-width="100"></photo-url> <photo-url max-width="75"></photo-url> </post> </posts> </tumblr> ■php $xml=simplexml_load_file("http://example.tumblr.com/api/read"); $pu=$xml->posts->post->{"photo-url"}[0]; print "<img src=\"".$pu."\">";

    • ベストアンサー
    • XML

専門家に質問してみよう