マウスオーバーで画像を変更する方法について

2023/08/14 16:31

このQ&Aのポイント

マウスオーバーによって画像を変更する方法について知りたいです。
HTMLのソースコードでマウスオーバー時に画像を切り替えたいと思っています。具体的な方法がわかりませんので、教えていただけると嬉しいです。
画像の後ろに表示される文字の長さに関係なく、マウスオーバー時に別の画像を表示する方法を教えてください。

ベストアンサー

マウスオーバーで画像を変更する方法について

2011/06/12 14:41

下記のソースでマウスオーバー時に文字の後ろの画像を変更したいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。なお、文字の長さは可変のため、何文字になるかはわかりません。 <!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" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味<img src="http://oshiete.goo.ne.jp//images/2010renew/folder_s.png" alt="" width="15" height="13" /></a></li> </ul> </body> </html> 以上、宜しくお願いします。

iroha_168
お礼率89% (204/228)

HTML
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/13 20:20 回答No.3

　期待されていることがつかめなくて、必要そうなセレクタやプロパティは、説明まで付けてすべて入れておいたので、それらを組み合わせればできるはずです。　 <ul class="category"> ＿<li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> 　理想的なHTMLは、こうなるでしょう。　それをCSSでデザインするわけですから、まず、すぐナビゲーションリストとわかる場所にあれば、リストマークは要らないでしょうから、list-style:none;となりますね。　次にリンクの文字の後ろに画像を追加するセレクタ(擬似要素)とプロパティは、 Elemnt:after{content:url([]); でしたね。　ここで、訪問済み、未訪問、ホーバー、アクティブなど、A要素に対して動的な擬似クラスで、先の画像を変更していくわけですから、 ul.category li{ list-style:none; line-heigh:2em; margin:0.2em;} ul.category li a{ background-color:white; color:blue; } ul.category li a:visited{ background-color:silver; color:magenta; } ul.category li a:focus, ul.category li a:hover{ background-color:gray; color:red; } ul.category li a:active{ background-color:lime; color:green; } ul.category li a:after{ content:url(./images/arr_blue.gif); } ul.category li a:visited:after{ content:url(./images/arr_magenta.gif); } ul.category li a:focus:after, ul.category li a:hover:after{ content:url(./images/arr_red.gif); } ul.category li a:active:after{ content:url(./images/arr_yellow.gif); } となります。　先のものと、今回のもの、この二つのに書いてあるHTMLとCSSを組み合わせれば、ご期待のことはできるはずです。今回新たなセレクタやプロパティは追加されていません。　自分で考えて工夫しないと身につきませんよ。

質問者

お礼 2011/06/19 00:02

ご回答ありがとうございます。ご教示いただいたソースで意図した動作になったと思います。 <!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" /> <title>title</title> <style type="text/css">  </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> </body> </html> このたびはどうもありがとうございました。以上、よろしくお願いします。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/12 18:47 回答No.2

では、詳しく説明しておきます。文字列の長さが変わる場合もリンクボタンの大きさは変わらないほうが良いので、そのように書きます。'不要ならその部分を削除してください。' HTMLはシンプルに下記のようなものとします。＿はタブに変えてテストすること。(ＣＳＳも同じ) <ul class="category"> ＿<li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> [CSS] /* liの頭にul.categoryを半角スペースをおいておくのは、他の部分のliに適用させないため */ ul.category li{ ＿＿list-style:none;display:block;/* liをリストではなくブロックに変更 */ ＿＿line-height:2em; /* ブロックの高さの中央に文字を配置するため */ ＿＿margin:0.2em;padding:0; /* ブラウザによってliにmarginやpaddingがあるので消す */ ＿＿width:10em; /* 幅を固定する */ ＿＿text-align:center; ＿＿position:relative; /* アイコンの位置の基準とするため */ } /* 詳細度は12 */ ul.category li:after{ ＿＿content:url("./images/sample1_s.jpg"); /* 後ろにアイコンを追加する。(CSSからのパス!!) */ ＿＿position:absolute; ＿＿left:10em;top:0; } /* 詳細度23 */ ul.category li a{ ＿＿display:block; /* a要素をブロックに変更 */ ＿＿width:100%;height:100%; /* 上で設定したliいっぱいに広げる */ ＿＿text-decoration:none; /* リンクのアンダーラインは不要なので消す */ ＿＿background-image:url(./images/navi/navi1.gif); /* 背景画像を指定する。 */ } /* 詳細度13 */ ul.category li a:visited{ /* 訪問済みの設定 */ ＿＿background-image:url(./images/navi/navi2.gif); /* 画像のURL */ }/* 詳細度23 */ ul.category li a:focus,/* キーボードなどからフォーカスされたとき */ ul.category li a:hover{/* ポインティングデバイスが置かれたとき */ ＿＿background-image:url(./images/navi/navi3.gif); /* 画像のURL */ } /* 詳細度23 */ ul.category li a:active{ ＿＿background-image:url(./images/navi/navi4.gif); }/* 詳細度23 このように詳細度が同じになるので動的な擬似クラスはこの順番で書くこと */

質問者

補足 2011/06/12 22:03

ご回答ありがとうございます。ご教示いただいたソースを試してみましたが、下記が意図した動作と異なっておりました。 1. 文字の後ろとは文字の背景という事ではありません。下記の○の部分が文字の後ろとなります(参考までに△が文字の前となります)。 △ライフ○ △デジタルライフ○ △趣味○ 下記のソースを例にすると、arrow_green.pngが「ライフ」や「デジタルライフ」や「趣味」のすぐ後ろに表示され、arrow_green.pngや「ライフ」や「デジタルライフ」や「趣味」をマウスオーバーすると文字色や文字の背景が変わり、arrow_green.pngがarrow_blue.pngに変われば意図した動作となります。その際、arrow_blue.pngやarrow_green.pngの位置は今のように画面右側に固定ではなく、文字のすぐ後ろに表示されます。 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" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <ul class="category"> <li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> <li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> </body> </html> 以上、宜しくお願いします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/12 16:30 回答No.1

それだと、aがかかっているフォントの下だけの画像になりますが・・もう少し具体的なイメージを・・ HTML的には、 <ul class="category"> ＿<li><a href="http://oshiete.goo.ne.jp/category/214/">ライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/207/">デジタルライフ</a></li> ＿<li><a href="http://oshiete.goo.ne.jp/category/212/">趣味</a></li> </ul> だけでよいです。画像は文書構造上意味ないので・・ ul.category li{list-style:none;display:block;line-heigh:2em;min-width:6em;margin:0.2em;padding:0;} ul.category li:after{content:url("http://oshiete.goo.ne.jp//images/2010renew/folder_s.png);} ul.category li a{display:block;width:100%;height:100%;background-image:url();} ul.category li a:visited{background-image:url();} ul.category li a::focus, ul.category li a:hover{background-image:url();} ul.category li a:active{background-image:url();}

質問者

補足 2011/06/12 17:16

ご回答ありがとうございます。やりたいことですが、http://css-happylife.com/template/01/をもとにしますと、 1. マウスオーバーで文字色を変更したい(これは出来ていると思います)。 2. マウスオーバーで背景色を変更したい(これは出来ていると思います)。 3. マウスオーバーで画像を変更したい(これは出来ていません)。質問文の例で言えば、通常時は文字の後ろに青っぽいフォルダ画像が表示されていて、マウスオーバー時は文字の後ろに赤っぽいフォルダ画像を表示したいと思ってます。なお、画像は上記リンク先のように文字の前にあるのではなく、文字の後ろにあります。そして、文字の長さは可変のため、何文字になるかはわかりません。以上、宜しくお願いします。

関連するQ&A

IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
IE6、7で途切れてしまう画像
分からない部分が出た際にいつもお世話になっております。今回もどなたかご回答頂けますと幸いです。グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？）高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト"　width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。
- 締切済み
- HTML
IE６だと動かない　マウスオーバーで画像の入れ替え
以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。
- 締切済み
- CSS
リストを一行にせずに横並びにする方法
リストタグを一行にすると横並びにはなりますが、ソースが見ずらいです…。コメントを使わないで横並びにする方法はありますか？ ■html <ul><li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li><li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li></ul> ■css li { display: inline; } ↓のようにをとっても表示を一行にする方法があれば教えてください。 <li><a href="#"><img src="images01.gif" alt="" width="130" height="47" /></a></li> <li><a href="#"><img src="images02.gif" alt="" width="130" height="47" /></a></li>
- 締切済み
- HTML
cssスプライト　positionが効かない
現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか？？どなたか親切なかた宜しくお願い致します！！ <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }
- ベストアンサー
- CSS
CSSで縦長・横長の写真を一定に並べたい
写真のギャラリーのようなものを作成しています。写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。この写真を正方形の方眼紙に並べるように配置したいと思っています。テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。現在のソースは以下の通りです。 <!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" /> <title>ギャラリー</title> <style type="text/css">  </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。よろしくお願い致します。
- ベストアンサー
- HTML
画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。　　　　　　←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■　←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているようなかんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのがいけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
文字サイズ変更のjavascriptが動かない
現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。ページによって動かないので、何がいけないのかアドバイスお願いします！動くのは http://○○.jp/○○.html 動かないのは　http://○○.jp/○○/○○.html　のページです。以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } else{ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li></ul> ******************************************** 画像は表示されるのですが、全く動きません。よろしくお願いします！
- 締切済み
- JavaScript
リンクの下線のガタつきを解消する方法について
下記のソースを主要ブラウザで表示チェックした所、IE6でリンクの下線がガタついてしまいました。 http://ameblo.jp/coosytest/entry-10324805136.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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。 td * { vertical-align:middle; } ただし、これを行うとtwitterの画像が天地中央揃えになっていたのが、上揃えになってしまうようなので、この記述は有効のままにしたいと思います。また、下記を消してもガタつく現象が回避できることは確認しました。 body { font-family: "ＭＳＰゴシック","MS PGothic",Sans-Serif; } ただし、これを行うとこの部分のフォントが意図しないフォントになってしまうため、出来れば回避したいと思っています(回避策がなければIE6だけフォント指定を消すかもしれませんが)。 FirefoxやChromeなどで見た際の表示は今のソースのままで大丈夫そうなので、今の表示を維持したままIE6のリンクのガタつきを解消したいと思ったのですが、どうすれば良いかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。以上、よろしくお願いします。
- ベストアンサー
- CSS
ulの画像をcssのfloatで横並び、IEでの印刷が変（ソース記述のため長文です）
ulを使い、スタイルで画像を横並びにしたのですが、個々の画像サイズで印刷が正しくされる場合とされない場合があります。具体的ソースは下部に記述します。印刷すると、最初のulの方は画像が１つ折り返されてしまいます。 FFやNNは大丈夫でしたが、IEだけが印刷プレビューの段階から折り返されました。参考に、自分の環境も記載します。なぜなのか気になっておりまして…。どこか書き方がおかしいのでしょうか？おわかりになりましたら、よろしくお願いします。 ※長文すみません。 ★システム XP　 professional Version 2002 service Pack 2 ブラウザ　IE6.0.29 以下がソースです------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css" media="all">  </style> </head> <body> <div style="width:765px"> ■折り返される <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="217" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="139" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="216" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> <br> ■折り返されない <ul class="pageLink"> <li><a href="#a"><img src="img/a.gif" alt="" width="207" height="36" border="0"></a></li> <li><a href="#b"><img src="img/b.gif" alt="" width="159" height="36" border="0"></a></li> <li><a href="#c"><img src="img/c.gif" alt="" width="206" height="36" border="0"></a></li> <li><a href="#d"><img src="img/d.gif" alt="" width="193" height="36" border="0"></a></li> </ul> <br style="clear:both;"> </div> </body> </html>
- 締切済み
- HTML

マウスオーバーで画像を変更する方法について

マウスオーバーで画像を変更する方法について