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

締切済

質問者：ww_puper
質問日時：2008/12/11 12:17
回答数：3件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： yambejp
回答日時：2008/12/11 14:34

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

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.2

回答者： _pipi_
回答日時：2008/12/11 17:36

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

<!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>

- 0
- 件

通報する

No.3

回答者： _pipi_
回答日時：2008/12/11 21:14

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>