• 締切済み

ＸＭＬ表示を２段階で…

trfnc223の回答

  • trfnc223
  • ベストアンサー率60% (3/5)
回答No.1

抽象的すぎてよくわかりませんが、 AからBへの絞り込みができるのであれば、 同様にBからcへの絞り込みは同じようにできるのではないのですか？ 具体的にコードをのせていただいた方が、答えやすいですが。

sampo3
質問者

お礼

これはもしかしたらjavascriptの質問なんですかねぇ。 回答いただけないようで、他の所で聞いてみたいと思いますので、締め切らさせていただきます。 ありがとうございました。

sampo3
質問者

補足

スイマセン。コードを書きます。 （1段階のみのコードです） INPUTを押して、どうにかしようと思っていたんですが、何か根本的に間違えているような気もしています。 ■js.xml function tramsformlists(xmlFile, xslFile, resultNodeID){ var xml, xslt, newDoc; if(document.all){ xml = new ActiveXObject("Microsoft.XMLDOM"); xslt = new ActiveXObject("Microsoft.XMLDOM"); } else { xml = document.implementation.createDocument("", "", null); xslt = document.implementation.createDocument("", "", null); } xml.async = false; xslt.async = false; xml.load(xmlFile); xslt.load(xslFile); if(document.all){ document.getElementById(resultNodeID).innerHTML = xml.transformNode(xslt); } else { var xsltp = new XSLTProcessor(); xsltp.importStylesheet(xslt); newDoc = xsltp.transformToFragment(xml, window.document); document.getElementById('ShowXML').innerHTML = ""; document.getElementById('ShowXML').appendChild(newDoc); } } ■zenkoku.xsl <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="list"> <xsl:apply-templates select="東京"/> <xsl:apply-templates select="大阪"/> </xsl:template> <xsl:template match="東京"> <div> <xsl:value-of select="name"/> <xsl:value-of select="day"/> <xsl:value-of select="place"/> <INPUT type="button" value="詳細"/> </div> </xsl:template> <xsl:template match="大阪"> <div> <xsl:value-of select="name"/> <xsl:value-of select="day"/> <xsl:value-of select="place"/> <INPUT type="button" value="詳細"/> </div> </xsl:template> </xsl:stylesheet> ■tokyo.xsl <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="list"> <xsl:apply-templates select="東京"/> </xsl:template> <xsl:template match="東京"> <div> <xsl:value-of select="name"/> <xsl:value-of select="day"/> <xsl:value-of select="place"/> <INPUT type="button" value="詳細"/> </div> </xsl:template> </xsl:stylesheet> ■osaka.xsl <?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="list"> <xsl:apply-templates select="大阪"/> </xsl:template> <xsl:template match="大阪"> <div> <xsl:value-of select="./name"/> <xsl:value-of select="./day"/> <xsl:value-of select="./place"/> <INPUT type="button" value="詳細"/> </div> </xsl:template> </xsl:stylesheet> ■list.html <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="js.js"></script> <title>リスト</title> </head> <body onload="tramsformlists('list.xml', 'zenkoku.xsl', 'ShowXML')"> <div> <span onclick="tramsformlists('list.xml', 'zenkoku.xsl', 'ShowXML')">全国</span> <span onclick="tramsformlists('list.xml', 'tokyo.xsl', 'ShowXML')">東京</span> <span onclick="tramsformlists('list.xml', 'osaka.xsl', 'ShowXML')">大阪</span> </div> <div id="ShowXML"></div> <div>詳細をクリックしたら対応したimgとinfoをこのdiv領域に表示したい</div> </body> </html>

この回答がついた質問に戻る
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. XML

