• 締切済み

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

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

みんなの回答

noname#84373
noname#84373
回答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>

ww_puper
質問者

お礼

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

noname#84373
noname#84373
回答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>

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

メニューバーと画像の相対的な位置関係がよくわからないですが、 imageのsrcを書き換えてしまえばよいでしょう。 また説明分に関してはpとかspanとかdivでくくっておいて、 そのinnerHTMLを書き換えるとかで対応可能です

ww_puper
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • オンマウスで、画像切り替え＋別箇所の画像も同時に切り替えられのでしょうか？

    お世話になっております。 もしJavascriptのカテゴリーと違うものでしたらすみません。 オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、 オンマウス時にそのような画像切り替えをすると同時に 別部分にある画像エリアの画像、（もしくはHTML）も切り替える事は可能なのでしょうか。 別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。 何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。

  • テキストにオンマウスで指定箇所に画像を表示

    画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。

  • 画像をオンマウスでのメニュー

    大き目の画像に触れてしばらくすると左上に「イメージの保存」「イメージの印刷」などのメニューが出てきますよね？ それを出さないようにする為に、普通ならテーブルの背景にするなどして解決するのですが、今回はオンマウスで画像を変えたいと思っているのです。 すると、画像が変わった二枚目でメニューが出てきてしまいます。 これが出てこないようにするにはどうしたらいいでしょうか？ どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • オンマウス効果の動画制作

    下記参考URLの上部メニューバーのようなオンマウス効果の動画を制作したいと思っております。 １．このような動画の制作方法をご教授いただけないでしょうか。 ２．動画制作に適したソフトも併せてご紹介いただけないでしょうか。 私は、動画関連については一切無知です。 ただし、CSSと静的画像を用いたオンマウス効果メニューバーを制作したことはあります。 宜しくお願いいたします。 参考URL＞＞http://www.synergy-marketing.co.jp/

  • オンマウスで画像が変わる

    オンマウスで画像が変わるHTMLタグを教えてください。 カーソルをあてると、画像１が画像２に変わり、カーソルをどけると画像１に戻る方法があったら教えてください！

  • javascriptによる画像切り替えについてわからなくて困っています

    javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー　切り替え　クリック　リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？

  • オンマウスで画像表示

    オンマウスで画像表示(離すと非表示)というのをやりたいのですが 非表示の時も、オンマウス時に画像が表示されるべき領域に空白ができてしまいます。。 他のテキスト等のレイアウトを崩さずに オンマウス時だけ画像が上に被るような感じで 画面の一番手前に表示させるにはどうすればいいですか??

  • formのsubmitボタンを画像にして、オンマウスで画像を切り替えた

    formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。 HTMLとCSSでHP制作しています。 formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると 画像の色を変えるという事をやりたいと思っています。 例えば赤ボタンをオンマウスで青ボタンにするという感じです。 ネット検索してボタンを画像に変える事は出来ました。 ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。 javascriptを使ったものを見かけたように思うのでこちらで質問してみました。 CSSで普通のリンクボタンの画像切り替えは出来るのですが、 formではそういうわけにはいかないのでしょうか？ javascriptがよくわかならいのですが、そんな私にも出来るでしょうか？ どこか参考サイトがありましたら、紹介して頂けるとありがたいです。 アドバイスよろしくお願い致します。

  • オンマウスで画像を変えたいのですが...。

    オンマウスで画像を変えたいのですが...。 onMouseover、outで画像を入れて簡易プレビューで見ると切り替わるのですが、 プレビュー(別)ウインドウで確認すると画像が切り替わりません。 因みにテンプレートはカスタムブルーを使っています。 何処に原因があるのか分りません。 教えて下さい。

  • オンマウス時に

    オンマウスを行った際に、その項目の説明などのデータを表示させ方法を探しています。どなたか知っている方が居たら教えていただけないでしょうか。 例 下の項目にオンマウスした時に説明をフローティングウインドで表示させる。 ××について

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する