異なるサイズの2つの画像を使用してCSSまたはJavascriptでロールオーバーを作成する

Question

ここに状況があります。

日曜日の紙にデジタル広告のようにデジタルギフトガイドを作成しています。私は3つのギフトカードタイプの画像を持っているフッタを作成しています。ロールオーバーにはイメージ交換が必要です。問題は、デザイナーがロールオーバーのために私に与えたイメージが、彼女がエッジに追加した輝きのために余分な高さと幅があることです。彼女はまた、私に7度の傾きのロールオーバー画像を送ってくれました。元の画像のピクセル単位の寸法はw = 156h = 96で、ロールオーバー画像はw = 206h = 154です（傾きと追加による）

私はJavaScriptを使用して画像を交換することにしました。かなり新しく、それは正しいかもしれないが、それは仕事をしている。問題は画像が入れ替わっていることですが、新しい画像は元の画像のスペースに収まるように縮小しています。この簡単なイメージスワップを実行する最善の方法は何ですか？

<a href="" onMouseOver="document.MyImage.src='img/Free-Gift(Roll).png';" onMouseOut="document.MyImage.src='img/Free-Gift.jpg';"> 
<img src="img/Free-Gift.jpg" name="MyImage" class="free"> 

</a> 

.free { 
    width: 156px; 
    height: 96px; 
    position: absolute; 
    top: 55px; 
    left: 352px; 
} 

.freeroll { 
    position: absolute; 
    width: 206px; 
    height: 156px; 

} 

Answer 1

あなたがクラスを設定し忘れている：

<a href="" onMouseOver="document.MyImage.src='img/Free-Gift(Roll).png';document.MyImage.className='freeroll';" onMouseOut="document.MyImage.src='img/Free-Gift.jpg';document.MyImage.className='free';"> 
    <img src="img/Free-Gift.jpg" name="MyImage" class="free" /> 
</a> 

は、しかし...これを行うには良い方法はCSSを使用して、があります：

<a href="" id="myRollover">Free Gift!</a> 

... 

#myRollover { 
    background-image: url('img/Free-Gift.jpg'); 
    width: 156px; 
    height: 96px; 
    position: absolute; 
    top: 55px; 
    left: 352px; 
    text-indent: -9999px; 
} 

#myRollover:hover { 
    background-image: url('img/Free-Gift(Roll).jpg'); 
    width: 206px; 
    height: 156px; 
} 

Answer 2

最近のロールオーバーを行う標準的な方法は、純粋なCSSです。 Javascreeeptを使う必要はありません。例：

<a href="#" class="rollover">&nbsp;</a> 

.rollover { 
    width: 156px; 
    height: 96px; 
    background:url('img/Free-Gift.jpg') no-repeat; 
} 

.rollover:hover { 
    width: 206px; 
    height: 156px; 
    background:url('img/Free-Gift(Roll).jpg') no-repeat; 
} 

これは、すべてのポジショニングコードBTWを除外します。今ここからあなたがやることのできることがたくさんあります。たとえば、 を使用する代わりに、アクセシビリティ/ SEOの助けとなる単語を入れてtext-indentにスタイルを設定して、単語を表示することができます。または、あなたが本当にそこにイメージを入れたいなら、それを入れ子にしてCSSセレクタを変更してそこにイメージを持たせることもできます（.rollover:hover img）。しかし、このような単純なもののためにjavascriptを使用しないでください。