• 締切済み

リモートロールオーバーで画像と一緒にテキストも切り替える方法

初投稿です。 当方ジャバスクリプト初心者です。 Dreamweaverで画像(メイン画像が1枚、サムネイル画像が30枚ほどあります)のリモートロールオーバーをやったのですが、同時にテキスト(説明文5行ほど)も一緒に表示・切り替えする方法が知りたいです。 ジャバスクリプトで出来るのですか？ 全く検討もつかないので、どうか宜しくお願いします。 ■以下現状のhtmlです。尚、練習用なのでスタイルシートは真っ白です。■ <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script type="text/JavaScript"> <!-- 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_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_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 onload="MM_preloadImages('img/l_mitudera.jpg','img/l_aigou.jpg','img/l_jyuzo.jpg','img/l_kyobashi.jpg','img/l_noda.jpg')"> <img src="img/l_mitudera.jpg" width="300" height="260" name="main"><br /><br /> <img src="img/s_mitudera.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_mitudera.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_aigou.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_aigou.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_jyuzo.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_jyuzo.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_kyobashi.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_kyobashi.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="img/s_noda.jpg" width="75" height="65" onmouseover="MM_swapImage('main','','img/l_noda.jpg',1)" onmouseout="MM_swapImgRestore()" /> </body> </html>

みんなの回答

回答No.1

Dreamweaverでレイヤーを追加し、その中に文章を記述し、プロパティインスペクタでIDを記入。 画像を選択した状態で、ビヘイビアの「レイヤーの表示・非表示」を追加。 あとはダイアログに従って下さい。

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

