ベストアンサー

どうすればいいのかわかりません

2003/03/09 19:59

今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。左ページのメニューはgif画像のボタンで、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしてました。ここで質問なのですが、１．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる）２．クリックした時に一瞬画像３が変わりスグに画像２に戻る。３．当然同時に右ページも変わる。４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。６．理想的にはブラウザの「戻る」を押しても画像２は画像１にもどる。といったものはつくれますか？自力ならjavascriptを使って１．２．３まではつくれます。 onmouseoutをつかってしまうと、４以降ができません・・・やはり出来ないのでしょうか・・・どなたか知恵をお貸しください

anpankudasai
お礼率33% (67/203)

HTML
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

d-3
ベストアンサー率42% (16/38)

2003/03/10 12:51 回答No.2

そのメニューのページの<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で調整してみてください。 #あと、これ時間がなくて動作確認してないので、上手く動かなかったらごめんなさいです。

参考URL：: http://www.ag.wakwak.com/~d-three/favorite.html#html

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

noname#199778

2003/03/11 18:41 回答No.3

とりあえずのアイディアですが… 右側のフレームで参照しているページの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)

2003/03/10 09:38 回答No.1

左側のフレーム自体も、リンク先用にひとつづつ作らなくてはなりませんよ。例えば、a.html　というファイルのメニューファイルで　a_menu.html　というものをつくり、そのa_menu.thmlにクリックした状態の画像を入れておくんです。　ですから、target　ページ数分menu　ページを作って、全部が切り替わるようにしなくてはなりません。もしもそれがめんどうなら、フレームを切らないページ校正をして、しまうかどちらかですね。

ログインすると、全ての回答が全文表示されます。