関連するQ&A

  • img画像表示を短くしたい

    lemmon-slider-0.2 　win8.1 pro 下記　img　45個　記述しています。表示が長いので、短くしたい。500個の場合もあります。 ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細　IE11 F12開発者ツール　参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>

  • ｊQueryで表示している所をsubmit無しに置換したい

    jquery1.2.26を使ってます。 イメージタグ出力場所 <div id="img1"></div> Javascript置換 $("#img1").replaceWith("[src='images/aaaa.jpg']"); このようにjQueryのAPIで <img src="aaa.jpg">　→　<img src="bbb.jpg"> のようにしたいのですが、どのようにしたら置換してくれるのでしょうか？ hiddenの場合は簡単なんですけど、表示されているものを置換するのがなかなか・・。 もっと簡単に記述できませんでしょうか？ <input type="hidden" name="dmyflg" id="dmyflg" /> $("#dmyflg").val("1"); <span id="npg"></span> $("#npg").text("ppp"); //←他ブラウザでは？？

  • これニセモノですか？

    ZIPPOライターですが、これは、ニセモノですよて、指摘されたんですけど 本当にニセモノなのか知りたいんです。 当方、目利きできないので、詳しい方、何かアドバイスをお願い出来たらありがたいです。 宜しくお願いします。 画像は、こちらで <div align="left"><div align="center"><table width="600" border="0" cellspacing="0" cellpadding="0"> <tr><td><div align="center"><font size="1" color="#ffffff">xaygmx</font></div></td></tr></table></div> <div align="center"> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/nqvjkicy0ps83.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/0spnkfqvblwic.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/v7yr3cnzelapg.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/bp2gicy7kjxad.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/weqa6ouv8l1th.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/0abhsifwoxum3.jpg"></p><p>　</p> <p><img src="http://61.photoup-f.info/up/0102473090/20150907-b6yde5kgxuj/v9b5hz4lwyni0.jpg"></p><p>　</p> </div> <p><div align="center"><table width="600" border="0" cellspacing="0" cellpadding="0"><tr><td><div align="center"><font size="2" color="#999999">・・・ 上記の画像は</font><a href="http://photo-up.jp"> <font size="2" color="#777777"><u>フォトアップ</u></font></a><font size="2" color="#999999">で掲載しました ・・・ </font></div></td></tr><tr height="30"><td height="30">　</td></tr></table></div></div>

  • jQueryでXMLを操作

    jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>

  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードインについて・・・。

    以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。

    マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。 <img src="images/aaa.jpg" usemap="#map"　/> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> </map> kan.html <div align="center" id="3"><img src="images/bar_3.jpg"></div> 以上のようにマップを使ってリンクページの更にページ内リンク先に飛ばそうとしても そのページに飛ぶだけで、飛ばしたい位置まで行きません。 <a name="3"><img src="images/bar_3.jpg"></a> でもダメです。 どうしてでしょうか？

    • ベストアンサー
    • HTML
  • マウスオーバーで画像の入れ替え

    以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>

  • <div>この余白は・・・

    <div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> 　<div class="title"> 　　<img src="img/title.jpg" width="700" height="75" border="0"> 　</div> 　<div class="main"> 　　<img src="img/main.jpg" width="700" height="375" border="0"> 　</div> 　<div class="menu"> 　　<img src="img/home_a.jpg" width="100" height="35" border="0"> 　　<img src="img/first.jpg" width="100" height="35" border="0"> 　　<img src="img/info.jpg" width="100" height="35" border="0"> 　　<img src="img/order.jpg" width="100" height="35" border="0"> 　　<img src="img/support.jpg" width="100" height="35" border="0"> 　　<img src="img/link.jpg" width="100" height="35" border="0"> 　　<img src="img/question.jpg" width="100" height="35" border="0"> 　</div> 　<div class="area"> 　　<div class="box"> 　　　<h5>AAAAAAAAA</h5> 　　　<img src="img/kari.gif" width="250" height="100" border="0"> 　　</div> 　　<div class="box2"> 　　　<h5>BBBBBBBBB</h5> 　　　<img src="img/kari2.gif" width="250" height="100" border="0"> 　　</div> 　</div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } 　どなたか知恵をお貸しください。よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する