- 締切済み
オンマウスで画像ロールオーバー+テキスト変更
こんにちは、javascript初心者です。 現在、Dreamweaver CS4でサイトを作っています。 以下のような構成になっており、menuの画像をオンマウスすると、ロールオーバーして画像の色が変わるようにしています。 （javascriptはDreamweaverが自動生成しています） ▼ココカラ ------------------------------------------ <head> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body> <div id="menu"> <a href="a.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menua','','a2.jpg',1)"><img src="a.jpg" alt="a" name="menua"></a> <a href="b.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menub','','b2.jpg',1)"><img src="b.jpg" alt="b" name="menub"></a> <a href="c.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menuc','','c2.jpg',1)"><img src="c.jpg" alt="c" name="menuc"></a> <a href="e.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menud','','d2.jpg',1)"><img src="d.jpg" alt="d" name="menud"></a> </div> <div id="submenu">挨拶文</div> <div id="main"></div> <div id="footer"></div> </body> </html> ▲ココマデ ------------------------------------------ このメニューのオンマウスですが、ロールオーバーの動作は残したまま、submenu部分の挨拶文を各ページのサブメニューに差し変えることは可能でしょうか？ （aのメニューをオンマウスすると画像の色が変わり、aのサブメニューがsubmenuに表示される等） 同じような事例を見つけたのですが、 http://okwave.jp/qa/q4651643.html こちらは画像が1箇所だったので、初心者の私では応用の仕方が分かりませんでした。 現在のjavascriptに追加する形でもまったく違うものでも良いですので、ご教授いただけると助かります。 よろしくお願いいたします。
- yako_k
- お礼率77% (62/80)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… ＞submenu部分の挨拶文を各ページのサブメニューに ＞差し変えることは可能でしょうか？ 「各ページのサブメニュー」がどこにあるのか不明だし、質問のタイトルは「テキスト変更」となっているので、何をどうしたいのかわかりませんが… ＞まったく違うものでも良いですので とのことなので、勝手に空想して違うタイプを。 （HTMLの構成は勝手に想像したものなので、ご質問の内容と合っているのか不明） ＊ メニュー（？）の画像は「○○.jpg」が「○○2.jpg」と入れ替わるルールと仮定。 スクリプトオフの環境では動きません。（あたりまえだけど） （以下全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- body { padding:3px; } ul.menu, ul.menu li ,ul.submenu, ul.submenu li { list-style-type:none; padding:0; margin:0 } ul.menu .submenu { display:none; } //--> </style> <script type="text/javascript"> <!-- /*@cc_on@*/ document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'mouseout', function(evt){ var e, t = evt./*@if(1)srcElement@else@*/target/*@end@*/; var r = evt./*@if(1)toElement@else@*/relatedTarget/*@end@*/; if(check(t)) t.src = t.src.replace(/2\.jpg$/, ".jpg"); if(check(r)){ r.src = r.src.replace(/\.jpg$/, "2.jpg"); while(r && !/(^| )submenu( |$)/.test(r.className)) r = r.nextSibling; if(r){ e = document.getElementById("submenu"); while(e.firstChild) e.removeChild(e.firstChild); e.appendChild(r.cloneNode(true)); } } function check(e){ if(!e || e.tagName != "IMG") return false; while(e && !/(^| )menu( |$)/.test(e.className)) e = e.parentNode; return !!e; } }, false); //--> </script> </head> <body> <ul class="menu"> <li><img src="a.jpg" alt="a"> <ul class="submenu"> <li>menu1_sub1</li> <li>menu1_sub2</li> <li>menu1_sub3</li> </ul> </li> <li><img src="b.jpg" alt="b"> <ul class="submenu"> <li>menu2_sub1</li> <li>menu2_sub2</li> <li>menu2_sub3</li> </ul> </li> <li><img src="c.jpg" alt="c"> <ul class="submenu"> <li>menu3_sub1</li> <li>menu3_sub2</li> <li>menu3_sub3</li> </ul> </li> </ul> <div id="submenu">挨拶文？？</div> </body> </html>
