• ベストアンサー

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

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.12

> ただIE6で見てみた所、下記が気になりました。 > 1. 画像とテキストの間に小さいアンダーライン(_)が表示されます(Firefox2ではそのようなことは起こりません)。 これは、IE6だと <span class="img">～</span>←この後の改行コード <span class="text">～</span> 上記の改行コードの部分を半角スペースとして表示してしまっている為の様です。HTMLソース中のこの改行コードを削除して <span class="img">～</span><span class="text">～</span> と続けるか、あるいは（ソースが見づらければ） <span class="img">～</span><!-- --><span class="text">～</span> と改行コード部分をコメントにしてしまえば隙間はなくなります。 > 2. マウスオーバー時、半数以上の領域でアイコンが「I」になります > (Firefox2では手のアイコンになります。リンクにマウスオーバーした際は手のアイコンになるのが普通かなと思います)。 「リンクにマウスオーバーした際は手のアイコンになるのが普通」かどうかはUAの判断に依存します。本件の場合、displayプロパティをあれやこれやいじっている事がIE上ではマウスカーソルの形の認識に影響を及ぼしているのかもしれません。このままでもリンク自体は有効（クリックできる）ですが、気になる様でしたら以下の様に改めてカーソルの形を定義してやれば直ります。 ul.sample4 li a { display: block; cursor: pointer;←追加 } > 3. 文字サイズを大きくするとテキストが画像の下に表示されてしまいます これなんですか、実際にIE6 on Windows XP上で文字を最大にしても全くその様な現象が起きず、他環境と同様にテキストは常に画像の右側に表示されているのですが…？ちょっと腑に落ちないですね。おそらく（こちらのサンプルコード以外の部分の質問者様のオリジナルの）他の何かが影響しているのかもしれないです。こちらの環境上では起こらない現象の為、原因はわかりかねます。 ANo.11の最後のサンプルに上記のカーソルの定義を付加したもので、既に検証済みの環境も含めIE7、Opera9.xでも不具合はありませんでしたので、これで私のレスは終了させて頂きます。今後の某かの参考になれば幸いです。

iroha_168
質問者

お礼

いつもお世話になっております。 ・1の現象について ご指摘の修正を施した所、現象が出なくなりました。 どうもありがとうございました。 それと今回の事とは関係ないのですが、今までIE6でたまに余分なスペースが入ってしまうことがあり、その都度タグをつめることで直しておりました。 今回のことで、改行コードを半角スペースとして表示してしまっている事、及び改行コードをコメントアウトするという手法があると知り勉強になりました。 どうもありがとうございました。 ・2の現象について ご指摘の修正を施した所、現象が出なくなりました。 どうもありがとうございました。 今までたまにリンクのアイコンの形が「I」になってしまい、その都度困っていたのですが、今後は今回教えて頂いたことで対応できそうです。 どうもありがとうございました。 ・3の現象について こちらの現象ですが、上記の1,2の修正を施した所、現象が出なくなりました。 その上で、再度今回適用した修正を元に戻した所、現象1が再現する状況下では文字コードを「大」以上にするとNAVI02とNAVI03のテキストが画像の下に表示されました。 その為、IE6で改行コードを半角スペースとして表示してしまっている状態が、現象3の原因で、現象1の解消と共に解決したものと思われます。 最後に、今回の質問では一週間以上にわたりご指導いただきありがとうございました。 回答11のソースで当初の質問の4項目の条件はすべて満たされている事を確認いたしました。 後、最初の質問段階で漏れ(個別対応不可など)があり、申し訳ございませんでした。 以上、よろしくお願いします。

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

