- ベストアンサー
ロールオーバーで画像が変わらない(スタイルシート)
ロールオーバーしたときに画像を変えたいんですが変わってくれません。 ソースは <html> <head> <meta http-equiv="Content-Type" content"text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{background:#191A1C} img{border:none} a:haver{background-color:khaki;} #on1{background-image:url("img/top_on.jpg")} a:haver img{visibility:hidden} </style> </head> <body> <table width="800" border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="#" id="on1"><img src="img/top.jpg" width="80" height="35" border="0"></a></td> </table> </body></html> 関係なさそうなところは載せてないんですが以上です。 top.jpgをロールオーバー時にtop_on.jpgに変わるようにしたいんですがうまくいきません。
- sin11
- お礼率53% (145/270)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
それはJavaScriptの範疇ですか、ね。 スタイルシートで変更できるのは、背景だけだと思います。 もとの、top.jpgは背景ではなくページ上の画像なので、その方法では変更できません。 私が同じようなことをしたときには、 （スタイル定義部） .bg a{background-image:url(tile1.gif);} .bg a:hover{background-image:url(tile2.gif);} （HTML本体） <p class="bg"><a href="#">スタイルシートだけで</a></p> こんな風に記述しました。
その他の回答 (3)
- nuruhho44
- ベストアンサー率57% (38/66)
スタイルシートだけで画像のロールオーバーをやりたいということですね？ 残念ながら A:hover はアンカータグにしか効果がありません。アンカータグの背景を変えるようにしてください。 あらゆるブラウザで完璧に効果を出したいとお望みであるなら、諦めてJavaScriptでやられたほうがいいでしょう。
- shy00
- ベストアンサー率34% (2081/5977)
CSSでのロールオーバー（画像変更）については http://www.fromdfj.net/html/cssRollover.html が参考になるかと思います 再度、CSSの記述などを確認ください
こんばんは。 根本的な話ですが、一般的にロールオーバーにはJavaScriptを使用します。 どうしてもスタイルシートで実現したいですか？ だとしても、知る限りでは、背景色の変更までが限界だったと思いますがいかがでしょう？ 何か、サンプルでもあったのでしょうか。 念のために背景色変更の方法の解説ページを紹介しておきます。
関連するQ&A
- 背景画像のＸ方向繰り返し表示を止めたい
掲題の通り、Ｘ方向のみ背景画像が繰り返し表示されてしまいます。 テキストスペースも中央部のみの640ピクセルに収まるようにしていますが、背景画像の記述方法が解りません。 制御部分のソースは下記の通りです。 宜しくお願いします。 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- body { background-image: url(img/bg.jpg) background-repeat:no-repeart; } --> </STYLE> </HEAD> <BODY text=#333333 background="img/bg.jpg"> <TABLE cellspacing="0" width="630" align="center" border="0"> <TBODY> <TR> <TD align=middle> <TABLE width="100%" border="0"> <TBODY> <TR> <TD align=center bgColor=#228b22><STRONG><FONT color=#ffffff>『ご挨拶』</FONT></STRONG></TD></TR>
- ベストアンサー
- HTML
- DOCTYPEをStrictにするとtdに余白が表示される
こんにちは。 下記の様なhtmlを組み、枠を表示させてようとしているのですが、 DOCTYPEをStrictにすると、tdの上下に余白が表示されうまくいきません。 枠の画像を上下左右の４つに分解し、ブラウザ上で合体させようとしています。 どうしてもStrictで組みたいのですが、Strictでは無理なのでしょうか？ ★html★ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" charset="UTF-8" /> </head> <body> <table> <tr> <td colspan=3><img src="waku-top.jpg" /></td> </tr> <tr> <td><img src="waku-left.jpg" /></td> <td width=357px></td> <td><img src="waku-right.jpg" /></td> </tr> <tr> <td colspan=3><img src="waku-bottom.jpg" /></td> </tr> </table> </body> </html> ★css★ table{border:0;border-collapse:collapse;} tr,td{padding:0;} よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
- 画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？ 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
- 表示すると文字化けします
下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- 連続したonclick
<table> <tr> <td><img src="a001.jpg" onclick="document.body.style.backgroundImage = 'url(a001.jpg)'"></td> <td><img src="a002.jpg" onclick="document.body.style.backgroundImage = 'url(a002.jpg)'"></td> <td><img src="a003.jpg" onclick="document.body.style.backgroundImage = 'url(a003.jpg)'"></td> </tr> </table> ******************************* １ 背景画像の切り替え画像サンプルをつくりました。 これが何十行も連続します。 CSSみたいに同じ内容が重複するときにclassで分類するみたいに、 Javascriptでも簡素化する方法はないでしょうか？ ＜HEAD＞＜/HEAD＞内には <meta http-equiv="Content-Script-Type" content="text/javascript"> しか書いていません。（Javascriptは初心者です） ２ document.body.style.backgroundColor='#ffffff'; backgroundImageとかbackgroundColorの 後方のImageとかColorの頭文字は大文字でも良いのでしょうか？
- ベストアンサー
- JavaScript
- cssで表を中央寄せにできません。
ｃｓｓでテーブルを中央に表示させたいのですが、うまくいきません。 <!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"> <title></title> <style type="text/css"> <!-- table{ margin-left: auto; margin- right: auto ; background-image: url(2-3/1024sita.png); background-position: center; background-repeat:repeat-y; background-position: 50% 20%; } </style> </head> <body> <table border="0" width="1024"> <tr> <td><img src="2-3/1024by730.png" width="1024" height="730" border="0"></td> </tr> </table> </body> </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
- IE <a>要素の上にimgを置くと
<a>の上にimgを置きたいです。 以下の様に書きました。IE以外は赤のBOXの上でもimgの上でも リンクが生きてます。 でもIEはimgの上ではリンクが機能しません。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> a { display: block; background-color: red; width: 300; } </style> </head> <body> <a href='javascript:alert(0);'> <div style="position: relative; height: 300"> <img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'> </div> </a> </body> </html> どうしたらIEでも期待した結果を得られますでしょうか？ 以上、ご指導の程、宜しくお願いいたします。
- ベストアンサー
- CSS
- スタイルシートについて
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか？もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか？ ご返答、何卒、よろしくお願い致します。
- ベストアンサー
- HTML
