[ ホームページ ] [ 携帯用URL ]
質問掲示板 「喫茶イヌでも」
イヌでもわかるJavaScript講座
質問掲示板 「喫茶 イヌでも」

[ EZBBS.NET | 新規作成 | ランキング | オプション ]
iモード&(絵文字)、au対応!ケータイからも返信できる無料掲示板!
名前
 E-mail 
題名
内容
投稿KEY    改行有効 等幅フォント
URL
 



1438.1クリックで2アクションできるでしょうか  
名前:H    日付:2016/04/21(木) 15:38
こんにちは。お世話になります。
現在、htmlだけでは1クリックで2アクションできないので、index.html にある複数ある画像をどれでもクリックすると、下位フォルダのindex.html が開き、さらにその中から目的の画像をクリックするとその説明画面がiframe内に表示されるようにしています。

できれば、親 index.html の画像をクリックすることで、下位フォルダのindex.htmlのiframeにまで反映させたいのですが、可能でしょうか。

javascript を使えばうまく行くような気がするのですが、全くの初心者で、onClick とか function とか 変数とかなんとか頑張ってみようと思ったのですが・・・

イメージ的には、親 index.html 内の
<a href="under/index.html" target="_top"><img src="under/photo/abc.jpg" height="50" border="0" width="50"></a>
<a href="under/index.html" target="_top"><img src="under/photo/def.jpg" height="50" border="0" width="50"></a>
<a href="under/index.html" target="_top"><img src="under/photo/hij.jpg" height="50" border="0" width="50"></a>
から、abc.jpg をクリックすると、ダイレクトにabc.htmlが開くのではなく、一旦under/index.html が開きます。
under/index.html 内は、

<div id="left">
<ul>
<li><a href="abc.html" target="photo">ABC</a>
<li><a href="def.html" target="photo">DEF</a>
<li><a href="ghi.html" target="photo">GHI</a>
</ul>
</div>
<div id="right">
<iframe src="blank.html" width="650" height="700" name="photo" noborder scrolling="no" frameborder="no"></iframe>
</div>
となっていて、blank.html が左のリンクをクリックすることでそれぞれabc.html, def.html, ghi.html が photo area に表示されます。

親 index.html でどの画像を選んでも、under/index.html が開くので、できればダイレクトに under/index.html 下で iframe に abc.html などが引き込まれた形で表示させたいのですが。

説明がうまくできたかどうかわかりませんが、ご教示頂ければ幸いです。
よろしくお願いします。



1439.Re: 1クリックで2アクションできるでしょうか
名前:自信ないけどこんなかんじ?    日付:2016/04/28(木) 21:46
「リンク先に値を渡す」で検索するとURLにパラメータをつけて渡すことでできそう。

親index.htmlのリンクにはunder/index.htmlの後に ? そしてiframeタグに表示させたいsrcの値を続けて書き足して
<a href="under/index.html?abc.html" target="top"><img src="under/photo/abc.jpg" height="50" border="0" with="50"></a>

下位フォルダのindex.htmlのbodyタグに(多分iframeタグの後に書いた方が望ましいと思うから</body>の直前あたりに)
<script>
  document.getElementsByName("photo")[0].src = location.search.substring(1);
</script>
上手くいかなかったらごめんね。


「1438.1クリックで2アクションできるでしょうか」への返信

無料アクセス解析

アクセス解析の決定版!無料レンタルで最大100ページ解析!

   投稿KEY
   パスワード

EZBBS.NET produced by InsideWeb