5

マウスオーバー時にメインロゴを変更したい。

これを実現するにはいくつかの方法があることを理解しており、安定性、ブラウザーの互換性、効率性、およびセットアップの容易さのための最良の方法は何であるか疑問に思っていました。

私が見つけたいくつかの方法は次のとおりです。

  • 「src」属性のJavascript（jQuery）置換。
  • 背景と「ホバー」を使用したCSS

もう？何が一番？

4

8 に答える 8

10

結論

コンテンツの多い画像の場合src、HTML マークアップに を含める必要があります。Javascript ソリューションを使用して、ロールオーバー イメージを属性に配置します。

コンテンツのない画像 UI 要素、特にサイト全体で共通または複製されているものについては、直接的な CSS ソリューションが最適です (したがって、呼び出しごとに画像の場所を再宣言する必要はありません)。CSS ソリューションの中で、プリロードのオーバーヘッドを必要としないスプライトが最適です。

Javascript ソリューション

HTML:

<img src="/img/one.jpg" data-rollover="/img/two.jpg" />

jQuery の場合:

$(function(){
  $('img.rollover').hover(function(){
    var e = $(this);
    e.data('originalSrc', e.attr('src'));
    e.attr('src', e.attr('data-rollover'));
  }, function(){
    var e = $(this);
    e.attr('src', e.data('originalSrc'));
  }); /* a preloader could easily go here too */
});

サンプル実装: http://jsfiddle.net/dtPRM/1/

利点:簡単です。それは理にかなっている; ライブラリをセットアップしたら、最小限の追加マークアップで機能します。

欠点: Javascript が必要であり、jQuery ライブラリをロードするオーバーヘッドが必要です。

おそらく最良の選択肢です。ユーザーがロールオーバーに関連するブラウザーを使用している場合 (おそらくその場合)、ユーザーはこのオプションを実行する Javascript 機能を持っています。なんらかの理由で意図的に Javascript をオフにしている人々は<noscript>、完全な機能セットを取得できない可能性があることを少しメモしておくと、手がかりになります。

CSS ソリューション: 最高

HTML:

<div id="img1" />

CSS:

div#img1 {
  height: 400px;
  width: 300px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-position: top right;}

サンプル実装: http://jsfiddle.net/dtPRM/5/

個人的には、コンテンツの多い画像の場合、これは CSS + 2 つの背景画像のソリューションよりもさらに悪いオプションだと思います。HTML マークアップを表示のセマンティック値から分離しています。

ただし、UI 要素のようなコンテンツのない画像を使用している場合は、これが最善の解決策だと思います。

CSS ソリューション: こちらもOK

背景画像を含まない別の CSS オプションが利用可能です (意味的に意味のある画像のように、HTML に画像タグが必要な場合は、CSS ソリューションの中で推奨されます)。

<div class="rollover">
  <img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
  <img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>

CSS (:notここでは疑似セレクターを使用していますが、使用を避けるのは非常に簡単です。また、クラス名を意味的に逆に取得したと思います):

div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}

実装例: http://jsfiddle.net/dtPRM/2/

利点:すべての情報をスタイルシートに入れる以前の CSS ソリューションと比較して、意味的に賢明です。

欠点:不要なマークアップが必要です。

コメント:これは、ブラウザが要求するかどうかに応じて、自動的にプリロードされる場合があります。

結論: IE2 互換性または非 JS サポートが絶対に必要なため、オプション (1) が利用できない場合のまともなフォールバック。

CSS の解決策: 近づかない

これについては、質問で言及したからです。私はそれを使用しません。

HTML:

<div id="img1" />

CSS:

div#img1 {
  height: 400px;
  width: 600px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-image: url('http://dummyimage.com/600x400/fff/000');}

実装例: http://jsfiddle.net/dtPRM/4/

利点:幅広い互換性。本当にサポートする必要があるのは、背景画像とホバーだけです。

欠点:画像を CSS に入れ、そこに集中させるのは意味的に奇妙です。将来の変更をより困難にします。そうは言っても、ロールオーバー画像を正当化するシナリオがある場合、それは非コンテンツ画像 (UI 要素など) である可能性が高く、その場合、CSS は意味的に (おそらく) よりも適切です。通常のイメージ。以下のスプライトに関する注意を参照してください。

その他の欠点:画像の高さと幅の宣言には注意が必要です (いずれにせよ良い方法ですが、単に処理を実行したい場合は面倒になる可能性があります)。CSS の背景画像を異常に処理する可能性があるモバイル ブラウザーで表示しているユーザー。

さらに欠点:プリローダーをその上に重ねる場合は、Javascript を使用し、何らかの方法でロールオーバー可能な要素を選択することになります。その速度では、すべてに Javascript を使用することもできます。

結論:コンテンツの多い画像にはこれを使用しないでください。Javascript を避ける必要がある場合は、UI 要素にはスプライトを使用し、意味的に意味のある画像には別のソリューションを使用してください。

于 2010-11-23T20:19:20.823 に答える
4 
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}

次のような画像を使用します。

代替テキスト

注:画像が以前にキャッシュされていない場合、画像の読み込み時間が短くなるため、JS 画像の置換は避けてください。

これが仲間に役立つことを願っています！

W.

于 2010-11-23T19:49:14.970 に答える
3

背景と「ホバー」を使用する CSS

CSS スプライトを使用します。つまり、両方の画像を 1 つに結合してから、css を使用:hoverして画像をシフトします。

CSS を使用する利点の 1 つは、JavaScript がオフになっていても機能することです。

単一の画像を使用する利点の 1 つは、余分な HTTP 要求を回避できることです。

参照: http://css-tricks.com/css-sprites/

画像と CSS の生成に役立つツール:

于 2010-11-23T19:45:25.237 に答える
0

CSS スプライトと :hover 疑似クラスを CSS で使用します。理由は次のとおりです。

  1. JS または CSS を介して画像ソースを切り替えると、新しい画像がブラウザによってダウンロードされる間、最初のマウスオーバーで「点滅」が発生します。スプライトを使用すると、位置が変わるのは 1 つの画像だけなので、まばたきはありません。

  2. 画像が 1 つあると HTTP リクエストが減り、一般的にサイトの読み込みが速くなります。

  3. ユーザーが JavaScript を無効にしている場合に機能します。

  4. これは、すべてのブラウザ タイプでサポートされています (デスクトップ、いずれにせよ、:hover 状態のない電話ブラウザは、とにかくこれにはカウントされません)。

詳細: http://css-tricks.com/css-sprites/

于 2010-11-23T19:50:09.427 に答える
0

:hoverCSS ルールを使用する必要があります。

于 2010-11-23T19:41:45.987 に答える
0

はるかにCSS。ただし、JavaScript を使用して画像を事前にキャッシュすることもできます。

于 2010-11-23T19:42:11.307 に答える
0

「スプライト」を使用した画像のロールオーバーリストの一部 - スプライト CSS

于 2010-11-23T19:42:49.083 に答える
-1 
$('#div1').hover(function(){
  this.style.color='white';
},function(){
 this.style.color='black;
});

また

$('#div1').onmouseover()...
$('#div1').onmouseout()...
于 2010-11-23T19:45:56.630 に答える