ロールオーバー画像

こんにちは、私は現在取り組んでいるサイトの簡単なロールオーバー画像を試しています。 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>

出典

2012-04-04 user1313336

同じ解像度の画像を使用していますか？ – hjpotter92

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

例（画像リンクロールオーバー）：

HTML：

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

両方ご非ホバーを入れて、単一のキャンバス上の状態の画像を置きます。各「画像」の高さが20pxの場合、2つの画像は40pxになります。だから、下の画像のショーを作るために、あなただけでシフト背景まで20ピクセル（したがって、以下のホバー状態に-20px）

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-04 16:40:58

私は単純に通常の状態とホバー状態の両方を含むスプライトを作成し、CSSのホバー属性を使用して、あなたが背景位置を移動することができ、画像の上にロールのためのJavaScriptを使用していないだろう。

このような何か：

<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-04 16:28:54 jimplode

答えて

関連する問題