画像のロールオーバーとアクティブページでの画像ロールオーバーについて

前へ 次へ
このQ&Aのポイント
  • javascriptで画像のロールオーバーを設定する方法について質問します。
  • 現在見ているページのメニュー画像をロールオーバーさせる方法がわかりません。
  • これらの機能を実装できるjavascriptについて知っている方がいれば教えてください。
回答を見る
  • ベストアンサー

画像のロールオーバーとアクティブページでの画像ロールオーバーについて

javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ（アクティブページ）のメニュー画像をロールオーバー（ロールオーバーをオンマウス状態に）させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

回答がないみたいなので… ご質問が一般論なので、回答も一般論になりますが、 ロールオーバー自体は同じことをやっているので、メニューが何個存在しようともと同じ方法で対処可能です。 どの様なページ構成なのか不明ですが、グローバルとアクティブのメニューが同じドキュメント内にあるのか、あるいは別ドキュメント（フレームなどで）あるのかで少し違ってきます。 別ドキュメントの場合はそれぞれのドキュメントで、単独にロールオーバーを考えればよいので簡単ですね。 同じドキュメント内でロールオーバーのアクションが同じなら（画像を入れ替えるだけとか同じ機能という意味）、ロールオーバーのスクリプトを多少修正して（スクリプトによっては修正不要）、複数のメニューに対応できるようにしてあげれるだけで可能なはず。 （どのメニューでのアクションか識別できるようにすれば良い） それすら面倒くさければ、同じfunctionを名前を変えて設置して対象の識別子などが重複しないようにしてあげるだけでも可能です。 （まったく同じ内容のスクリプトを複数個おくのが恥ずかしくなければですが。） アクションが違う場合は、それを包含するスクリプトにするか、別々の機能としてスクリプトを作成するか、どちらでも対応可能ですし、具体的なアクションの違い方によって、どっちを選択するかきまるでしょう。

その他の回答 (1)

回答No.1