> 今回行いたいのはナビリンクとなります。 > 下記のようなナビリンクがあった際、枠内はすべてリンク領域にしたい ああ…そういう事ですか。最初の質問の内容からして、リンク集の様なものをイメージされているのかと思いましたので。 であれば、考え方がまた変わってきます。「画像＋テキストのナビリンク」という事であれば、その数はさほど沢山ではない、と考えても宜しいでしょうか？つまり、せいぜい多くても10個程度が想定される、という事ですが。 もしそれで構わないのであれば、多少記述が増えますが、CSSだけでお望みを叶える事が可能となります。以下はその仮定に基づいたサンプルです。 ここではナビリンクが3つ、それぞれで表示される画像のセットは以下とした場合です（後者がマウスオーバー時の画像）。 navi01_off.jpg/navi01_on.jpg (W100px/H20px) navi02_off.jpg/navi02_on.jpg (W110px/H30px) navi03_off.jpg/navi03_on.jpg (W120px/H40px) 【CSS】 ul.sample3 { width: 300px; list-style: none; padding: 0; margin: 0; } ul.sample3 li { padding: 0; margin: 0 0 5px 0; } ul.sample3 li a { display: block; background-position: left center; background-repeat: no-repeat; } ul.sample3 li a:hover { color:#3f6; background-color:#cff; } /* 以下、ナビリンクごとの個別指定 */ /* 通常 */ ul.sample3 li#NAVI01 a { min-height: 20px; _height: 20px; padding-left: 110px; background-image: url(images/navi01_off.jpg); } ul.sample3 li#NAVI02 a { min-height: 30px; _height: 30px; padding-left: 120px; background-image: url(images/navi02_off.jpg); } ul.sample3 li#NAVI03 a { min-height: 40px; _height: 40px; padding-left: 130px; background-image: url(images/navi03_off.jpg); } /* マウスオーバー時 */ ul.sample3 li#NAVI01 a:hover { background-image: url(images/navi01_on.jpg); } ul.sample3 li#NAVI02 a:hover { background-image: url(images/navi02_on.jpg); } ul.sample3 li#NAVI03 a:hover { background-image: url(images/navi03_on.jpg); } 【HTML】 （ナビ部分のみ抜粋） <ul class="sample3"> <li id="NAVI01"><a href="index.html">長いテキスト長い長い長い長い長い長い長い長いい長い長い長い長い長い長い長い長い</a></li> <li id="NAVI02"><a href="index.html">短いテキスト</a></li> <li id="NAVI03"><a href="index.html">長いテキスト長い長い長い長い長い長い長い長い長い</a></li> </ul> ナビ、ということであればリストタグ<ul>でのマークアップが望ましいので、マークアップを変更しています。<a>をブロック要素化してテキストと画像をひとつのリンクに含めるころまでは今までと同じですが、今回、画像部分を<img>でのマークアップではなく、<a>の背景画像としております。 背景画像とする事で： ・テキストが回り込む事がない ・画像とテキストの垂直方向の位置関係をセンタリングできる ・a:hoverを利用して、JavaScriptを使用せず画像をロールオーバーできる というメリットがあります。 逆に、以下の点について対応しなくてはならなくなります： ・画像の大きさがナビリンクごとに異なるので、アイテムごとにIdをふって個別指定が必要 ・背景画像自体は幅や高さを持たないので、幅と高さの値を個別にpxで指定しなければならない サンプルCSS中での、"min-height"の値が画像の高さです。それと併わせて"_height”に同じ値を指定しているのは、IE6ではmin-heightプロパティが無効の為、同様の効果を得られるheightプロパティをアンダースコア・ハックで使っています。幅は"padding-left"で指定していますが、それぞれの実際の画像の幅より10px多くすることで、テキストとの間に余白をとっています（この数値はお好みで）。そして、画像自体を"background-image"で指定し、ロールオーバー時の画像は更に"a:hover"のスタイルとして指定しています。 いかがでしょうか？ただし、前置きした様にこれはナビリンクの数だけ個別指定をしなければならないので、何十個もアイテムがある様な場合にはCSSの記述が膨大になってしまいますのでお奨めはしません。通常イメージするナビリンクの数でなら、HTML側は非常にすっきりしますし、CSSでの記述も（一括でまとめられるところはできるだけそうしてあるので）さほど煩雑にはならないと思いますので。

iroha_168
質問者

お礼

いつもお世話になっております。 今回教えていただいた記述を引き続き検証していた所、必ずしも下記は満たせていないようなのでご報告差し上げます。 > ・画像とテキストの垂直方向の位置関係をセンタリングできる 記載されているソースの下記は厳密にはセンタリングされていませんでした(画像の上の方に表示されます。IE6だと分かりにくいです。Firefox2だと分かりやすいです)。 <li id="NAVI02"><a href="index.html">短いテキスト</a></li> ただこの場所は画像の高さが小さい為、下記のようにNAVI03部分のテキストを短くしてみると分かりやすいと思います(IE6でも)。 【修正前】 <li id="NAVI03"><a href="index.html">長いテキスト長い長い長い長い長い長い長い長い長い</a></li> 【修正後】 <li id="NAVI03"><a href="index.html">短いテキスト</a></li> これは文章位置の縦のセンタリング自体はどこにも明示されていない為だと思います。 背景画像の高さは下記で指定されております(NAVI03の場合)。 min-height: 40px; _height: 40px; そして背景画像の表示位置は下記で指定されております。 background-position: left center; しかし、上記の条件だけでは「テキストの高さが画像サイズ以上になった場合のみ」、初めてセンタリングされるように思います (厳密にはテキストがセンタリングというより、テキストの縦中央に背景画像が表示されるものの、テキストの高さがmin-heightに満たない場合でもmin-height分の高さが確保されてしまう為、その際テキストは上の方に表示されてしまうと思います)。 その為、min-heightや_heightを削除すればテキストが短くてもセンタリングされます。 もっともこうすると画像が切れてしまうので、センタリングできても意味はないのですが。 中々cssで縦の中央あわせというのは難しいみたいですね。 それでは。

iroha_168
質問者

補足

ありがとうございます。 ソースを確認させていただきました。 試してみた感じ、私がここで記載させていただいた質問内容をすべて満たしていると思います。 それと > 「画像＋テキストのナビリンク」という事であれば、その数はさほど沢山ではない、と考えても宜しいでしょうか？つまり、せいぜい多くても10個程度が想定される、という事ですが。 はい、そのとおりです。 多分10個前後だと思います。 ただ、これは「個別対応はできない」という事を明記していなかった私の言葉足らずが原因ですが、今回のソースはそのまま使えない事情があります。 その事情ですが、下記となります。 ・製造者(私)と運営者が分離しています。 ・一通り製造した後は、運営者のみで運営していく形を想定しています。 ・運営者は自由にナビリンクを追加、削除、変更する権限があります(ナビリンクの追加、削除はブラウザから行えます。ナビリンクの数が多分10個前後という曖昧な表現をさせていただいたのはここに起因します)。 ・運営者は自由にナビリンク用の画像を追加、削除、変更する権限があります(画像サイズが一定しないのはここに起因します)。 ・運営者はhtmlにさわりません。 その為、上記のような個別指定のソースを適用すると下記のような自体が想定されます。 ・運営者が、ある日ナビリンクを追加しても、それだけでは正常に動作しない(その都度、製造者(私)がCSSの記述の追加やhtmlにクラスを追加する必要がある)と思います。 ちなみに質問3の動作がリンク領域以外は要望を満たしていると発言させていただいた際は、個別対応をしなくて良い(運営者がナビリンク名と、ナビリンク画像を適用すれば、そのまま動作する)という点も内包しておりました。 もしかしたら「リンク集の様なもの」をご想像いただいていたみたいなので、たくさんのリンクがあり、左側にバナー画像、右側にテキストが書いてあり、バナー画像は各サイトでバラバラの為、個別対応は難しいと思っていただいていたのであれば、結果として私の思っていた事(個別対応で出来ない)と同じだったのかもしれません。 ともあれ、個別対応すれば動作することがわかり助かりました。 今回はそのまま使用することは出来ないと思いますが、今後製造者レベルで完結できる箇所で上記のような動作を希望する際は参考にさせていただきたいと思います。 どうもありがとうございました。 以上、よろしくお願いします。 ※なお文字数制限の関係上、「この回答へのお礼」ではなく、「この回答への補足」に投稿させていただきました。

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

> Whatever:hoverを使用した上で検証してみたのですが、こちらも文字が記載されてない箇所にマウスカーソルを合わせた際、背景は変わるのですが、リンクが無効になっていました。 この「リンクが無効」という意味は、「文字色が変わらない」ではなく「リンクとして機能しない（クリックできない）」という事でしょうか（前者に関してはメジャーな複数の環境で表示が同様になるのを確認済みですので…）？ であればそれは意図通りの動作です。 > このスクリプトはあくまで装飾をつかさどっており、リンク動作そのものをつかさどっているわけではないように見受けられたのですが、 その通りです。これは前回書きました通り、IE6においても疑似要素":hover"を<a>以外のタグにも有効にする為のみのスクリプトです。 もしかしたら説明が足りなかったのかもしれませんが、ANo.8でのアドバイスは、「<tr>のどこ（リンクの領域ではない箇所でも）にマウスが置かれても"リンクの色とセルの背景色が変わる"」という表示を実現する為のものであって、「縦方向のリンク領域を常にセルの高さ一杯にする」というものではありません。 それ（の実現が難しい事）についてはANo.7のアドバイス中でご説明した通りです。セルの高さが決められていればCSSで対応できますが、本件の場合、セルの内包する要素が可変ですので、それは不適切です（極端に大きな値を設定するのでもあれば別ですが、現実的ではないです）。方法があるとしたら、やはりセルの高さを常に自動的に取得して、その高さ分の値をCSSのスタイルに返して表示する様なJavaScriptを適用するしかない様に思われます。 ただ、当初の質問者様のご要望は、「一行内で垂直方向に中央揃えにした画像・テキストの、画像リンクのロールオーバー／テキストリンク色変更／セルの背景色変更、をセットで行う」という事であり、「セル内全てをリンク領域とする」ではなかった筈です。当初の目的はANo.5様の回答なり私のサンプルの合わせ技なりで、もう達成されているのでは？ちょっとご要望がスライドしてきている様に思われます。 本来、テキストや画像のないところがリンク領域になっているのも、ユーザビリティの上ではちょっと妙な感じのする仕様ですし…テキストリンクだけで画像っぽいナビボタン的に見せる場合等は別ですが。

iroha_168
質問者

お礼

ありがとうございます。 まず「リンクが無効」は「リンクとして機能していない」事を指しています。 そしてこれは私の言葉が不明瞭だったのかも知れませんが、質問内容の下記が「セル内全てをリンク領域とする」という事を意図しておりました。 > 2. 1-3の関連となりますが、現在、画像とテキストにリンクを貼っていますが、そうではなく列(またはテーブル)自体にリンクを貼る(リンクを1つにまとめる)ことは可能でしょうか？ > tableやtrにリンクを貼っても動作しなかったのですが、何か代替案があればご教示いただければと思います。 私は1のabrilさんのソースは上記を踏まえたうえで記載されたものと認識していたのですが、上記引用部分の「列(またはテーブル)自体にリンクを貼る」という私の発言が「セル内全てをリンク領域とする」という意図として伝わらなかったようです。 なお1の補足の下記の文章は上記引用部分の動作を達成していた事もあり、下記の発言をさせていただきました。 > そして教えていただいた記述を元にCSSで組み直したところ、今回質問させていただいた内容はすべて解決いたしました。 後、今回行いたいのはナビリンクとなります。 下記のようなナビリンクがあった際、枠内はすべてリンク領域にしたい(これが質問内容の2です)という意図でした(それ以外に、位置とか文字色とか背景色などの要望もありますが)。 －－－－－－－－－－－－－－－ │　　　　│　　　　　　　　│ │　画像　│　　テキスト　　│ │　　　　│　　　　　　　　│ －－－－－－－－－－－－－－－ │　　　　　　│　　　　　　│ │　　　　　　│　テキスト　│ │　　画像　　│　テキスト　│ │　　　　　　│　テキスト　│ │　　　　　　│　　　　　　│ －－－－－－－－－－－－－－－ それと今までご教示いただいた内容から、質問1-1,質問1-2,質問1-3,質問2の4項目すべての条件を満たし、かつ質問時点でのソースが実現していることを維持するのは難しそうな感じですので、今私が出来ることと出来ないことを踏まえ、その中で最善と思われる方法を採用してみたいと思います。 以上、よろしくお願いします。

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

「画像とテキストを垂直方向にセンタリング」する為にはどうしてもセルを分けた構造にしなければいけない、という点を最優先事項として、ちょっと発想を転換してみました。 IE6でも<a>以外で疑似要素":hover"が有効になるスクリプト、"csshover.htc"というのが下記にて配布されています（"Whatever:hover"、"どこでもhover"とかのキーワードでググっても出てきます）。 http://www.xs4all.nl/~peterned/csshover.html これを、CSS中でbodyのプロパティとして body { behavior:url("csshover.htc"); } （注：behaviorのurlには「その」CSSファイルからの相対パスではなく、「そのCSSファイルを読み込んでるHTMLファイル自身」からの相対パスとなる為、これを適用したいHTMLファイル側の階層が同レベルではない場合は、絶対パスで記述する事になります。） と読み込んでおくだけで、CSS中の":hover"がIE6でも有効になる為、あとはCSSで自由に":hover"を定義できる様になります。 下記は"csshover.htc"組み込んだ場合のファイル構成のサンプルです。 ─────────────────────────────────── ├ css │ └ sample.css ├ images │ ├ 1.jpg │ ├ 2.jpg │ └ 3.jpg ├ js │ └ csshover.htc └ index.html ─────────────────────────────────── 【CSS】 body { behavior:url("./js/csshover.htc"); }←このパスは上記の構成においてのみ有効 table.sample2 { width: 300px; border-collapse: collapse; } table.sample2 td { vertical-align: middle; padding-bottom: 5px; } table.sample2 tr:hover {←<tr>のどこにマウスが置かれても<tr>全体の背景色が変わる background-color: #cff; } table.sample2 td a { display: block; } table.sample2 tr:hover a {←<tr>のどこにマウスが置かれてもリンクの色が変わる color: #3f6; } table.sample2 td img { border: none; padding-right: 5px;←イメージとテキストの間の余白 } 【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" /> <link rel="stylesheet" href="./css/sample.css" type="text/css" media="all" /> <title>title</title> </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="sample2"> <tr> <td><a href="index1.html"><img src="images/1.jpg" name="Image1" width="80" height="60" id="Image1" /></a></td> <td><a href="index1.html">長いテキスト長い長い長い長い長い長い長い長いい長い長い長い長い長い長い長い長い</a></td> </tr> <tr> <td><a href="index2.html"><img src="images/2.jpg" name="Image2" width="80" height="60" id="Image2" /></a></td> <td><a href="index2.html">短いテキスト</a></td> </tr> <tr> <td><a href="index3.html"><img src="images/3.jpg" name="Image2" width="80" height="60" id="Image3" /></a></td> <td><a href="index3.html">長いテキスト長い長い長い長い長い長い長い長い長い</a></td> </tr> </table> </body> </html> あとは、既出のANo.5のスクリプトを流用して「<tr>にマウスオーバーされた際にイメージがロールオーバーする」という機能の部分を抜き出して再構成の上、適用すれば、上記のCSSと併せて全てのご要望を叶える事ができるのではないでしょうか。 ※まあでもANo.7でも書いた通り、（結局JavaScriptの力を借りるのであれば）全部をまとめたスクリプトで済ませられれば一番手っ取り早いですが。

iroha_168
質問者

お礼

ありがとうございます。 Whatever:hoverははじめて知りました。 そしてWhatever:hoverを使用した上で検証してみたのですが、こちらも文字が記載されてない箇所にマウスカーソルを合わせた際、背景は変わるのですが、リンクが無効になっていました。 私が調べた限りでは、このスクリプトはあくまで装飾をつかさどっており、リンク動作そのものをつかさどっているわけではないように見受けられたのですが、私の認識違いでしょうか？ 結果としてこのスクリプトは5番のyambejpさんのJavaScriptと同等機能のような気がします。 5番のyambejpさんのソースを一部削り、abrilさんにご教示いただいたのソースを一部足すと同等になるように見受けられました。 【5番のyambejpさんのソースから削るもの】 1.hoge.jsそのもの 2.hoge.cssの .t0 .trhover .text_link{ background-color:#CCFFFF; } .t0 .trhover .text_link a{ color:#33FF66; } 【変わりに追加するもの】 1.csshover.htcそのもの 2.hoge.cssに下記を追記。 body { behavior:url("./csshover.htc"); } .t0 tr:hover .text_link{ background-color:#CCFFFF; } .t0 tr:hover .text_link a{ color:#33FF66; } 私の勘違いでしたら申し訳ございません。 以上、よろしくお願いします。

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

> 詳しくは5番の補足に記載させていただきましたが、ご教示いただき、これで完璧かなと思ったJavaScriptのソースですが、リンク領域がテキストの上のみとなっており、tdの上とはなっておりませんでした。 No.5の回答者様のサンプルCSSでは、セル内のリンク<a>を特にブロック要素化はしていないので、それは当然の結果ですね。 > abrilさんのソースはtdの上すべてでリンクが有効だったので、abrilさんのソースを参考にさせていただき、横についてはtdの領域すべてでリンクが有効になったのですが、縦がうまくいかず手詰まりとなっております。 私のサンプルではセルを分けずに画像とテキストを一つのリンクの子要素としていますので、一行の高さは必ずセル内の子要素の高さと一致する事となり／<a>をブロック要素化している以上幅もセル幅と一致し、従って必然的にセル内全てがリンク領域となります。しかし、セルを分けた場合、<a>をブロック要素化しても縦の領域（高さ）は、セルの高さ一杯とはなりません。ブロック要素の場合特に指定しなければ、横（幅）は親要素の幅一杯となりますが、縦（高さ）に関しては「内包する要素の高さ」になるからです。 つまり本件（セルを分けた）の場合だと、同一行内の画像かテキストのいずれかの「相対的により高さのある要素の方」だけセルの中の全てリンク領域となり、一方の「相対的により高さのない要素の方」のリンク領域はセル幅×要素（テキストor画像）の高さとなる為、後者は必ずセルの上下にリンク領域でない箇所ができてしまう、という事です。 幅に比べると高さの解釈は色々とやっかいなもので、質問者様も"height: 100%;"など試行錯誤されていらっしゃる様ですが、この場合、行／セルの高さが明示されているわけではない（可変なのでできない）ので、「何（どこ）に対しての100%なの？」という事になってしまうんですよね。 ただ、前回も申し上げた通りセルを分けない限り、画像とテキストを垂直方向で常にセンタリングする、というのは実現が難しいです。なので、JavaScriptにもう一工夫加えられればベストだと思いますが。つまり「行のどこかにマウスが置かれた場合、そこがリンク領域であるか否かを問わず、画像・テキストリンク色・行の背景色全てをセットで変更する」というスクリプトにできれば質問者様の理想を叶える事ができるのでは、と思います。イメージとしては"tr:hover"の状態で全ての対象がロールオーバーする、という感じでしょうか。 残念ながら私はJavaScriptマスターではないので、実現方法をご提供することはできませんが…。

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

> なお文字の位置ですが、中央ぞろえしたいと思っておりますので、yambejpさんのソースをベースにJavaScriptを使用させていただこうと思います。 セルを分けずCSSのみを使う方法では文字の位置を中央揃えにできず、質問者様のご要望を叶える事ができない様ですので、その様にJavaScriptでまとめて制御されるのがベストでしょう。最後に以下の一点のみ、気になったので補足しておきます。 > ちなみにIE6で確認した所、真っ白な画面が表示されてしまいました。 おって実際にIE6/7で検証してみましたところ、上記の現象は起こらず、SafariやFirefoxと同様に問題なく表示されたのですが… ただ、改めてANo.4で記述したソースをコピペしてみたところ、コピペの際にゴミが入る様で一部の閉じタグに余計なスペースが入っていたのと、</style>の前に”//-->”を書き忘れていましたので、その当たりの記述ミスが影響したのかも知れませんね。

iroha_168
質問者

お礼

ご確認いただきありがとうございます。 詳しくは5番の補足に記載させていただきましたが、ご教示いただき、これで完璧かなと思ったJavaScriptのソースですが、リンク領域がテキストの上のみとなっており、tdの上とはなっておりませんでした。 abrilさんのソースはtdの上すべてでリンクが有効だったので、abrilさんのソースを参考にさせていただき、横についてはtdの領域すべてでリンクが有効になったのですが、縦がうまくいかず手詰まりとなっております。 その為、何か思い当たる事がございましたらアドバイスいただければと助かります。 それと4番のソースを再度IE6で動作させてみた所、真っ白にならず動作することを確認いたしました。 ”//-->”をつける前と後で動作が変わったので、これが原因だったみたいです。 ご指摘ありがとうございました。 以上、よろしくお願いします。

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

#4です。 idからclassへの移植は慣れればそんなに難しくありません。 以下参考になれば・・・ //hoge.htm <!--クラスが有効かどうかをみるため３つテーブルを用意--> <html> <head> <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/JavaScript" src="hoge.js"></script> </head> <table class="t0"> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第１テーブルの１行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第１テーブルの２行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第１テーブルの３行目。tableレイアウト長い文字バージョンです。</a></td> </tr> </table> <table> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第２テーブルの１行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第２テーブルの２行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第２テーブルの３行目。tableレイアウト長い文字バージョンです。</a></td> </tr> </table> <table class="t0"> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第３テーブルの１行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第３テーブルの２行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは第３テーブルの３行目。tableレイアウト長い文字バージョンです。</a></td> </tr> </table> </body> </html> //hoge.css .t0{ width:300px; } .t0 .text_link{ vartical-align:middle; } .t0 .trhover .text_link{ background-color:#CCFFFF; } .t0 .trhover .text_link a{ color:#33FF66; } .t0 .image_link img{ width:80px; height:60px; border:0px; } //hoge.js window.onload=function(){ var tables=document.getElementsByTagName("table"); for(var j=0;j<tables.length;j++){ if (tables[j].className!="t0") continue; t0=tables[j]; var tags=t0.getElementsByTagName("tr"); for(var i=0;i<tags.length;i++){ var tr=tags[i]; tr.trFunc=trFunc; tr.onmouseover=function(){this.trFunc('trhover');} tr.onmouseout=function(){this.trFunc('');} } } } function trFunc(cname){ this.className=cname; var tags=this.getElementsByTagName("img"); for(var i=0;i<tags.length;i++){ var img=tags[i]; var img1="images/1.jpg"; var img2="images/5.jpg"; if(img.src.indexOf(img1)>-1) img.src=img2; else if(img.src.indexOf(img2)>-1) img.src=img1; } }

iroha_168
質問者

お礼

ありがとうございます。 動作の方確認させていただき、希望通りの動作をする事を確認いたしました。 またソースにも一通り目を通させていただき、どういう手順を踏んでいるのかは何となく分かりましたが、いざ自分で組むとなるとまだまだ分からないので、これを気にJavaScriptの勉強をしてみたいと思います。 今回は大変お世話になりました。 それでは。

iroha_168
質問者

補足

いつもお世話になっております。 ご教示いただいたソースの検証を進めた所、もう一箇所希望の動作と異なる箇所がございました。 それは文字が記載されてない箇所にマウスカーソルを合わせた際、背景は変わるのですが、リンクが無効になっているという点です。 1番のabrilさんのサンプルソースではtd内全域がリンク領域と認識されていたのですが、5番のyambejpさんのサンプルソースではテキストの上のみがリンク領域となっているようです。 なおyambejpさんのサンプルソースでは文字が長い関係上、そのままの記述では右端でリンクが効かない事が確認できない為(文字の上や下はサンプルソースのままでもご確認いただけます)、「ここは第３テーブルの３行目。tableレイアウト長い文字バージョンです。」という文字を「ここは第３テーブルの３行目。」に修正し、文字の記載されてない箇所にマウスをあわせるとリンクが効かない事をご確認いただけるかと思います。 なおこちらで試した所、下記のスタイルを適用すると横については文字が書かれていない箇所でもリンク領域となりました。 .text_link a { display: block; width:100%; } しかし高さのリンク領域をtd内すべてにすることが出来ませんでした。 例えば下記の記述では効きませんでした。 .text_link a { height:100%; } また下記の記述では効くことは効いたのですが、今度はtrの高さにこの値が影響を及ぼすようになってしまいました。 .text_link a { height:100px; } その為、この点について何か思い当たる事がございましたら、アドバイスいただければと思います。 どうかよろしくお願いします。

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

> テキストが複数行の場合、2行目が画像の下に回りこんでしまいます。 > テーブルレイアウトの場合は、td内で改行されていたのですが。 では、下記でいかがでしょう（かなり強引な方法ですのでスマートではありませんが）。 【サンプル】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ （省略） <style type="text/css"> <!-- table.sample1 { width: 300px;←widthもCSSで定義。 border-collapse: collapse; } table.sample1 td { padding-bottom: 5px;←一行ごとに空きを持たせたければここで調整を。 } table.sample1 td img { display: block;←ブロック要素化して float: left;←左にフロート border: none;←borderもCSS上で一括して初期化 } table.sample1 td span.text { display: block;←ブロック要素化して float: right;←右にフロート width: 200px;←「セルの幅(300px) - 画像の幅(80px)」以下の値を設定。サンプルの様に少なめにする事で画像とテキストの間に一定の空きを設けられます。 } table.sample1 td a { display: block; float: left;←子要素の<img>と<span class="text">がfloatしている事で高さが失われる（高さが認識できなくなるとせっかくのセル全体に見える背景色がレンダリングされなくなります）のを親要素自身もfloatさせる事で回避（どこでも使える手ではありませんが今回の場合は<td>内で完結しているので他に影響はないと思います。）。 width: 100%;←セル幅一杯の幅を確保。 } table.sample1 td a:hover { color:#3f6; background-color:#cff; } </style> （省略） </head> <body> <table border="0" cellspacing="0" cellpadding="0" class="sample1"> <tr> <td><a href="index1.html"><img src="images/1.jpg" name="Image1" width="80" height="60" id="Image1" /><span class="text">長いテキスト長い長い長い長い長い長い長い長いい長い長い長い長い長い長い長い長い</span></a></td> </tr> <tr> <td><a href="index2.html"><img src="images/2.jpg" name="Image2" width="80" height="60" id="Image2" /><span class="text">短いテキスト</span></a></td> </tr> <tr> <td><a href="index3.html"><img src="images/3.jpg" name="Image2" width="80" height="60" id="Image3" /><span class="text">長いテキスト長い長い長い長い長い長い長い長い長い</span></a></td> </tr> </table> </body> </html> 現在出先の為、Safariでしか表示結果を確認できていませんので、他環境で不具合がある様でしたら後日改めて検証します。 なお、 > http://oshiete1.goo.ne.jp/qa2016072.html の書き込みを見ると、 の件ですが、上記は「横並びの画像とテキストの垂直方向の位置を（可変で）中央揃えに」というのがテーマですが、確かにセルを分けない構造でCSSのみでそれを実現するのは無理かと思います。なので、上記サンプルも残念ながら垂直方向は上揃えになっています。もしどうしても中央揃えにしたいのであれば、最初の構造の様にセルを分けた上で、それぞれのセルのスタイルに"vertical-align: middle;"を設け、ANo.3様の様にJavaScriptを編集し直すしかないと思います。

iroha_168
質問者

お礼

ありがとうございます。 ソースを確認させていただきました。 Firefox2ではabrilさんがご検証いただいたSafari同様「文字が上揃え」になる以外は大丈夫な感じでした。 なお文字の位置ですが、中央ぞろえしたいと思っておりますので、yambejpさんのソースをベースにJavaScriptを使用させていただこうと思います。 ちなみにIE6で確認した所、真っ白な画面が表示されてしまいました。 以上、よろしくお願いします。

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

こんな風にやるとわかりやすいかも・・・。 ・まずテーブルにidをふる ・イメージ用のtdとテキスト用のtdにそれぞれclassをふる ・trにonmouseoverとonmouseoutの処理をいれる //hoge.htm <html> <head> <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/JavaScript" src="hoge.js"></script> </head> <table id="t0"> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは１行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは２行目。tableレイアウト長い文字バージョンです。</a></td> </tr> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">ここは３行目。tableレイアウト長い文字バージョンです。</a></td> </tr> </table> </body> </html> //hoge.css #t0{ width:300px; } #t0 .text_link{ vartical-align:middle; } #t0 .trhover .text_link{ background-color:#CCFFFF; } #t0 .trhover .text_link a{ color:#33FF66; } #t0 .image_link img{ width:80px; height:60px; border:0px; } //hoge.js window.onload=function(){ var t0=document.getElementById("t0"); var tags=t0.getElementsByTagName("tr"); for(var i=0;i<tags.length;i++){ var tr=tags[i]; tr.trFunc=trFunc; tr.onmouseover=function(){this.trFunc('trhover');} tr.onmouseout=function(){this.trFunc('');} } } function trFunc(cname){ this.className=cname; var tags=this.getElementsByTagName("img"); for(var i=0;i<tags.length;i++){ var img=tags[i]; var img1="images/1.jpg"; var img2="images/5.jpg"; if(img.src.indexOf(img1)>-1) img.src=img2; else if(img.src.indexOf(img2)>-1) img.src=img1; } }

iroha_168
質問者

補足

ありがとうございます。 私がここであげさせていただいた希望はすべて満たされておりました。 また考え方についてのご説明ありがとうございます。 trにonmouseの処理を入れる発想はありませんでした。 それとこれは今回の質問には含まれていない項目となりますが、しばらくこのソースを触って検証していた所、下記の仕様を変更したいと思いました。 > ・まずテーブルにidをふる これはclassにした方が何かと使い勝手が良さそうだったからです。 その為class化に挑戦していたのですが、うまく動きませんでした。 下記のhoge.jsの var tags=document.getElementsByTagName("tr"); のdocumentに問題があり、下記のソースのままではtableにclass="t0"が付加されていない箇所でも中途半端に動作してしまいます。 変わりに var tags=document.getElementsByTagName("tr"); をコメントアウトし、代わりのその下の2行のコメントアウトをはずすと、今度はすべてのマウスオーバーが効かなくなります。 その為、一度私の書いたソースをチェックしていただけると助かります。 //hoge.js window.onload=function() { table = document.getElementsByTagName("table"); // タグ for (j = 0; j < table.length; j++) { // tableタグのclassが"t0"か否かチェックする。 if (table[j].className == "t0") { var tags=document.getElementsByTagName("tr"); // var t0=table[j].className; // var tags=t0.getElementsByTagName("tr"); for(var i=0;i<tags.length;i++){ var tr=tags[i]; tr.trFunc=trFunc; tr.onmouseover=function(){this.trFunc('trhover');} tr.onmouseout=function(){this.trFunc('');} } } } } function trFunc(cname){ this.className=cname; var tags=this.getElementsByTagName("img"); for(var i=0;i<tags.length;i++){ var img=tags[i]; var img1="images/1.jpg"; var img2="images/5.jpg"; if(img.src.indexOf(img1)>-1) img.src=img2; else if(img.src.indexOf(img2)>-1) img.src=img1; } } //hoge.css #t0を.t0に置き換えた以外は変更しておりません。 //hoge.htm <html> <head> <link rel="stylesheet" type="text/css" href="hoge.css"> <script type="text/JavaScript" src="hoge.js"></script> </head> <table class="t0"> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">͂PsځBtableCAEgo[WłB</a></td> </tr> </table> <table> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">͂QsځBtableCAEgo[WłB</a></td> </tr> </table> <table class="t0"> <tr> <td class="image_link"><a href="index1.html"><img src="images/1.jpg" /></a></td> <td class="text_link"><a href="index1.html">͂RsځBtableCAEgo[WłB</a></td> </tr> </table> </body> </html> いまさら要望には明記していない内容を提示してしまい申し訳ございませんが、どうかよろしくお願いします。 ※なお文字数制限の関係上、「この回答へのお礼」ではなく、「この回答への補足」に投稿させていただきました。

noname#100277
noname#100277
回答No.2

単純に「回り込み」を指定すれば良いのでは？ <img src="" alt="" title="" width="" height="" style="float:＃;" />文字列・・・・<br style="clear:＃;" /> ＃には以下の値を代入。 inherit…継承 none…指定無し left…左を解除 right…右を解除 both…両側を解除

iroha_168
質問者

お礼

ありがとうございます。 教えていただいたfloatを試してみた所、回答1の補足のテキストが複数行ある場合に、2行目が画像の下に回りこんでしまう現象が解決いたしました。 しかし他の問題が出てしまいました。 1. 文字が上揃えになってしまいました。 2. マウスを重ねると文字の上の背景しか変わらなくなりました。 http://okwave.jp/qa1171659.htmlの書き込みを見ると、floatを使用すると、vertical-align:middle;が無効化されているように読み取れましたが、これを解決する方法はあるのでしょうか？ ※なお文字数制限の関係上、続きは「この回答への補足」に投稿させていただきます。

iroha_168
質問者

補足

回答2の「この回答へのお礼」の続きとなります。 【ソースコード】 <!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_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];} } //--> </script> </head> <body onload="MM_preloadImages('images/5.jpg','images/3.jpg','images/6.jpg')"> <table border="0" cellspacing="0" cellpadding="0" width="300"> <tr> <td class="text_link"><a href="index3.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/6.jpg',1)"><img src="images/4.jpg" name="Image4" width="100" height="70" border="0" id="Image4" style="float:left" />CSSとfloatを使用したバージョン<br style="clear:both" /></a></td> </tr> </table> <br /> <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/4.jpg(任意の画像) images/5.jpg(任意の画像) images/6.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セレクト

質問する