- ベストアンサー
画像のロールオーバーとアクティブページでの画像ロールオーバーについて
- javascriptで画像のロールオーバーを設定する方法について質問します。
- 現在見ているページのメニュー画像をロールオーバーさせる方法がわかりません。
- これらの機能を実装できるjavascriptについて知っている方がいれば教えてください。
- yuki7649
- お礼率35% (6/17)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… ご質問が一般論なので、回答も一般論になりますが、 ロールオーバー自体は同じことをやっているので、メニューが何個存在しようともと同じ方法で対処可能です。 どの様なページ構成なのか不明ですが、グローバルとアクティブのメニューが同じドキュメント内にあるのか、あるいは別ドキュメント（フレームなどで）あるのかで少し違ってきます。 別ドキュメントの場合はそれぞれのドキュメントで、単独にロールオーバーを考えればよいので簡単ですね。 同じドキュメント内でロールオーバーのアクションが同じなら（画像を入れ替えるだけとか同じ機能という意味）、ロールオーバーのスクリプトを多少修正して（スクリプトによっては修正不要）、複数のメニューに対応できるようにしてあげれるだけで可能なはず。 （どのメニューでのアクションか識別できるようにすれば良い） それすら面倒くさければ、同じfunctionを名前を変えて設置して対象の識別子などが重複しないようにしてあげるだけでも可能です。 （まったく同じ内容のスクリプトを複数個おくのが恥ずかしくなければですが。） アクションが違う場合は、それを包含するスクリプトにするか、別々の機能としてスクリプトを作成するか、どちらでも対応可能ですし、具体的なアクションの違い方によって、どっちを選択するかきまるでしょう。
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
かいとうがつかないようなので。 みためは、てきとうに すたいるしーとでいじってね。 ふぁいるめいは、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>
