• ベストアンサー

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

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
  • 回答数12
  • ありがとう数16

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.11

> これは文章位置の縦のセンタリング自体はどこにも明示されていない為だと思います。 そうですね。前回までのやりとりの中でも説明させて頂いたとおり、本件の条件下では（テキストをレンダリングする領域の高さの）値を明示できないのも事実なので、ANo.10のサンプルは忘れて下さい。 もう本件の条件では「個別指定（＝idごとに違う値を与える）ができない」との事ですので、本件の問題解決にはならないのですが、「個別指定ができる」のであれば実現可能な方法を参考までに。これで最後にしておきます。 【画像】 ANo.10と同じ 【CSS】 ul.sample4 { width: 300px; list-style: none; padding: 0; margin: 0; } ul.sample4 li { padding: 0; margin: 0 0 5px 0; } ul.sample4 li a { display: block; } ul.sample4 li a:hover { color: #3f6; background-color: #cff; } ul.sample4 li span { display: table-cell; margin-bottom: 1px; vertical-align: middle; _display: inline; _zoom: 1; } /* IE 7 hack */ *:first-child+html ul.sample4 li span { display: inline; zoom: 1; } /* 以下、ナビリンクごとの個別指定 */ /* 画像のレンダリング領域（画像の幅＋10px） */ ul.sample4 li#NAVI01 span.img { width: 110px; } ul.sample4 li#NAVI02 span.img { width: 120px; } ul.sample4 li#NAVI03 span.img { width: 130px; } /* テキストのレンダリング領域（<ul>の幅－画像の幅－5px） */ ul.sample4 li#NAVI01 span.text { width: 185px; } ul.sample4 li#NAVI02 span.text { width: 175px; } ul.sample4 li#NAVI03 span.text { width: 165px; } 【HTML】 （ナビ部分のみ抜粋） <ul class="sample4"> <li id="NAVI01"> <a href="index.html"> <span class="img"><img src="images/navi01_off.jpg" alt="hoge01" width="100" height="20" /></span> <span class="text">長いテキスト長い長い長い長い長い長い長い長いい長い長い長い長い長い長い長い長い</span> </a> </li> <li id="NAVI02"> <a href="index.html"> <span class="img"><img src="images/navi02_off.jpg" alt="hoge02" width="110" height="30" /></span> <span class="text">短いテキスト</span> </a> </li> <li id="NAVI03"> <a href="index.html"> <span class="img"><img src="images/navi03_off.jpg" alt="hoge03" width="120" height="40" /></span> <span class="text">長いテキスト長い長い長い長い長い長い長い長い長い</span> </a> </li> </ul> 全体をリストタグでマークアップし<a>をブロック要素化してテキストと画像をひとつのリンクに含めるころまでは前回と同じです。今回は再び画像を<img>でマークアップする方法に戻していますので、画像のロールオーバーについては上記サンプルの<a>にイベントハンドラ／<img>にidを追加してJavaScriptを使って下さい（その部分は省略）。上記はIE6、Firefox、Safariで検証済みです。IE7とOperaも多分OKな筈です。 まあ、<li>の中で更に<span>で画像とテキストを入れ子にしているのでマークアップ的にはあまり美しくはない（不可ではないです）のですが、そこは目を瞑って下さい。ちなみに、FirefoxやSafariなら、実は個別指定（本件では画像及びテキストのwidthの値）をしなくても同じ結果になるのですが、IE6ではwidthの値を明示しないとテキストが画像の下にレンダリングされてしまうので、本件の様に画像の大きさが一定でない場合は、どうしても個別指定が必要になってきます。 なお、本件の画像とテキストの中央揃えに関しては、下記のサイトの方法論をベースにカスタマイズさせて頂いていますので、「何故こうなるのか」という事については、そちらを参照して下さい。色々と参考になると思います。 http://www.yomotsu.net/wp/?p=387

iroha_168
質問者

お礼

ありがとうございます。 上記のソースを試させていただきました。 Firefox2で見た所、これで大丈夫だと思いました。 ただIE6で見てみた所、下記が気になりました。 1. 画像とテキストの間に小さいアンダーライン(_)が表示されます(Firefox2ではそのようなことは起こりません)。 2. マウスオーバー時、半数以上の領域でアイコンが「I」になります (Firefox2では手のアイコンになります。リンクにマウスオーバーした際は手のアイコンになるのが普通かなと思います)。 3. 文字サイズを大きくするとテキストが画像の下に表示されてしまいます(Firefox2では文字サイズを大きくしても画像の横に表示されます)。 また、Firefox2で個別指定が不要な事(ただしIE6では必要な事)も確認いたしました。 それとサイトのご紹介ありがとうございます。 CSSで位置をそろえる際の参考にさせていただきたいと思います。 今までたくさんのご教示ありがとうございました。 大変勉強になりました。 以上、よろしくお願いします。

その他の回答 (11)

  • abril
  • ベストアンサー率69% (388/560)
回答No.1

> tableやtrにリンクを貼っても動作しなかったのですが、 リンク<a>はインライン要素ですので、「tableやtrに」に適用する事はできません。 サンプルの様に、 <tr> <td><a href="index1.html"><img></a></td> <td><a href="index1.html">テキスト</a></td> </tr> という構造のままだとご希望をかなえるにはJavaScriptを追加修正するのが手っ取り早いかと思いますが、どうしてもこういう構造（画像とテキストをセルに分けて横並びにする）でなければいけませんか？仮に： <tr> <td><a href="index1.html"><img>テキスト</a></td> </tr> という構造で良いのであれば問題はCSSで一気解決するのですが。下記は大雑把な一例です。<img>に対するロールオーバーのJavaScriptはそのまま流用するとします。 ※ただし<td>のpaddingが0の場合に限ります。 【CSS】 a.hoge { display: block; } a.hoge:hover { color:#3f6; background-color:#cff; } 【HTML】 <tr> <td><a href="index1.html" (省略) class="hoge"><img (省略)>テキスト</a></td> </tr> a.hogeで<a (省略) class="hoge">をブロック要素化しているので、リンクの領域が<td>のセル内全体となり、<td>のどこにマウスを置いても前景色（テキストリンクの色）と背景色（テキストリンクの背景色だが表示上はセル全体となる）が同時に切り替わります。CSSを工夫すればその他のスタイルの微調整（例えば画像とテキストの間の余白・位置など）も可能です。 どうしても現在の様に<tr><td><a><img></a></td><td><a>テキスト</a></td></tr>という構造を保たねばならないのであれば、<tr>に対して疑似要素":hover"を適用する方法もありますが、残念ながらIE6では疑似要素":hover"が<a>に対してしか適用されないのでそれをどうにかする為にはやはりJavaScriptの併用が必要となります。

iroha_168
質問者

補足

ありがとうございます。 リンクがtableやtrに適用出来ない件、了解いたしました。 それと現在の構造を維持する必要はありません。 そして教えていただいた記述を元にCSSで組み直したところ、今回質問させていただいた内容はすべて解決いたしました。 しかし他の問題が出てしまいました。 テキストが複数行の場合、2行目が画像の下に回りこんでしまいます。 テーブルレイアウトの場合は、td内で改行されていたのですが。 http://oshiete1.goo.ne.jp/qa2016072.htmlの書き込みを見ると、複数行のテキストを動作させるのは難しいように読み取れましたが、これを解決する方法はあるのでしょうか？ 【ソースコード】 <!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"> <!-- .middle { vertical-align:middle; } a.hoge { display: block; } a.hoge:hover { color:#3f6; background-color:#cff; } .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','images/3.jpg')"> <table border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td class="text_link"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/3.jpg',1)"><img src="images/2.jpg" name="Image2" width="80" height="60" border="0" id="Image2" class="middle" />CSSを使用したバージョンです。長い文字になると・・・</a></td> </tr> </table> <br /> <table border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td width="1" valign="middle" class="text_link"><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">tableレイアウトバージョンです。長い文字になると・・・</a></td> </tr> </table> </body> </html> 【使用ファイル】 index.html(上記ソース) images/1.jpg(任意の画像) images/2.jpg(任意の画像) images/3.jpg(任意の画像) images/5.jpg(任意の画像) 以上、よろしくお願いします。 ※なお文字数制限の関係上、「この回答へのお礼」ではなく、「この回答への補足」に投稿させていただきました。

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

関連するQ&A

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

    初投稿です。 当方ジャバスクリプト初心者です。 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>

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

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

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

    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];} }

  • javascriptタグを外部にしたい

    <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> DWでデフォルトでロールオーバーイメージを使ってスクリプトが出ています。SEO的にこれを外部に移したいのですが、どうやればいいのでしょうか？CSSと同じ記述でいいのでしょうか・・・ SEO的にはスクリプト自体使わないほうがいいのはわかっています

  • dreamweaverについて

    JavaやCSSがサーバーにUPロードしても反映しないのです。 dreamweaverのブラウザーの表示では、確かに確認できるのですが、 CSSのリンクかJavaの宣言に以下のコメントがひっているのですが、これが原因でようか？ <link href="file:///F|/ais2008test/mystyle.css" rel="stylesheet" type="text/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> 誰か教えてください！

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

    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];} }

  • 文字列型定数？

    この度、カウンタを埋め込みましたが どうしても、上記タイトルのスクリプトエラー が発生します。 <head> <script language="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) { //v3.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); 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> 文字オーバーの為次へ（文字列型定数２）

  • ロールオーバーの処理で「最初の画像→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];} }

  • Opera　表示が上手くいきません

    初めての質問です。宜しくお願いいたします。 タイトル画像をIE,NN,Mozillaでは画面の上、左側にピッタリ表示することができるのですが、Operaではタイトル画像のみ中央に配置されてしまいます。まだHTMLを勉強し始めてばかりで説明不足な点もあると思いますが、改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 ------------------------------------------------------------- <!-- body { margin-left: 0px; margin-top: 0px; } --> <!-- 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];} } //-->

    • ベストアンサー
    • CSS
  • ２つのjavascriptの命令を１ページでやるには。

    Javascriptの超初心者です。 現在サイトを作っておりまして、 あるページに２つのjavascriptの命令を書き込みたいのですが。。。 １つはjavascriptによるプルダウンメニューをグローバルメニューの中に使用しています。 そしてもう１つはそのページ内にスワッピングで小さいサムネイル画像をクリックすると、大きな写真が切り替わるという仕掛けをjavascriptを使用して（dreamweaverの生成したものですが^^;)作ったのですが、 単体ではもちろん動作するのですが、２つ同時に自分なりにまとめてみてもどうにも動作しません。。２つを一緒にまとめるにはどのようなソースを書けばよいのでしょうか？ どなたかご教授頂けませんでしょうか？宜しくお願い致します。 以下ソースです。 ●プルダウン用　（外部の長いjavascriptを読み込んでます） <link href="css/import.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/SpryMenuBar.js" type="text/javascript"></script> <script type="text/javascript"><!-- window.onload = function(){ new Spry.Widget.MenuBar("MenuBar1"); } // --></script> ●スワッピング画像用　（直接書き込んでいます） <link href="css/import.css" rel="stylesheet" type="text/css" media="all" /> <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> 以上の２つはどのようにまとめたら両方動作するのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する