Javascript：同じ位置に画像を切り替える

Question

on this websiteトグルした画像でトラブルが発生しています。

ご覧のとおり、左側にコンテンツの表があり、右側に1つの画像が切り替わります。

これらの画像は同じ位置にはないが、各画像は「下に」移動しています。

どうすればいいですか？

これは私が使用しているCSSコードとJSスクリプトです：（画像を隠すために）

CSS

.haus-a-one,.haus-a-two,.haus-a-three,.haus-a-four,.haus-a-five,.haus-a-six,.haus-a-seven,.haus-a-eight { 
display: none; 
} 

JS

<script> 
    jQuery(document).ready(function($){ 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-2.even", function() { 
$('.haus-a-one').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-3.odd", function() { 
$('.haus-a-two').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-4.even", function() { 
$('.haus-a-three').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-5.odd", function() { 
$('.haus-a-four').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-6.even", function() { 
$('.haus-a-five').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-7.odd", function() { 
$('.haus-a-six').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-8.even", function() { 
$('.haus-a-seven').toggle(); 
}); 

$(document.body).on("mouseenter mouseleave", ".tablepress-id-1 .row-9.odd", function() { 
$('.haus-a-eight').toggle(); 
}); 

}); 
</script> 

Answer 1

この

.so-panel { 
    margin-bottom: 30px; 
} 

は、各セルにマージン、したがって画像の高さも見えません。イメージを含むdivからこのスタイルを削除してください。削除

Answer 2

#pg-220-0, #pg-220-1, #pl-220 .so-panel { margin-bottom: 30px; }

はあなたの問題を解決していますが、それがもたらすことができるどのようなすべてのコンポーネントをチェックする必要があります。