よく見るオンマウスでオンマウスと別の場所の画像が変わるのを実装してみた。

ちょっとがんばったから、絶対に忘れたくないんで書いておこう。
すぐ婚naviとかでよく見るオンマウスしたら、別の場所が変わるやつ。

これ右の画像内テキスト部分をオンマウスすると中央の画像自体が変更されて
かつ、リンク先もかわってるって実装！！
多分これ読んでくれてる方は
何となく言わんとすることはわかってくれるはず！！

まぁいいんです、あくまで自分の備忘録なんで・・・・。

これを実装するには、私の実装では「JQuery」を使用しました。
なのでまずヘッドタグ内で以下のコードを記入。
いちいちローカルに持ってくるのめんどくさいので、
以前ブログで紹介したようにGoogleさんにお借りします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

で、わかりやすく説明するために先にhtmlを書きます。
大きくナヴィとなる部分と表示する部分を書く！
あとはJQueryで制御する用のidを画像に記入。
詳細は以下参照

<p id="nav_bar">
<a href="#1" rel="m_images01.jpg">リンク0</a>
<a href="#2" rel="m_images02.jpg">リンク1</a>
<a href="#3" rel="m_images03.jpg">リンク2</a>
<a href="#4" rel="m_images04.jpg">リンク3</a>
<a href="#5" rel="m_images05.jpg">リンク4</a>
</p>

<div id="disp">
<a href="#">
<img id="main_image" src="images01.jpg" alt="ここはめいんの画像" width="200" height="200">
</a>
</div>

あとはJQueryで制御するだけ！！
ヘッドタグ内に以下を記入した（←動作テストやからやで・・・汗）

<script><!--
//@cc_on

var handler = function (e/*Event*/) {
　var
　n = e./*@if(1) srcElement @else@*/ target /*@end@*/,
　t = n,
　img = n.ownerDocument.getElementById( 'main_image' );
　
　if( n.href )
　　while( t = t.parentNode )
　　　if( 'nav_bar' === t.id )
　　　　if( n.rel )
　　　　　img.src = n.rel,
　　　　　img.parentNode.href = n.href;
};

document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
　'mouseover', handler, false );

/*@if(1) detachEvent( 'on' + @else@*/ removeEventListener(/*@end@*/
　'unload', function (e) {

　　document./*@if(1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　'mouseover', handler, false);

　　/*@if(1) detachEvent ('on' + @else@*/ removeEventListener (/*@end@*/
　　　'unload', arguments.callee, false);
　
　}, false );

//-->
</script>

思った通り動作した。
これは大きな収穫！！

そして僕、実はJQuery苦手なんすよね。
なのにわがまま言って実装してくれたY氏ありがとう♪