ママのスキンケアのお悩みにおすすめアイテム

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

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 1
この回答へのお礼

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

お礼日時:2008/12/12 06:56

またつまらぬものを書いてしまった。


<!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>
    • good
    • 0

メニューバーと画像の相対的な位置関係がよくわからないですが、


imageのsrcを書き換えてしまえばよいでしょう。
また説明分に関してはpとかspanとかdivでくくっておいて、
そのinnerHTMLを書き換えるとかで対応可能です
    • good
    • 0
この回答へのお礼

初心者で書き換え対応可能しらず、すみません。
大変有り難うございました。

お礼日時:2008/12/12 06:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング