締切済み

オンマウスで画像とテキストの切替

2008/12/11 12:17

メニューバーのメニューにオンマウスすると、すぐ横の画像が切り替わるようにしたのですが、その下の説明も画像と連動させて同じ切替をしたいのですが。。

ww_puper
お礼率80% (17/21)

JavaScript
回答数3
ありがとう数2

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

みんなの回答

noname#84373

2008/12/11 21:14 回答No.3

Firefoxで動かなかったので訂正です。まぁ～返事はつかないと思いますが。（その日に登録して質問する人はそういう人が多いので勝手に思っただけです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .waku0 { width:600px; height:140px; border:1px #ddd solid; } #wakul { width:200px; height:140px; background-color:#eee; overflow:auto; float:left;} #wakur { width:400px; height:140px; overflow:hidden; float:left; position:relative;} .wpage { width:398px; height:138px; background-color:#eef; overflow:auto; position:absolute; top:0px; left:0px; border:1px #888 solid;} .hide { display:none; } .menu { list-style-type:none; padding:0px; margin:0px;} </style> <div class="waku0"> <div id="wakul"> <ul class="menu"> <li><a href="#menu0">あいうえお</a></li> <li><a href="#menu1">かきくけこ</a></li> <li><a href="#menu2">さしすせそ</a></li> <li><a href="#menu3">たちつてと</a></li> <li><a href="#menu4">なにぬねの</a></li> </ul> </div> <div id="wakur"> <div class="wpage" id="menu0"><img src="p0.gif" width="50" height="50" alt="あ～">あ～</div> <div class="wpage hide" id="menu1"><img src="p1.gif" width="50" height="50" alt="か～">か～</div> <div class="wpage hide" id="menu2"><img src="p2.gif" width="50" height="50" alt="さ～">さ～</div> <div class="wpage hide" id="menu3"><img src="p3.gif" width="50" height="50" alt="た～">た～</div> <div class="wpage hide" id="menu4"><img src="p4.gif" width="50" height="50" alt="な～">な～</div> </div> </div> <script type="text/javascript"> document.getElementById('wakul')./*@cc_on @if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/'mouseover', function( evt ){ var obj = evt.target || evt.srcElement; if( obj.tagName!='A') return; var cnt = 0, p = obj.parentNode; while( p = p.previousSibling ) cnt+=( p.nodeName=='LI'); p = document.getElementById('wakur').firstChild; do { if( p.nodeName == 'DIV' && cnt-- == 0) return (new moveStyleTop( p,140,15)); } while( p = p.nextSibling ) } ,false); function moveStyleTop( elm, takasa, wtime){ this.go = function(){ this.setTop( this.h - (this.h/15|0)-1 ); if( !this.h ) clearInterval( this.tmid )} this.setTop = function(n){ this.obj.style.top = (this.h = (n<0)?0:n ) +'px' } this.obj = elm; var p = elm.parentNode.childNodes; for(var i=0, m=p.length; i<m; i++) if( p[i].nodeName == 'DIV' ) p[i].style.zIndex = 0; this.setTop( takasa ); with( elm.style ){ display ='block'; zIndex = 1 } this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } </script>

質問者

お礼 2008/12/12 06:56

お返事が遅れましてすみません。なるべく自分で探すのですが、どうしてもうまくいかず焦って質問してしまいました。。お忙しい所、大変丁寧にお答え頂いて有り難うございました！助かりました～；；／

noname#84373

2008/12/11 17:36 回答No.2

またつまらぬものを書いてしまった。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> .waku0 { width:600px; height:140px; border:1px #ddd solid; } #wakul { width:200px; height:140px; background-color:#eee; overflow:auto; float:left;} #wakur { width:400px; height:140px; background-color:#eef; overflow:hidden; float:left; position:absolute;} .wpage { width:398px; height:138px; background-color:#eef; overflow:auto; position:absolute; top:0px; left:0px; border:1px #888 solid;} .hide { display:none; } .menu { list-style-type:none; padding:0px;margin:0px;} .menu li { padding:0px; margin:0px; } </style> <div class="waku0"> <div id="wakul"> <ul class="menu"> <li><a href="#menu0">あいうえお</a></li> <li><a href="#menu1">かきくけこ</a></li> <li><a href="#menu2">さしすせそ</a></li> <li><a href="#menu3">たちつてと</a></li> <li><a href="#menu4">なにぬねの</a></li> </ul> </div> <div id="wakur"> <div class="wpage" id="menu0"><img src="p0.gif" width="50" height="50" alt="あ～">あ～</div> <div class="wpage hide" id="menu1"><img src="p1.gif" width="50" height="50" alt="か～">か～</div> <div class="wpage hide" id="menu2"><img src="p2.gif" width="50" height="50" alt="さ～">さ～</div> <div class="wpage hide" id="menu3"><img src="p3.gif" width="50" height="50" alt="た～">た～</div> <div class="wpage hide" id="menu4"><img src="p4.gif" width="50" height="50" alt="な～">な～</div> </div> </div> <script type="text/javascript"> //@cc_on addEvent( document.body, 'mouseover', chk ); function chk( evt ){ var obj = evt.target || evt.srcElement; if( obj.tagName=='A' && obj.parentNode.tagName == 'LI' && obj.parentNode.parentNode.className == 'menu'){ var cnt=0; var p=obj.parentNode; while( p = p.previousSibling ) if( p.nodeName=='LI') cnt++; var o = document.getElementById('wakur').firstChild; while( o ){ if( o.nodeName == 'DIV' && cnt-- == 0) { new moveStyleTop( o,140,10); return; } o=o.nextSibling; } } } function moveStyleTop( elementId, takasa, wtime){ this.go = function(){ this.h -= (this.h/10|0) + 1; if( this.h<0 ) { this.setTop(0); clearInterval( this.tmid ); return; } this.setTop( this.h ); } this.setTop = function(n){ if(n<0) n=0; this.h = n; this.obj.style.top = n +'px' } this.obj = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; if(!this.obj)return false; this.setTop( takasa ); this.obj.style.display = 'block'; var p = this.obj.parentNode.childNodes; for(var i=0, m=p.length; i<m; i++) if( p[i].nodeName == 'DIV' ) p[i].style.zIndex=0; this.obj.style.zIndex = 1; this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime); } function addEvent(elementId, evt, eventHandler, flag){ var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId; element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag); } </script>