0

私の個人的な Web サイトでは、onmouseover/を使用して基本的なアニメーションを作成しようとしていましonmouseoutた。最初の URL は小さい (50 x 50) グレー スケールの画像を表し、2 番目の URL は同じ画像ですがカラーです。

<a><img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"></a>

コードは機能しますが、いくつかの問題があります。画像リンクをクリックすると、デスクトップとモバイルの両方で画像が消えることに気付きました。ブラウザが新しい画像を読み込まないのは理にかなっていますが、より良い代替手段があるかどうか疑問に思っていました.

4

2 に答える 2

1

@minitech が言及しているように、CSS を使用する必要があります... HTML は次のようになります。

<a><div class="my_image"></div></a>

そしてCSS：

div.my_image {
    width: 50px;
    height: 50px;
    background-image: url('http://www.moo.com/blah.jpg');
}

div.my_image:hover {
    background-image: url('http://www.moo.com/otherblah.jpg');
}
于 2013-10-15T04:18:55.417 に答える
0

このような場合は、CSS と jQuery を組み合わせて使用​​するのが最適です。画像をサイトのルートまたは /img サブディレクトリに個別のファイルとして保存し、画像を変更するイベントに基づいてリンクにクラスを追加できます。

説明する簡単なコードを次に示します。

HTML:

<div id="backgroundImg"><a class="img-link" href=""></a></div>

CSS:

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-50x50.png') no-repeat;
    display: block;
}

#backgroundImg a.color {
    background: url('img/color-50x50.png') no-repeat;
}

そしてjQuery：

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

したがって、画像コンテナーを div として定義し、CSS を介して画像をリンク自体の背景画像として読み込み、ユーザーが .image-link 要素にカーソルを合わせたときにクラス名を変更します。

さらに一歩進んで、パフォーマンスのために 2 つの画像を 1 つの 50x100 画像スプライトに結合することができます。次に、CSS は次のようになります。

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-color-50x100.png') no-repeat;
    background-position: 0 0;
    display: block;
}

#backgroundImg a.color {
    background-position: 0 -50px;
}

それが役立つことを願っています。

于 2013-10-15T04:35:16.543 に答える