1

こんにちは、現在取り組んでいるサイトの単純なロールオーバー画像を試しています。Firefox で効果をテストすると、マウスオーバー効果によって Web ページ上の他の要素が移動します。これを修正する方法について何か提案はありますか?

<head>
<script type="text/javascript">
if (document.images) {
    img1 = new Image();
    img1.src = "training2.png";
} </script></head>

<body>
<script type="text/javascript">
function rollover(name, filename)
{
    var fullpath = '' + filename;
    document.images[name].src = fullpath; }
    </script>
<div id="trainingbutton"><a href="#" onmouseover="rollover('button1','training2.png');" onmouseout="rollover('button1','training.png')">
<img src="training.png" name="button1" border="0" alt="training"  /></a></div></body>
4

2 に答える 2

1

ロールオーバー画像に JavaScript を使用せず、通常の状態とホバー状態の両方を含むスプライトを作成するだけで、css の hover 属性を使用して背景位置をシフトできます。

このようなもの：

<a class="rollover">Link</a>

そしてスタイル：

a.rollover
{
    background-image:url('/images/background.png');
    background-position:top left;
}

a.rollover:hover
{
    background-position:bottom left;
}

この方法では、最初のリクエストの一部としてダウンロードされるため、ロールオーバー時にイメージをダウンロードする必要もありません。

于 2012-04-04T16:28:54.113 に答える
1

前の人が答えたように; スプライトは行く方法です。「ホバー」画像をプリロードする必要があります。それは純粋なCSSです。

例 (画像リンクのロールオーバー):

HTML:

<a href="#" class="mysprite">Join Newsletter</a>

非ホバーとホバー状態の両方の画像を 1 つのキャンバスに配置します。各「画像」の高さが 20px の場合、2 つを重ねると 40px になります。したがって、下の画像を表示するには、背景を 20 ピクセル上に移動するだけです(したがって、下のホバー状態では -20 ピクセル)。

CSS:

.mysprite {
    display: block;
    width: 100px;
    height: 20px;
    background: url('mysprite.png') no-repeat;
    background-position: 0 0; /* technically not neccesary, but illustrates the example */
    text-indent: -9999px; /* eliminates the link text so only the background image shows */
    font: 0px; /* eliminates IE displaying the text despite text-indent */

}

.mysprite:hover {
   background-position: 0 -20px;
}

基本的に、背景画像を下に移動して目的の画像を表示する「マスク」を作成します。

于 2012-04-04T16:40:58.073 に答える