- 締切済み
ボタンをクリックすると、隣の画像の内容とリンクが切り替わる
未熟者のため、皆様にご質問させていただきます。 onmouseoverにて変化するボタンが5つ、その隣には写真が掲載されている、といった、なんの変哲もないページがあります。 このボタンを仮に「赤」「青」「黄」「緑」「茶」とさせていただきます。 「赤」のボタンを押すと、隣の写真が予め用意していた「赤い写真」に、「青」のボタンを押すと、写真は「青い写真」に…といった具合に切り替わります。 ここまでは問題ないのですが、その隣の写真には、それぞれの色に関連する別ページへのリンクを設定したいのです。 「赤」のボタンをクリックして現れた「赤い写真」をクリックすると、「赤いページ」へ移動する。 「青」のボタンをクリックして現れた「青い写真」をクリックすると、「青いページ」へ移動する。 …といった具合です。 getElementById…などの表記を色々試してみましたが、なかなか思うように動作してくれません。 作業するソフトはDreamweaverCS4、掲載されているページはXHTML1.0です。 このような情報だけで、アドバイスいただくことは可能でしょうか…よろしくお願いいたします。
- yanashi
- お礼率0% (0/3)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞<a href="javascript:void(0);" onmouseout="MM_swapImage('赤い ＞ボタン',～～ これだと、各ボタンにロールオーバーかなんかもやっているみたいですが…？ MM_swapImage()ってDreamweaverで生成されるfunctionだと思うのですが、中身がわからないので…（どこかで見たことあるけど…） 何種類かボタン付属のデータがあるので、本来なら配列かなにかにデータをまとめて入れておくのが良いと思いますが… var data = [ ['元の画像','ロールオーバー画像','拡大時の画像','リンク先url'], ・・・・・・・・・・・・・・・・・ みたいな感じ。 とりあえずロールオーバーは置いておくとして、ご質問の部分の参考に… ＊ ソース全体がどのようにしていて、レイアウトをどう決めているか も不明なので適当にリスト形式に設定しています。 ＊ ↑の配列にデータを入れておく方法ではなく、HTMLソースに リンクと画像を入れる方法にしています。） ＊ 各要素にイベントを貼り付けるのは繰り返しが多く、ソースが見に くくなるので、代表してulに設定しています。 ＊ ↑にも書きましたが、MM_swapImage()は中身が不明なので 使用していません。 <html> <head><title>test</title> <style type="text/css"> .wrap ul { float:left; list-style:none; margin:0; padding:6px; } .wrap ul.button li a { display:none; } .wrap li img { width:180px; height:40px; border:0; padding:2px; } .wrap li img#expand { width:360px; height:218px; } </style> <script type="text/javascript"> function test(evt) { var a, e, img, t = evt.target || evt.srcElement; if (t.nodeName != 'IMG') return; if (a = t.parentNode.getElementsByTagName('A')[0]) { if (img = a.getElementsByTagName('IMG')[0]) { e = document.getElementById('expand'); e.src = img.src; e.parentNode.href = a.href; } } } </script> </head> <body> <div class="wrap"> <ul class="button" onclick="test(event)"> <li> <img src="red.gif"> <a href="xxx1.html"><img src="A.jpg"></a> </li> <li> <img src="blue.gif"> <a href="xxx2.html"><img src="B.jpg"></a> </li> <li> <img src="yellow.gif"> <a href="xxx3.html"><img src="C.jpg"></a> </li> <li> <img src="green.gif"> <a href="xxx4.html"><img src="D.jpg"></a> </li> <li> <img src="broun.gif"> <a href="xxx5.html"><img src="E.jpg"></a> </li> </ul> <ul> <li> <a href="xxx1.html"><img src="A.jpg" id="expand"></a> </li> </ul> </div> </body> </html>
- fujillin
- ベストアンサー率61% (1594/2576)
＞<a href="../red.html" id="test">「赤い写真」</a> ＞のような形でリンクを設定してみています。 「赤い写真」というのは、そのままテキストなのでしょうか、それとも <img src="赤い写真のアドレス"> みたいなイメージタグの意味でしょうか？ イメージタグの意味ならば、#1様の回答の前半の方法で可能です。 ＞隣の写真が予め用意していた「赤い写真」に、「青」のボタンを ＞押すと、写真は「青い写真」に…といった具合に切り替わります。 この切り替えもjavascriptで行なっていると推測しますが、その時に element.src = '写真のアドレス'; みたいなことを行なっているはず。 そのelementに対して、 element.parentNode.href = 'リンク先のURL'; あるいは、id="test"を利用して、 document.getElementById('test').href = 'リンク先のURL'; でも、同じことですね。 もしも、「赤い写真」がテキストの場合（画像のキャプションになっているとか）は、（ご質問文にはこのテキストを変更しているという記述はありませんが）、テキストの変更とリンク先の変更、さらに画像をクリックした場合のリンク先の変更を合わせて行なう必要があるのかも… （実際がどうなっているのかよくわからない） ＞> イメージ自体にトリガーをつけるなら… ＞この表現が既に分かりません。 画像にアンカータグがない場合を想定しての回答です。 HTML的に書けば、その画像要素に <img src="xxx.jpg" onclick="location.href = 'リンク先URL';"> みたいなイベント処理をjavascriptで設定してあげることで、同様のことが可能になるという意味です。 （めいっぱい具体的に書いたつもりですが、抽象的なご質問には、抽象的な回答にならざるを得ません。）
- yambejp
- ベストアンサー率51% (3827/7415)
＞リンクを設定したいのです。 リンクをアンカー（<a href=・・・>）で処理するならidで取得した オブジェクトのparentNodeのhrefをいじればよいでしょう。 イメージ自体にトリガーをつけるならonclickでlocation.hrefを 変更してください
補足
ご回答いただきましてありがとうございます。 知ったような口ぶりで質問してしまったことをお詫びします。 まず、リンクが変化する写真には、 <a href="../red.html" id="test">「赤い写真」</a> のような形でリンクを設定してみています。 ページを開いた時点では、「赤い写真」が表示されている状態です。 > イメージ自体にトリガーをつけるなら… この表現が既に分かりません。 きっと、理解されている方にとっては簡単な相談でしょうが、どうかご教授の程よろしくお願いします。
関連するQ&A
- vbaのコマンドボタンを同時にクリック
コマンドボタンが4つあります コマンドボタン 1〜3は個別でクリックすると色が変わります（赤→青、青→赤） 4を押すと 1〜3全ての色を変えたいのです。 しかも出来れば青に統一したいのですがどのようにすればいいのでしょうか。
- ベストアンサー
- Visual Basic
- 画像ボタンをキラキラさせるには
こんばんは。 ホームページ制作についての質問です。 画像ボタンにカーソルを乗せたり、クリックしたりしたときに、 ボタン周りにキラキラが出るようにしたいと思っています。 数日かけて、いろいろ検索して、多くの参考サイトを見ましたが、 結局答えには辿りつけませんでしたので、 ここで質問させてもらおうと思いました。 ここが自分のページです。 http://oto.bz/Oto%20no%20Omise.html テーブルのセルの中に赤と青のボタンがあり、 押すと右上にカートが出ると思います。 このボタンにオーバーロールを使っており、 マウスを乗せたりクリックしたりで、多少変わります。 本当はこれに、キラキラの効果を加えたいのですが、 うまくできずにいます。 これがテスト用に作ったページです。 http://oto.bz/test.html 赤い方のボタンにマウスカーソルを乗せると、 少しキラキラとなり、クリックすると、 更にたくさんキラキラとなりますが、 これは、赤いボタンの周りにキラキラをつけた png画像を配置しただけなので、 赤いボタン自体は縮小されるし、 何がやりたいのかよく分からない状態になっています。 自分がやりたいのは、 マウスカーソルを置いたときと、クリックしたとき、 ボタンのキラキラ部分だけを、 セルの外にはみ出させて表現することです。 赤いボタン自体は不変にして、外にキラキラを散りばめる、 こういったことはできるでしょうか？ もし不可能な場合は、無理だと分かるだけでもすっきりしますので、 何かご存知の方がいましたら、情報をいただけないでしょうか。
- ベストアンサー
- CSS
- javascriptで作ってあるボタンをクリックしても移動できない！
ハンゲームサイトの選択ボタンをクリックしても該当するページに移動できません。 同じページにある他のボタンでは移動できるものもあるのですが。
- 締切済み
- Windows XP
- ボタンかリンクをクリックすると入力フォームに文字入力される仕掛け
ホームページ上でテキストボックスが1つあるのでそこに色名（赤色や青色）などの文字を、ボタンかリンクをクリックするだけで入力されるような仕掛けを作りたいです。 例えば「暖かい色」と書かれた文字かボタンをクリックすれば、テキストボックスに「赤色」、また「お空の色」なら「青」などが入力されるなどです。 多分javaベースが良さそうですが、探しても見つからなかったです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- ボタンのリンクへ飛ばない
昨日から突然、文字のリンク先へは行けるのに、 一部ボタンのリンクへ飛べなくなってしまいました。 クリックが出来ないのです。 例えばgooトップページの左上にある、 “goo”という文字をクリックすると、 gooのトップページへ行くはずですが行きません。 また『検索』ボタンは押せるのですが 『緑のgooトップ』はだめという具合です。 過去の質問を参照して インターネット一時ファイルを消去したりしたのですが、 だめでした。 解決法ご存知の方がいましたらよろしくお願いします。 接続方法は光です。
- 締切済み
- その他（インターネット接続・通信）
- ボタンの入れ替え
Flash MX 2004です。 今、写真館（アルバム）を作成しています。 1つのswfファイルに1つのステージ（写真を表示させるところ）と１０個のボタン（仮に写真10枚とします）を配置して各ボタンを 「on (release) 」で写真をステージに写すようにしています。ボタンの色は「アップ」→緑、「オーバー」→青です。 （ボタンのサイズはもちろん統一しています）そこまでは出来るのですが、１度クリックしたボタンは識別できるように 「アップ」→赤、「オーバー」→青としたいのですが、どんなアクションを加えたらいいのか、いろいろ調べたんですがわかりません。 どなたかわかる方がおられましたら、よろしくお願いします。 （ちょっとズレてるかもしれませんがHTMLで言うと「vlink」みたいな感じですかね？）
- ベストアンサー
- Flash
- “更新”ボタンを押すまではリンクの色が青→紫色になりません。
リンクを以下のように記述するとIE6,7及び8において、リンクをクリック後に“ブラウザーの「更新」ボタンを押すまでは”リンクの色が青→紫色になりません（“ブラウザーの「更新」ボタンを押すと”リンクの色が青→紫色になります。）。 <a href="http://www.yahoo.co.jp/index.html" onClick="window.open('http://www.yahoo.co.jp/index.html');return false;">テストです。</a> どのように記述すると、IE6,7及び8において、リンクをクリック後に“ブラウザーの「更新」ボタンを押さなくても”リンクの色が青→紫色になるでしょうか? これは、仕方がないことなのでしょうか? グーグルのトップページには「Googleニュース」などの項目があり、各ニュースをクリックすると別ウィンドウが開きますが、“更新”ボタンを押さなくてもアクセス済みのリンクの色が青→紫色になりますね。あれって、とても高度な技術が必要ですか（リンクの色の変化だけの話です。）？ <a href="http://www.yahoo.co.jp/index.html" target="_blank">テストです。</a> のようなやりかたもあるようですが、XHTML 1.1 や XHTML Basic等ではもう採用さていないため、お勧めではないと読んだ記憶があります。 関連サイト等あれば、URL教えて下さい。
- ベストアンサー
- HTML
- 画像のランダム配置からボタンクリックでまとまる
「ロールオーバーで下画像を表示させる」という質問の回答がありました。 同じような設定で、ステージを400ｘ400、mc0～mc15をランダムに並べておき 別に置いたボタンをクリックすると正しい座標位置へゆっくり移動し、ひとつの 写真にできあがるというのを作りたく思います。 mc0～mc15は写真をスライスした画像100ｘ100です。 ご教授願います。
- ベストアンサー
- Flash
- gooブログで画像をクリックするとサイトが開くようにするには？
初めまして。最近Ｇｏｏブログを立ち上げました。 紹介したい本を載せたくて、いろいろやっていますが思うようにできません。 ブログから本の写真をクリックすると、その本についての解説のページへととぶようにしたいのです。 ちなみに本の写真や解説のページはアマゾンからとろうと思います。 ＨＴＭＬのほうでやってみています。 今までやってみたのは、 コピーした写真を文中に貼り付け、写真マークのボタンを押してアドレスを記入したり。 いろいろやったのですが、写真だけが載ってクリックしても何も開かなかったり、クリックすると写真の拡大ページ（アマゾンのページで本の画像をクリックしたときと同じように。）が出てきたり。あと、クリックすると希望のページが出るようになったものの、ボタンの写真が消えてしまって、ただの四角をクリックするようになっていたりです。 写真をクリックすると、希望のページにとぶ方法、教えてください！
- ベストアンサー
- ブログ
- フォームボタンクリックでセル色表示
作業中中断により日付を変更したのかどのボタンまでクリックしたのかがわからなくなります。 A2セルの日付を変更したらB5セルが赤表示、ボタン１をクリックしたらC5セルが青表示、ボタン２をクリックしたらD5セルが緑表示、ボタン３をクリックしたらE5セルが黄表示等どこの作業まで実施したのかわかるようにしたいのですがVBAのコードがお解りになる方よろしくお願いします。
- ベストアンサー
- Visual Basic
補足
抽象的なご質問となっておりますこと、重ねてお詫びいたします。 まず、リンクを切り替えたい画像に対しては、 <a href="red.html" id="test"><img src="赤い写真.jpg" id="5色の写真" ></a> の形となっております。 また、ボタンに対しては、例えば赤いボタンなら、 <a href="javascript:void(0);" onmouseout="MM_swapImage('赤いボタン','','赤いボタン.jpg',0)" onmouseover="MM_swapImage('赤いボタン','','赤いボタン_r.jpg',0); return false;"><img src="赤いボタン.jpg" alt="" id="赤いボタン" onclick="MM_swapImage('5色の写真','','赤い写真,jpg',1);document.getElementById(test).href='red.html'" /></a> の状態で止まってしまっています。（閉じタグ直前辺りは、わけがわからないまま、現状を記入しました） 読みにくかったら申し訳ございません、これでどれくらいスクリプト初心者なのかご理解いただけるかと思います…。 貴重なお時間を割いてアドバイスいただいているのに、頭が足らず申し訳ございません。