1

画像のロールオーバー、JavaScript なし、リンクなし、純粋な CSS、コード検証、ブラウザ互換。

こんにちは、私はこのかなり簡単な解決策を考え出すために24時間苦労してきました. すべてが大丈夫かどうか、改善する方法があるかどうかを知りたいです。それは非常にエレガントです。

「ロゴ」という画像は 1 つしかありませんが、それぞれロールオーバー効果のある 2 つの異なるロゴとして表示されます。スプライト (4 つのロゴを含む 1 つの画像のみ) を使用し、その位置を変更するだけです。

ここで、画像をdivに挿入します

<div id="logo-rollover-1" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

次に、別の div に同じ画像を挿入しますが、ID は異なります

<div id="logo-rollover-2" class="logo-rollover">
    <img title="whatever" alt="whatever" src="path-to-your-image">
</div>

今私のCSS：

.logo-rollover {
    background: #ffd42a url('path-to-your-image');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

説明: 誰かが画像にカーソルを合わせると、画像が透明になり、背景の魔女が同じ画像であるが位置が異なることを示します。opacity: Firefox、Google の場合は 0、Explorer の場合は filter:alpha(opacity=0) です。.logo-rollover クラスの position: relative は、IE6 および IE7 との隠しオーバーフローの互換性のためのものです。表示ブロック; Opera ブラウザの id img に追加されます。

No Hack:リンクがない場合、href="#" や "javascript:void(0)" は必要ありません

利点: 4 つ (またはそれ以上) の画像を要求する代わりに、1 つの画像しかありません (1 つの画像スプライトの合計サイズは、4 つの合計サイズより小さい)。イメージはすでにダウンロードされているため、ロールオーバーは瞬時に行われます。ハッキングなし、偽リンクなし、コード検証なし。画像にタイトルを追加します。ロールオーバーしない唯一のブラウザは IE6 ですが、サイトは壊れていません。ロゴは正しく表示されます。IE6 のホバーを有効にするためのハックがありますが、IE6 が死んでいるので気にしませんでした。

ヒント: どこでも画像に同じパスを使用してください。つまり、「イメージへのパス」はすべての呼び出しで同じである必要があります。ブラウザのキャッシュが原因です。

これは最高のエレガントな方法ですか？このコードは改善できますか? ここで他のユーザーに感謝して開発するのは本当に苦痛だったので、誰かの助けになることを願っています ここでいくつかのトリックを見つけて、これを思いつきました.

コメントよろしくお願いします。

4

2 に答える 2

3

内部<img>を完全に削除し、CSS の背景を使用してロゴを作成してみませんか?

<a id="logo">Logo</a>

#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0; 
overflow:hidden; text-indent:-1000px; display:block; }

#logo:hover { background-position:0 -60px; }

説明：

<a>IE6 で :hover 疑似セレクターをサポートする唯一の要素です。ホバー ロゴのネイティブ ソリューションが必要な場合は、このタグを使用する必要があります。他の要素をラップする人もいます。例: <a><div></div></a>CSS からアクセスして div hover プロパティを指定するa:hover div { }

overflow:hidden; and text-indent:-1000px;div 内からテキストを非表示にします。アクセシビリティ上の理由から、テキストを内部に残すことをお勧めします。

backgrounddiv の背景色を設定します。最初は 0, 0 に揃えられます

background-position実際のトリックを実行して画像をシフトします。「ビューポート」div内で画像を移動して、画像の別の部分を表示します。

于 2011-05-25T09:51:19.413 に答える
0

いい説明！小さな改善点が 1 つあります。.logo-rollover クラスに background und no-repeat 定義を配置して、css コードを少なくします (2 回ではなく 1 回だけ記述する必要があります)。

于 2011-05-25T08:00:35.597 に答える