- 締切済み
XML表示を2段階で…
今年から勉強を始めた者です。質問させてください。 ■list.xml <list> <東京> <name>太郎</name> <place>渋谷区</place> <img>tarou.jpg</img> <info>優しい</info> </東京> <東京> <name>次郎</name> <place>墨田区</place> <img>zirou.jpg</img> <info>江戸っ子</info> </東京> <大阪> <name>三郎</name> <place>岸和田市</place> <img>saburou.jpg</img> <info>怒りっぽい</info> </大阪> </list> ■htmlの表示 div A [全国][東京][大阪] div B 太郎 渋谷区 [詳細] 次郎 墨田区 [詳細] 三郎 岸和田市 [詳細] div C [写真] 性格:優しい divAにてxslを切り替え、divBに<name>と<place>を反映。 さらに反映されたdivBの[詳細]をクリックすると、対応した<img>と<info>がdivCに反映するというのを作りたいのですが…。 (上の状態は、divAにて[全国]をクリック、反映されたdivBにて「太郎」の[詳細]をクリックしたときの表示例) どうしても、div Cに反映させる方法が分かりません。 どなたか力をお貸しください。
- sampo3
- お礼率100% (2/2)
- XML
- 回答数1
- ありがとう数1
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- trfnc223
- ベストアンサー率60% (3/5)
抽象的すぎてよくわかりませんが、 AからBへの絞り込みができるのであれば、 同様にBからcへの絞り込みは同じようにできるのではないのですか? 具体的にコードをのせていただいた方が、答えやすいですが。
関連する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>
- 締切済み
- JavaScript
- jQueryで表示している所を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"); //←他ブラウザでは??
- ベストアンサー
- JavaScript
- これニセモノですか?
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>
- ベストアンサー
- JavaScript
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(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終了 -->
- 締切済み
- JavaScript
- 画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。(あまり関係ないと思う部分は省いてます) 回答の方、宜しくお願い致します。 <!-- 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終了 -->
- ベストアンサー
- JavaScript
- マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。
マップを使ってページをリンクしさらにページ内リンクにしたが飛ばない。 <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>
- ベストアンサー
- JavaScript
- <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
お礼
これはもしかしたらjavascriptの質問なんですかねぇ。 回答いただけないようで、他の所で聞いてみたいと思いますので、締め切らさせていただきます。 ありがとうございました。
補足
スイマセン。コードを書きます。 (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>