2011-01-28 10 views
0

私はjquery noobであり、画像の位置に問題があります。私は画像のsrc属性を取得し、それを "over"という属性の値に置き換えるjquery-hover関数を持っています。実際の画像の置き換えは正しく機能しますが、マウスオーバーイベントが発生するたびにロールオーバー画像がy軸の約10%下方に表示されます。私は、ロールオーバーイメージが別の位置に現れることなく、あるイメージの完全な重複「置き換え」を探しています。ここでは機能があります:次のようにjqueryロールオーバー画像の位置がずれる(jquery-hover)

function createRollovers() 
{ 
    var origImg =""; 
    $(".swapImage").hover (
    function() { 
     origImg = ($(this).attr("src")); 
     $(this).attr("src", ($(this).attr("over"))); 
    }, 
    function() { 
     $(this).attr("src", origImg); 
    } 
); 
} 

HTMLは次のとおりです。

<div id="rightSide"> 
    <img class="swapImage" over="images/principlesBar_hover.jpg" src="images/principlesBar.jpg" /> 
    <img class="swapImage" over="images/processBar_hover.jpg" src="images/processBar.jpg" /> 
    <img class="swapImage" over="images/productsBar_hover.jpg" src="images/productsBar.jpg" /> 
</div> 

私はそれがより多くの経験を積んだ、誰かがハートビートに見るであろうことは、非常にシンプルなものだと確信しています。助けを前にありがとう。

+0

ホバーイメージのような音が異なるサイズ...正確に同じサイズですか? –

+0

はい、各画像は180x773pxです(各ロールオーバーを含む)。私はこれがCSSの問題であると考えています。おそらく、コンテナのサイズが適切ではないかもしれません。ここにページがあります: http://test.blackcypresscapital.com/ 画像のロールオーバーの1つが正しく実行されます。レイアウトの問題があると思いますが、enamが提供する別のJavascriptメソッドを試してみます。私はあなたの提案を感謝します、ありがとう。 – phiNole

答えて

0

本当にJavaScript/jQueryは必要ありません。擬似クラスCSS :hoverを試して、要素の背景イメージを変更してください。

0

はい、私はAtesに同意します。しかし、CSSホバーはIE6などいくつかのブラウザのアンカータグでしか機能しません。単純なJSでこれを実装したい場合は、this link