いつもお世話になっております。
以下の様にcssを組みました。
〔css〕
@charset "UTF-8";
#bnn0513 span {
display:none;
}
#bnn0513 a {
display:block;
width:212px;
height:102px;
padding:0;
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:link {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:visited {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:hover {
background-image:url(images/sample_ov.gif);
background-repeat:no-repeat 0 0;
}
#bnn1 a:active {
background-image:url(images/sample_on.gif);
background-repeat:no-repeat 0 0;
}
〔xhtml(一部)〕
<div id="bnn0513">
<a href="sample.html"><span>サンプル</span></a></div>
CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。
一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。
一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか?
java等他のプログラミングが入っても構いませんので方法をご教授ください。
宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
サンプル画像で検証しました。
確かにOpera9.61では初回のa:hoverの際にsample_ov.gifがうまく読み込まれない様です。UA側の仕様だと思いますので、これを回避するには、コンテンツを表示する際に予めJavaScriptでsample_ov.gifをプリロードしておくか、画像置換の方法をちょっと変える、といった対策があるかと思います。
前者は「JavaScript 画像 プリロード」などのキーワードでググるとサンプルがわんさか出てきますので、後者の方法のみ。
これもよく見られるCSSによる画像置換の手法なのですが、offとonの画像を2つに繋げて一つの背景画像として読み込み、a:hoverの時にはbackground-positionプロパティで背景画像の描画開始位置をずらす事でロールオーバー効果を出す、というものです。
つまり、現在使用されているsample.gif(W212px×H102px)とsample_ov.gif(同サイズ)を縦に二つ繋げて、W212px×H204pxの一枚の画像にします。これを仮にsample2.gifとします。
ちなみに、今回の件には影響してませんが、CSSにちょっと間違いや無駄がありますので先にその点を。
#bnn0513 a {
(省略)
background-repeat:no-repeat 0 0;←"0 0"の値はbackground-repeatのものではなく、background-positionのものです。削除して下さい(以下全ての疑似クラスでも同様)
}
#bnn0513 a:link {
(省略)
background-repeat:no-repeat;←この指定は#bnn0513 aのセレクタで既に指定されているので省略できます。(以下全ての疑似クラスで同様)
}
以上を含めた修正版です。
---------------------------------------------------------------------
(省略)
#bnn0513 a {
display: block;
width: 212px;
height: 102px;
padding: 0;
background: url(images/sample2.gif) no-repeat;
}
#bnn0513 a:link {
background-position: 0 0;
}
#bnn0513 a:visited {
background-position: 0 0;
}
#bnn0513 a:hover {
background-position: 0 -102px;
}
(省略)
---------------------------------------------------------------------
※#bnn0513 a:linkと#bnn0513 a:visitedの指定はディフォルト値なので省略してもかまいません。a:hoverとの対比が分かり易い様に明示しただけです。
なお、本件の場合はa:active時の画像も変えられている様ですので、正確にはsample_on.gifも更に付け足したW212px×H306pxの画像が必要になると思います。その場合は、上記のa:hoverと同様の考え方で、上記画像を作った上で、
#bnn0513 a:active {
background-position: 0 -204px;
}
と指定すればよろしいかと。
不具合ありましたら補足して下さい。
abril 様
お返事が遅れてすいません。
ご指摘ありがとうございます。
現在他の人が作ったCSSを修正している為、ポジションの記述の場所を勘違いしてしまいました。
"background-repeat:no-repeat 0 0;"の部分、修正致しました。
CSSでa:active時のボタンの見た目を変更できる方法が自分ではみつけられませんでしたが、abril 様の回答内容を読ませていただき、「その手があった!」とハッとさせられました。
ご提案、どうも有難うございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
particles.jsの背景の上にテキ...
-
iframe内をクリックさせない方...
-
CSSでテキストのリストの・...
-
帯を画面いっぱいに表示したい
-
画像で背景透明のテキストがに...
-
WEB上でディレクトリ内の画像を...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
ページの上下に白い横線が入る
-
htmlかcssで背景の白い枠をなく...
-
外部CSSで画像にリンクを貼りたい
-
テーブルセルの背景画像のサイ...
-
【至急お助け!】チェックボッ...
-
テキストの横にアイコンを並べたい
-
「HTML(縦スクロールバー付)...
-
IEで<div>の下の<img>がずれる
-
HTML・CSSコーディングが上手く...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報