- ベストアンサー
cssのimgに2つ設定。
cssのimgに2つ設定。 img {border: 0;} img{border: 0; ertical-align:bottom} この2つを使い分けしたいのですが可能でしょうか？ img以外の名前にするとやはり無理でしょうか。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＞ロールオーバーがcssでできるとは知りませんでした。 はい、簡単に・・ IE5,IE6では動作しませんが・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- html,body{ margin:0px; padding:0px; } body{ background-color: black;} body h1,body h2,body p{ background-color:white; margin: 0px 20% 0px 20%; width: Auto; padding: 0.5em; line-height:1.6em; } img{border:none;} body p.imageChange{ position:relative; } body p.imageChange span img{ visibility: hidden; } body p:hover.imageChange span img{ visibility: visible; position: relative; } body p:hover.imageChange img{ visibility: hidden; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <h2>画像の入れ替え</h2> <p class="imageChange"> <a href="./"><img src="https://cmm001.goo.ne.jp/img/logo/goo.gif" width="140" height="74"><span><img src="https://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="139" height="24" style="left:-140px;"></span></a> </p> </body> </html>
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞この方法では変化がありませんでした。 もう少し詳しくされたいことを書いてください。 ＞onMouseOver="ImgChange('△△△△','../img/000_b.gif')" と情報を小出しにせず、ひょっとして関係ないかもしれない情報も含めて詳しい情報がないと、適切なアドバイスは得られません。 ・何のためのonMousOverなのか ・画像のサイズ ・リンク内なのか ・ナビゲーションなのか など、具体的にはその要素までの木構造のすべて html |- body |- div class="Content" |- div class="navigation" |- ul |-- li |- img class="a" というふうに、そのスタイルを適用させたい要素の詳しい木構造がスタイルシートを適用させるためには絶対必要です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より 今回の場合、javascriptを使うならjavascriptで、スタイルシートを使うならスタイルシートで対応するほうが紛らわしくなくてよいです。
お礼
お恥ずかしいのですがロールオーバーがcssでできるとは知りませんでした。 一度javascriptを捨ててチャレンジしようと思います。 ありがとうございます。
- kawacchi
- ベストアンサー率83% (26/31)
自分の環境（winXP、IE6）ではNo.2さんの方法でうまくいきましたが・・・。 もしかして、「.img1」「.img2」のクラス以外に * { vertical-align:bottom; } img { vertical-align:bottom; } など、クラスに関係無くimg要素に「vertical-align:bottom」が 宣言されてしまうような記述をしていませんか？ 質問に書かれているimg { border: 0; vertical-align:bottom; }が 残ったままとか。
お礼
cssをもう一度チェックしましたがうまくいきません。 IE8で試してますが、もう一度最初から挑戦してみます。
- mamedo
- ベストアンサー率25% (7/28)
それでは、下記のようにしてみてはいかがでしょうか？ css には下記のように記述） img{ border : 0; } img.img1:hover img{ vertical-align : bottom; } html は以下） <img src="□□□□" class="img1"> 試してみてください。
お礼
ダメでした。状況は変わりません。。 IE嫌いです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
動的な疑似クラス（The dynamic pseudo-classes)を使います。 img{ border: none;} img:hover{ vertical-align:bottom;} でも、せっかくCSSで書くなら、onMouseOver・・・javascriptを使う必要もないような・・
補足
今のcssのimg{ border: none;} に img:hover{ vertical-align:bottom;} を追加してあげればいいのでしょうか？ この方法では変化がありませんでした。
- mamedo
- ベストアンサー率25% (7/28)
<img src="../img/000.gif" alt="○○○○" id="△△△△" onMouseOver="ImgChange('△△△△','../img/000_b.gif')" onMouseOut="ImgBack('△△△△')"> の場合、 <img src="../img/000.gif" alt="○○○○" id="△△△△" onMouseOver="ImgChange('△△△△','../img/000_b.gif'), this.className='img1'" onMouseOut="ImgBack('△△△△'), this.className='img2'"> としてみたらいかがでしょうか？ 「img2」と「img1」はクラス名です。 前文に書き忘れましたがスタイルシート内のクラス名の前には「.（ドット）」が必要ですが、ＨＴＭＬ内のクラス名にはドットは必要ありませんのでご注意ください。
補足
css .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} html <img src="../img/000.gif" alt="○○○○" id="△△△△" onMouseOver="ImgChange('△△△△','../img/000_b.gif'), this.className='img1'" onMouseOut="ImgBack('△△△△'), this.className='img2'"> やはり反応してくれませんでした(泣)
- mamedo
- ベストアンサー率25% (7/28)
クラス分けするとよいと思われます。 クラス名の前に「.(ドット)」をつけます。 タグの名称と被らないようにします。 以下例） スタイルシート内 .img1 {border: 0;} .img2{border: 0; ertical-align:bottom} ＨＴＭＬ内 <img src="?????" class="img1"/> <img src="?????" class="img2"/> 上記のように記入することで表示を分けることができます。
お礼
早速試してみたのですが、 ロールオーバーを使ってるので教えていただいた方法ではうまくいきませんでした(泣) <img src="../img/000.gif" alt="○○○○" id="△△△△" onMouseOver="ImgChange('△△△△','../img/000_b.gif')" onMouseOut="ImgBack('△△△△')">
お礼
cssありがとうございました。勉強になりました。 どうやらimgのvertical-align:top;が原因だろうと思います。 vertical-align:top;を取ればIE8で不自然な空きが解消されました。 回答にもあったimg1を適用してみたのですがうまくいきません。 申し訳ございませんがチェックしていただけますでしょうか。 ※imgは他のページで使ってるのでimg1しか触れません 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>