- ベストアンサー
どうすればいいのかわかりません
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンで、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしてました。 ここで質問なのですが、 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像３が変わりスグに画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 ６．理想的にはブラウザの「戻る」を押しても画像２は画像１にもどる。 といったものはつくれますか？ 自力ならjavascriptを使って１．２．３まではつくれます。 onmouseoutをつかってしまうと、４以降ができません・・・ やはり出来ないのでしょうか・・・ どなたか知恵をお貸しください
- anpankudasai
- お礼率33% (67/203)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
そのメニューのページの<body>を<body class="menu">として、 スタイルシートの記述を .menu a:link { background-image: url(1の画像ファイル名); } .menu a:visited { background-image: url(1の画像ファイル名); } .menu a:active { background-image: url(2の画像ファイル名); } .menu a:hover { background-image: url(2の画像ファイル名); } とすれば、2.の画像3に変わること以外はJavaScriptなしでできるかもしれません。ただし、背景画像を変化させているので、このままではクリックできません。下の例のように透過GIF（space.gif）をハイパーリンクの内容にします。1×1ピクセルの物を作って、大きさをwidthとheightで指定するといいと思います。 メニューということから、おそらくそれぞれ違う画像を用意するとおもうので、そのときは下の例のようにIDなどで分けてください。 例） スタイルシートの記述 .menu #top a:link { ...（略） .menu #news a:link { ...（略） （他のa:visitedなどもそれぞれメニューのID毎に記述します。） HTMLの記述 <body class="menu"> <h1>メニュー</h1> <ul> <li id="top"><a href="index.html"><img src="space.gif" alt="トップページ"></a></li> <li id="news"><a href="news.html"><img src="space.gif" alt="ニュース"></a></li> ...（略） #おそらく、背景画像がずれたりして大変と思いますが、その点は参考URLのリンク先をみてCSSで調整してみてください。 #あと、これ時間がなくて動作確認してないので、上手く動かなかったらごめんなさいです。
その他の回答 (2)
とりあえずのアイディアですが… 右側のフレームで参照しているページのURIを取得して、そのURIが特定のページであるかどうかをチェックするようにすることで、4の動作も取れるのではないかと思います。 たとえば、右側のフレーム名を「Right」としたら、 x=parent.Right.location.href; で変数xの中に右側のフレームで参照しているページのURIを取得できますので、その変数の値をチェックして、特定のページのURIであった場合はイメージの変更をせずに処理を終了させ、そうでない場合にはイメージを元のものに戻すという処理にすれば、実現可能なのではないかと思います。 例えば、変数chkURIにページのURIを取得して、適当な処理を加え(上記手段で取得できるURIはフルパスなので、適宜加工した方がいいと思います)、その変数の内容により行う処理を指定するのはいかがでしょうか。 具体例としては、Mouseout時の関数を、 function MouseOutChangeImg(){ chkURI=parent.Right.location.href; xx=chkURI.LastIndexOf("/")+1; zz=chkURI.length; chkURI=chkURI.substring(xx,zz); if (chkURI!="***.htm"){ /* 「***.htm」は右フレームがそのページだったときにはイメージを変更させたくない場合の、右フレーム内のページのURI */ document.images[x].src="画像1のURI";} } このようにすると、右側フレームで特定のページを参照している場合にはイメージの変更は行われず、特定のページを参照していないときにはイメージの変更の処理が行われると思います。 これをうまく応用すれば、4までは実現できると思います。 5まで実現させる場合は、クリックしたときに画像を差し替える処理で、クリックされた画像以外の画像を初期状態に戻す処理を入れるようにすると良いかもしれません。 こちらは少々スクリプト的にも重くなるでしょうし、思い通りに行くといえる確信もありませんが… 6の実現は、私には実現可能かどうかもわかりません… 推測ですが、結構困難なのではないかと思います。 参考になれば幸いです。
- carakawa
- ベストアンサー率35% (40/114)
左側のフレーム自体も、リンク先用にひとつづつ作らなくてはなりませんよ。 例えば、a.html というファイルのメニューファイルで a_menu.html というものをつくり、そのa_menu.thmlにクリックした状態の画像を入れておくんです。 ですから、target ページ数分menu ページを作って、全部が切り替わるようにしなくてはなりません。 もしもそれがめんどうなら、フレームを切らないページ校正をして、しまうかどちらかですね。
