こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

javascriptでの画像のロールオーバーについて質問させてください。

現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。

このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ(アクティブページ)のメニュー画像をロールオーバー(ロールオーバーをオンマウス状態に)させる方法が見つかりません。

あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・

どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

投稿日時 - 2009-09-17 03:47:27

QNo.5296664

すぐに回答ほしいです

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

回答がないみたいなので…

ご質問が一般論なので、回答も一般論になりますが、
ロールオーバー自体は同じことをやっているので、メニューが何個存在しようともと同じ方法で対処可能です。

どの様なページ構成なのか不明ですが、グローバルとアクティブのメニューが同じドキュメント内にあるのか、あるいは別ドキュメント(フレームなどで)あるのかで少し違ってきます。

別ドキュメントの場合はそれぞれのドキュメントで、単独にロールオーバーを考えればよいので簡単ですね。

同じドキュメント内でロールオーバーのアクションが同じなら(画像を入れ替えるだけとか同じ機能という意味)、ロールオーバーのスクリプトを多少修正して(スクリプトによっては修正不要)、複数のメニューに対応できるようにしてあげれるだけで可能なはず。
(どのメニューでのアクションか識別できるようにすれば良い)

それすら面倒くさければ、同じfunctionを名前を変えて設置して対象の識別子などが重複しないようにしてあげるだけでも可能です。
(まったく同じ内容のスクリプトを複数個おくのが恥ずかしくなければですが。)

アクションが違う場合は、それを包含するスクリプトにするか、別々の機能としてスクリプトを作成するか、どちらでも対応可能ですし、具体的なアクションの違い方によって、どっちを選択するかきまるでしょう。

投稿日時 - 2009-09-18 11:57:26

このQ&Aは役に立ちましたか?

2人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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>

投稿日時 - 2009-09-18 11:23:50

あなたにオススメの質問