- ベストアンサー
2ヶ所のリンクで、ロールオーバーできる方法
- ホームページ作成で、2ヶ所のフレームに同時リンクできる方法について教えてください。
- また、リンク用アイコンをロールオーバーさせる方法も教えていただきたいです。
- ご教示いただけると助かります。現在勉強中で初心者のため、ご容赦ください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
あ、ごめんなさい、触れて変更するのと、クリックで変更するのが混ざっちゃったみたいですよね。 触れると画像が変わるようにするだけでしたら、scriptの変更はいらなかったんですよね。 わかりにくくなってしまってごめんなさい。 ↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script language="javascript"> <!-- function Frchange(){ parent.image_change.location.href="image.html"; parent.main.location.href="main.html"; } //--> </script> </head> <body> <p><img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> </p> </body> </html> ↑ これでいけるんじゃないでしょうか。 フォームでもいけたかもしれません。 ↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script language="javascript"> <!-- function Frchange(){ parent.image_change.location.href="image.html"; parent.main.location.href="main.html"; } //--> </script> </head> <body> <form> <input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01_off.gif" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> </form> </body> </html> ↑ ところで、 ＞<form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form> ＞を消してみたのですが、リンクその物が無くなります。 この部分の画像のファイル名にアンダーバーが入っていないようですが、これはコピペしたものですか？ 表示されないのは、どっちかのファイル名が間違っているのかもしれないと思ったのですが。
その他の回答 (2)
- tamackochi
- ベストアンサー率52% (11/21)
＞<img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> ＞この記述は、具体的にどの部分に記入すれば宜しいでしょうか？ これは、body内にpなりなんなり、ブロック要素を作って、その中に入れればいいと思います。 こんな感じ。 <body> <p> <img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> </p> </body> ＞あと-----------------------以下の記述はjavascript内に記入すれば宜しいのですね？ はい。 質問本文に書いていただいていた関数に少し書き足したのと、 変数の宣言を足しただけです。 画像を変更する命令は、もう少しスマートな書き方があるかもしれませんが、多分これでも動くと思います。
補足
何度もお答えいただき、申し訳ありません。 なぜか、上手くいきません。 お答えの様に書いてみたのですが、ロールオーバーする画像と２箇所リンクする画像と、２個できてしまいました。 body内の以前の記述 <form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form> を消してみたのですが、リンクその物が無くなります。 勉強不足でチンプンカンプンです。助けて下さい。 下記が、教えて頂いた記述をいれたものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script language="javascript"> <!-- var myFlg = 0; function Frchange(){ parent.image_change.location.href="image.html"; parent.main.location.href="main.html"; if(myFlg == 0) { button01.src = "01_off.gif"; myFlg++; } else { button01.src = "01_on.gif"; myFlg--; } } //--> </script> </head> <body> <p><img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> </p> <form><input type="image" value="フレーム内を同時に変更" onclick="Frchange()" src="01off.gif"></form> </body> </html> ほんと申し訳ありません。
- tamackochi
- ベストアンサー率52% (11/21)
リンクはフォームで記述する必要がどうしてもあるんでしょうか？ なければ、 <img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> で、いいんじゃないでしょうか。 もしかして、触れたときに変わるんじゃなくて、クリックするたびに変わる、とかですか？ でしたら、イメージにidをつけて、 スクリプトの記述に、画像変更用の命令を書き足したらいいと思います。 <img src ="01_off.gif" onClick="Frchange()" id="button01"> ========================= var myFlg = 0; function Frchange(){ parent.image.location.href="image.html"; parent.main.location.href="main.html"; if(myFlg == 0) { button01.src = "01_on.gif"; myFlg++; } else { button01.src = "01_off.gif"; myFlg--; } }
補足
早速のお答え有難うございます。 画像は、触れると変わるようにしたいです。 <img src ="01_off.gif" onClick="Frchange()" onMouseover="this.src='01_on.gif'" onMouseout="this.src='01_off.gif'"> この記述は、具体的にどの部分に記入すれば宜しいでしょうか？ あと-----------------------以下の記述はjavascript内に記入すれば宜しいのですね？ ごめんなさい 素人にもう暫くお付き合い願えますか？
お礼
できました！ 画像位置の問題が出たのですが、フォームに入れたら指定の位置に表示されました。 本当に助かりました。 どうにもならず、初めてOKWaveに質問しました。 tamackochiさんに出会えて良かった。 重ね重ね有難うございました。