関連するQ&A

  • オンマウスで画像ロールオーバー+テキスト変更

    こんにちは、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に追加する形でもまったく違うものでも良いですので、ご教授いただけると助かります。 よろしくお願いいたします。

  • ロールオーバーの処理で「最初の画像→click→ロールオーバーの画像→click→Yahoo!」という処理は出来ますか？

    Java Script初心者です。 画像をonclickでロールオーバさせています。 最初の画像をクリックするとロールオーバのイメージになり、その状態でもう１度クリックするとリンクに飛ばすことは出来ますか？ やりたい事は以下のような処理です。 最初の画像→click→ロールオーバーの画像→click→Yahoo! 現在はロールオーバーの画像までは表示できましたが、その画像にリンクを貼ることができません。 色々調べましたら分かりませんでしたので、分かる方がいらっしゃいましたら教えてください。 --------------------------HTML-------------------------- <img src="images/image_01.jpg" id="Image1" alto="EVENT" onclick="MM_swapImage('Image1','','images/image_over_01.jpg',1)" onmouseout="MM_swapImage('Image1','','images/image_01.jpg',1) /> ------------------------Java Script-------------------------- 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_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_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 language="JavaScript" 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> <body onLoad="MM_preloadImages('./photo/<!--photo1-->','./photo/<!--photo2-->','./photo/<!--photo3-->','./photo/<!--photo4-->')"> <table width="0" border="0" cellspacing="0" cellpadding="3"> <tr> <td rowspan="2" align="center" valign="top"> <table width="0" border="0" cellspacing="0" cellpadding="3"> <tr> <td colspan="2"><img src="./photo/<!--photo1-->" width="240" height="320" name="big_photo"></td> </tr> <tr align="center"> <td><img src="./photo/<!--photo1-->" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/<!--photo1-->',1)"></td> <td><img src="./photo/<!--photo2-->" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/<!--photo2-->',1)"></td> </tr> <tr align="center"> <td><img src="./photo/<!--photo3-->" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/<!--photo3-->',1)"></td> <td><img src="./photo/<!--photo4-->" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/<!--photo4-->',1)"></td> </tr> </table> 以前、ホームページ作成会社に頼んで作成した、WEBサイトがありますが、今は廃業されて連絡がとれません。 スキン式の写真ギャラリーCGIなのですが、スキンファイルのソースが上記ソースで、 <td colspan="2"><img src="./photo/<!--photo1-->" width="240" height="320" name="big_photo"></td> の部分に大きな１枚の画像があり、小さな画像４枚の部分をオンマウスすると画像が入れ替わります。 この小さな画像４枚の部分は、元画像の小さなサムネイル画像が表示されますが、これをカスタマイズしたいのですが、ネットで 探した限りではいいサンプルが見当たりません。 カスタマイズ内容は他の画像４枚（NO1.gif、NO２.gif・・・）と用意して、そこの画像をオンマウスした場合にビック部分に画像を 表示させたいのですが・・・・ わかる方いらしゃいましたら、できれば教えてください。

  • Javaのロールオーバーについて教えてください

    質問させていただきます。 DreamweaverCS3にてＷＥＢサイトを作成しているのですが、メニューボタンにロールオーバー画像スワップの効果を付け加える必要がでてきました。 メインページであるindexに対してDWのビヘイビア機能を使い、index自体にはロールオーバーを実現することができました。 付け加えたソースコードを外部ＪＡＶＡファイルとして切り分け、他のページにも適用したいのですが、javascriptのどの部分を変更すれば、全ページに適用されるのかわかりません。 スクリプトは以下のとおりです。 <!-- 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_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_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];} } //--> 「index」となっている部分を何らかに変更すれば実現できるのではないかと考えたのですが、まったくわかりません。 どなたか詳しい方、ご教示いただけると幸いです。

  • 複数の画像をランダム（シャッフル）表示

    １０枚の画像を更新するごとに重複せず ランダム（シャッフル）させるには どうしたらいいですか？ 理想は、JavaScriptは外部で読み込ませ、 そして下記のようにHTMLでリストを使い ランダム表示させたいのですが・・・ <ul> <li><a href="http://www.1/"><img src="s1.gif" /><br />あああ</a></li> <li><a href="http://www.2/"><img src="s2.gif" /><br />いいい</a></li> <li><a href="http://www.3/"><img src="s3.gif" /><br />ううう</a></li> <li><a href="http://www.4/"><img src="s4.gif" /><br />えええ</a></li> <li><a href="http://www.5/"><img src="s5.gif" /><br />おおお</a></li> <li><a href="http://www.6/"><img src="s6.gif" /><br />かかか</a></li> <li><a href="http://www.7/"><img src="s7.gif" /><br />ききき</a></li> <li><a href="http://www.8/"><img src="s8.gif" /><br />くくく</a></li> <li><a href="http://www.9/"><img src="s9.gif" /><br />けけけ</a></li> <li><a href="http://www.0/"><img src="s0.gif" /><br />こここ</a></li> </ul> 似たようなことをしているサイトがあったので 参考に貼り付けておきます。 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_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_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_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];} }// JavaScript Document 詳しい方いましたら教えて頂けませんか？ 宜しくお願いします。

  • 何を言っているのか教えて下さい

    Dreamweaverで出てきたものなのですが意味が分からないんで困ってます教えて下さい. 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.0 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 && document.getElementById) x=document.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];} }

  • リンクにマウスを重ねた際、テキストリンクと画像を同時に変更する方法などが分からず困っています

    HTMLで数点詰まってしまった所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたいこと】 1. 「ここは1行目です。」というテキストと画像にリンクが貼ってあります。 そのどちらかにマウスを重ねた際、下記の3つを同時に変更したいのですが可能でしょうか？ 1-1. 画像を変更する。 1-2. 「ここは1行目です。」の文字色を変更する。 1-3. 「ここは1行目です。」のtdの背景色を変更する。 今の所、1-1, 1-2はそれぞれの上にマウスを重ねると動作します。 1-3は上にマウスを重ねると文字の後ろのみ(tdの後ろではありません)背景が変わります。 ただしどれも連動はしていません。 2. 1-3の関連となりますが、現在、画像とテキストにリンクを貼っていますが、そうではなく列(またはテーブル)自体にリンクを貼る(リンクを1つにまとめる)ことは可能でしょうか？ tableやtrにリンクを貼っても動作しなかったのですが、何か代替案があればご教示いただければと思います。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <style type="text/css"> <!-- .text_link a { display: block; } .text_link a:hover { color:#33FF66; background-color:#CCFFFF; } --> </style> <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 onload="MM_preloadImages('images/5.jpg')"> <table border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td width="1" valign="middle"><a href="index1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/5.jpg',1)"><img src="images/1.jpg" name="Image3" width="80" height="60" border="0" id="Image3" /></a></td> <td valign="middle" class="text_link"><a href="index1.html">ここは1行目です。</a></td> </tr> </table> </body> </html> 【使用ファイル】 index.html(上記ソース) images/1.jpg(任意の画像) images/5.jpg(任意の画像) どこか一箇所でもご教示いただけるようでしたら、ご教示いただければと思います。 以上、よろしくお願いします。

    • ベストアンサー
    • HTML
  • ボタンをMouseOverで、ボタン画像と指定先画像を同時に変えたい

    どちらか片方ならできるのですが、本当に同時にできるのかも分かりません。 スクリプトの記述が違うのだと思うのですが。 他の方法でも構いません、ご教授お願いします。 指定画像（name:a1）にmain01.jpgを表示させるスクリプト <script Language="JavaScript"> <!-- if(document.images){ b2 = new Image(); b2.src="main01.jpg"; } else{ b2 = "" document.a1 = "" } //--> </script> <script language="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; } ～中略～ ここはDreamweaverで作られたスクリプトなので間違いないと思います。 ボタンのロールオーバーイメージのスクリプトです。 //--> </script> HTML記述 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu00','','menu01.gif',1) document.a1.src='main01.jpg'"><img name="menu00" border="0" src="menu00.gif" width="173" height="32"></a>

  • スワップイメージでテキストがブラウザにより変わらない

    java初心者ですが、サイトを参考にマウスオーバーで画像を変更、テキストも変更できるようになったのですが、IE、operaでは、テキストが変わるのですが、firefox、googleでは変わらないことに気が付きました。見よう見まねで組み込みましたので、詳細な理解ができておりません。宜しくお願い致します。 +--------------------------------+ | | | 画像 | | | +--------------------------------+ | テキスト | <=左記(A・B・C)の画像を +----------+----------+----------+ mouseoverで上記の画像 | A | B | C | 　とテキストが変わる +----------+----------+----------+ <head> <script type="text/javascript" src="../js/swap_gallery.js"></script> </head> <body> <table> <tr> <td><img src="A.jpg" name="pict" id="pict" /></td> </tr> <tr> <td id="pict_text">説明を表示します</td> </tr> <tr> <td> <table> <tr> <td><img src="A.jpg" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','A.jpg','pict','','A.jpg',1,'説明A')" onmouseout="" /></td> <td><img src="B.jpg" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','B.jpg','pict','','B.jpg',1,'説明B')" onmouseout="" /></td> <td><img src="C.jpg" alt="" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','C.jpg','pict','','C.jpg',1,'説明C')" onmouseout="" /></td> </tr> </table> </td> </tr> </table> </body> function chg_gallery(a, b, c, d, e, f, g, cText){ swapImage(a,b,c,d,e,f,g); changeText(cText); } function swapImage() { var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=findObj(a[i]))!=null){ document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; } } function findObj(n, d) { 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=findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function changeText(cText) { if (document.all) { document.all["pict_text"].innerText = cText; } }

  • これだけ複雑なのには何か意味が・・・？

    Dreamweaverでロールオーバーを作ると以下のスクリプトが生成されます。それぞれが何をしてるかは分かるのですが、なぜここまで複雑なのでしょうか？ただロールオーバーを実現させるならもっと単純なソースがいくらでもあるのに・・・。もし企業サイトでしたら、あらゆるブラウザでの動作が出来る必要がありますが、その為のプログラムが書いてあるのでしょうか？ 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.0 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 && document.getElementById) x=document.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];} }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する