かいとうがつかないようなので。 みためは、てきとうに　すたいるしーとでいじってね。 ふぁいるめいは、index.htmlとしてみてちょ。 ぜんかくくうはくは、はんかくにでもなおしてね。ばぶ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> .MHType1 { background-color:#f88 !important;} .MHType2 { background-color:#f00;} </style> <ul id="menu"> <li><a href="index.html?menu=0">menu0</a></li> <li><a href="index.html?menu=1">menu1</a></li> <li><a href="index.html?menu=2">menu2</a></li> <li><a href="index.html?menu=3">menu3</a></li> </ul> <script type="text/javascript"> //@cc_on var defElement; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'load', function() { 　　var par = getLocation(); 　　if( 'undefined' === typeof par.menu ) return; 　　defElement = document.getElementById('menu').getElementsByTagName('a')[par.menu -0]; 　　defElement.className = 'MHType2'; 　}, false); var hoge = (function () { 　var m = null; 　return function( evt ) { 　　var d, p, e = evt./*@if (1) srcElement @else@*/ target /*@end@*/; 　　if( 'A' === e.nodeName && 'menu' === e.parentNode.parentNode.id ) { 　　　(d = m) && delClass(d, 'MHType1') && (m = null); 　　　addClass(m = e,'MHType1'); 　　} 　}; })(); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　'mouseover', hoge, false); function addClass ( e, n ) { 　　var cnt =0, key, keys = n.split( /\u0020+/ ), str = '\u0020' + e.className + '\u0020', buf = [ ]; 　　while( key = keys[ cnt++ ] ) if( 0 > str.indexOf( '\u0020' + key + '\u0020' ) ) buf.push( key ); 　　e.className += '\u0020' + buf.join( '\u0020' ); } function delClass ( e, n ) { 　　var key, keys = e.className.split( /\u0020+/ ), str = '\u0020' + n + '\u0020', cnt = 0, buf = [ ]; 　　while( key = keys[ cnt++ ] ) if( 0 > str.indexOf( '\u0020' + key + '\u0020' ) ) buf.push( key ); 　　e.className = buf.join( '\u0020' ); } function getLocation () { 　var par = location.search.substring(1).split('&'); 　var cnt = 0, pac, nv, ret = { }; 　while (pac = par[cnt++]) { 　　nv = pac.split('='); 　　ret[ decodeURIComponent( nv[0] ) ] = decodeURIComponent( nv[1] ); 　} 　return ret; } </script>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryを使ったロールオーバーについて

    初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！

  • 異なる大きさのロールオーバーって？

    Java Script初心者です。 ロールオーバーは作れるのですが 時々gooのTopページのバナーにあるような オンマウスをすると表示されている画像サイズより 大きい画像に入れ替わるロールオーバーを作りたいのです。 普通に作ったら、大きく変わる画像のサイズ分 余白を取っておかないといけないと思うのですが gooのTopページのバナーは テキストがある上に画像がかぶさるように なっています。 ご存知の方は是非教えていただけますか？ よろしくお願いします。

  • 画像のロールオーバー+別フレームの画像を変化させる方法

    こんにちは。よろしくお願いいたします。 現在、メニュー画像にオンマウスで別フレームの画像を変化させる、 というものを下記のページを参考に作成しました。 ( http://www.bekkoame.ne.jp/~hamba/JSBOOK/imaobj/ima06/ima06.html ) そこに、メニュー画像をロールオーバーという 動きも付け加えたいのですが、ふたつのJavaScriptをどのように記述したら よいのかが分かりません。 (1) http://www.bekkoame.ne.jp/~hamba/JSBOOK/imaobj/ima06/ima06.html と、 (2) http://www.bekkoame.ne.jp/~hamba/JSBOOK/imaobj/ima04/ima04.html を 組み合わせたものを作成したいと思っております。 何卒よろしくお願いいたします。

  • yuga.jsを使うとロールオーバー画像が表示されない

    お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。

  • JavaScriptのロールオーバーに関わるスクリプトを外部に置きたい。

    JavaScriptのロールオーバーに関わるスクリプトを 外部に置きたいと考えています。 このページのほかに、より良いと思われる記述方法はないでしょうか。いくつかサンプルがあればうれしいです。 オブジェクト指向JavaScript http://web.paulownia.jp/script/rollover.html

  • WordPressで画像のロールオーバーをさせたい

    WordPressのブログや固定ページの記事の中で、 ２枚の画像を使って、画像のロールオーバー（マウスオーバー）をさせたいのですが、 やりかたがわかりません。 Java Scriptではなく、CSSで行いたく思い、 検索していろんなサイトに行きましたがうまくできませんでした。 もし可能であれば、単純にこれをコピーしたらできる というＣＳＳをご提示していただけないでしょうか。

  • flashのように徐々に画像が変化していくロールオーバー

    以前、どこかのサイトで見たのですが画像が良くあるjavascriptの一種で変わるロールオーバーではなく、Flashのように徐々に変化していくものがあったのですが、それを作りたいと思っています。 そんなサイトを見つけようともしたのですが、やはりサンプルが見当たりません。全部、普通のロールオーバーばかりでした（以前見たというそのサイトは今どこにあるか不明です）。 正直、Javascriptは概念自体ほとんど判っていないので、そういった人間でもできるようなさんぷるとうをみつけたいのですが、誰か判る方はいますでしょうか。 よろしく、お願いします。

  • クリッカブルマップにロールオーバーを付ける

    クリッカブルマップにロールオーバー（Javascript）を付けようと思うのですが、 どうも目指していることが上手くいきません。 まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。 この通りに書けば、通常のロールオーバーはできるのですが、 私の目的はあと＋α必要になります。 [内容] 1.　オンマウス時にロールオーバー 2.　クリック後も、ロールオーバー状態 3.　他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態 ４．他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。 以上です。 ちなみに現状（上記サイト）は.onmouseover、.onmouseout、.onclickの３つすべてロールオーバー後のイメージを指定すれば[内容]の１と２まではクリアなのですが、３以降がNGです。 そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。 どなたがご教授よろしくお願いいたします。

  • 画像のロールオーバー

    Dreamweaver8のビヘイビアのスワップイメージを使って 画像のロールオーバーを再現したいのですが 思い通りにいきません。 実装したいこと ---------------------------------------------------- 画像Ａをマウスオーバーで画像Ｂに変わる クリックでオーバーした状態を保持（画像Ｂのまま） さらに、画像Ｃをマウスオーバーで画像Ｄに変わり クリックでオーバーした状態を保持（画像Ｄのまま） そのクリック時、画像Ｂが画像Ａに変わる ---------------------------------------------------- http://h2ham.up.seesaa.net/html/bgimage-change03.html の上の画像のような感じです。 これを実装を助けて頂きたいです。 スクリプトが書けず、Dreamweaverのビヘイビアしか 対応できない為、詳しく解説いただけたら嬉しいです。 もしくは参考サイト、サンプルソースなどありましたら 助かります。 よろしくお願いします。

  • オンマウスとロールオーバー

    現在サイトを製作中で質問があります。 テーブルのセル内のメニュー1.2.3.4にオンマウスすると そのセル内の背景が変わる、というものを作りたいのですが なかなかうまいこと出来なくて困っています。 スタイルシートで1.2.3.4と設定して いざオンマウスしてみると、1.2.3.4すべての項目が 最後に設定した4の背景に変わってしまいます。 なんとなく、A HOVERは1ページに一つしか設定出来ないのかなと 思いましたが、そうなのでしょうか？ ロールオーバーも試してみたのですが VISTAのせいなのか、ブラウザ上部に 「セキュリティ保護のため、制限されています」の様なメッセージが 出てしまうので、使いたくありません。 HPビルダー12 WIN VISTA HP を使用しています。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する