画像がサムネイルではなく、彼らのサイズが異なる場合は、あなたが選択した/アクティブな画像の幅と高さに基づいて、単一のコンテナの幅と高さを動的にすることができます。
HTML：
<div id="container"></div>
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
<img class="img" src="http://www.so.com/390px-Amtgard-300x200.jpg" />
CSS
#container{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
display:none;
}
.img{max-width: 80px; max-height: 80px; z-index: 10000;}
JS/jQueryの
$(document).ready(function(){
$(".img").hover(function(){
//on mouseenter
var img = $(this);
img.addClass("this");
var c = $("#container");
//change container width/height based on image size
c.css({width:img.outerWidth() + 20, height: img.outerHeight + 10});
//position container
c.css({top:img.offset().top - 10, left: img.offset().left - 10, position:'absolute'}).fadeIn("fast");
//reset other images z-index
$(".img:not(.this)").css("zIndex","1");
}, function(){
//on mouseleave
if(!$("#container").css("display","none"))
$("#container").fadeOut("fast");
$(".img").css("zIndex","4");
$(this).removeClass("this");
});
});
JSFIDDLE
説明
jQueryのはそこに最も強力なJavaScriptライブラリですが、私はあなたがそれはあなたのjavascriptのスキルを磨くと同様にあなたのUIのスキルを向上させるとして独占的にこれを使用する方法を学ぶお勧めします。通常、私はjavascript/jQueryを利用できるように、クラスとIDを使用してHTML要素を定義します。
.hover
私は詳しくhereに説明されている.hoverイベントハンドラを使用しています。このイベントハンドラを使用すると、単一のハンドラを使用してmouseenterとmouseleaveを定義することができます。最初の匿名関数はmouseenterを処理し、2番目の関数はmouseleaveを処理します。
の.css
このjQueryのメソッドを使用すると、その場であなたのhtmlのCSSにpractiallyあなたが欲しいものを行うことができます。
注： outerWidth（）、outerHeight（）またはwidth（）、height（）の結果は異なります。要素がbox-sizing:border-boxまたはborderのいずれであるかに依存するものを使用する。
の.css（ "のZIndex"、 "4"）
これはその場で編集CSS z-indexのjQueryの方法です。これは、#containerがアクティブではない他のイメージをオーバーラップさせる方法です。
$（この）
あなたは$(this)が貴重になっCSSクラスを持つイベントハンドラを（私はあなたができるだけ多くを使用する方法を学ぶお勧め）を使用。これにより、イベントハンドラ内のクラスから要素を分離することができます。
.addClass（ "本"）
addClass()とremoveClass()は、ユーザー体験を向上させることができる方法です。 私はこれがより長くするための要素を分離するために迅速かつ簡単な方法である私は、ボタンを無効にするか、それらを非表示にする必要がありhiddenとdisabledなど
.NOT（「本）
で、この多くを使用しますイベントハンドラは、スコープ内にある。私は、ドロップダウンリストで別名選択リストを、この多くを使用しています。いずれかと
フェードイン、フェードアウト（「速い」）（「遅い」）
使用このjQueryのメソッドhtml要素には、display: noneというプロパティがあります。それはあなたが要素が
あなたはそれがイベント処理に来るときを理解しておく必要があります一つのことを閉じるにはdisplay: none - block or inline
間のトグルオーバーアップグレードがある表示されているかどうかを切り替えることができますし、それが伝播されます！イベントハンドリングを処理する場合、イベントリスナーは次のイベントにリスンします：
A：イベントのタイプ ie：on（ 'click'）、on（ 'submit'）、on（ 'mouseenter' ）、（ '変更'）などに...
と
B：要素 すなわちのタイプ：クラス、またはhtml要素（すなわち：DIV、入力を選択し、ボタンなど。 。）
これは、要素が動的に作成される場合、特に誤った結果を引き起こす可能性があります。
イベントの伝播、イベントのバブリング、イベントの終了についてよく知っておいてください。
そのウィンドウのdivには4つのdivがあります。 '＃top'と'＃bottom'は4つのボーダーすべてを持っていますが、 '＃left'と'＃right'は1つのボーダーしか持っていません。 **動的な**フレームを作成できないコードはありますか？私が見ているのは、HTMLと不活性CSSです。 – zer00ne
div内の画像はどこにありますか？これは基本的にコンテナです。少しjQueryが処理できないものはありません。画像にクラスを追加し、イベントリスナーを使用し、 'this'を使用してdivコンテナにアタッチします。なぜ、コンテナを定義してinnerHtml要素を削除しないのですか？内側の要素はすべて同じですので、それらを削除するIMHO – yardpenalty
あなたはホバリングされたイメージ上のウィンドウをしたいですか？または、ホバリングされた画像をウィンドウの最下部に表示したいですか？ –