【CSSによる画像表示位置指定方法】CSSを使って、サムネイル画像にマウスオーバーすると拡大画像が指定した位置に表示されるようにしたいと思っています。ある人が公開しているデモページのソースを参考に作ろうと試みましたが、拡大画像の表示位置指定方法がわかりません。下のデモページでは、拡大画像が横幅200pxと比較的小さいので、4つのサムネイルの横に並べて表示するようにしています。私の場合は、横600px、縦400pxくらいの画像を表示したいので、デモページの「ここに画像を表示」という黒い枠を、4つのサムネイルの下に、左端をあわせて表示したいと考えています。CSSで拡大画像を表示する位置とサイズをどのように変更すればいいか、ご教示ください。イメージ通りのソースを書いてくださった方には最低300ポイントを進呈させていただきます。

大きく２箇所。

（１）枠の位置とサイズ変更

#imgHover #imgFrame {
    border: solid 3px #999;
    position: absolute;
    line-height: 124px;
    text-align: center;
    top: 100px;
    left: 0px;
    width: 600px;
    height: 400px;
}

top: 100px; の数値を調整することで位置を上下に調整できます。

widthとheightはとりあえず600x400にしてますので実際の画像に合わせてください。

（２）枠内に表示される画像の位置変更

#imgHover ul li a:hover .mainImage {
    display: block;
    position: absolute;
    top: 103px;
    left: 3px;
}

top と left が画像の左上になる。

ボーダーの幅が３pxなので（１）よりも３pxずらしてあります。

ソースを見てみましたが

コメントを入れた5箇所の値を変えれば、位置を変えられます。

画像のサイズによっては調整が必要です。

#imgHover {
	position: relative;
	margin-top: 50px;
	width: 710px;
}
	#imgHover #imgFrame {
		border: solid 3px #999;
		position: absolute;
		left: 40px;            /*leftの位置*/
		top: 80px;　　　　　　　　/*topの位置*/
		line-height: 124px;
		text-align: center;
		width: 200px !important;
		width: 206px;
		height: 124px !important;
		height: 130px;
	}

	#imgHover #imgHoverList {
		list-style: none;
		position: relative;
	}
		#imgHover ul li {
			float: left;
			margin-right: 5px;
		}
			#imgHover ul li img {
				border: none;
			}
			
			#imgHover ul li a {
				display: block;
			}
			
			#imgHover ul li a:hover {
				position: static;
			}
			
			#imgHover ul li a .mainImage {
				display: none;
			}
			
			#imgHover ul li a:hover .mainImage {
				display: block;
				position: absolute;
				top: 80px;             /*topの位置*/
				left: 40px !important; /*leftの位置*/
				left: 40px;            /*leftの位置*/
			}

元ソースを変更する場合、

いちばん下の IE6 対策を追加して対応可能ですが、値の調整がやや面倒です。

#imgHover #imgFrame {
border: solid 3px #999;
position: absolute;
left 0;
top: 80px;   /* サムネイル画像の高さ + サムネイルからの余白 */
line-height: 394px;   /* 下から２番目の height と同じ値 */
text-align: center;
width: 600px !important;   /* サムネイル画像の幅 */
width: 606px;   /* 上の値プラス６ */
height: 394px !important;   /* 下の値マイナス６ */
height: 400px;   /* サムネイル画像の高さ */
}

#imgHover ul li a:hover .mainImage {
display: block;
position: absolute;
top: 83px;   /* 上の top の値プラス３ */
left: 3px !important;
left: 3px;
}

* html #imgHover ul li a:hover .mainImage {
left: -421px;   /* サムネイル画像全体の幅と同じだけマイナス */
}

全体を書き直したのが以下のものです。

各種数値は上とあまり変わらないので、だいたい分かると思います。

#imgHover {
position: relative;
height: 1%;
}

#imgFrame {
position: absolute;
width: 600px !important;
width: 606px;
height: 400px;
top: 80px;
border: solid 3px #999;
text-align: center;
line-height: 400px;
}

#imgHoverList li {
display: inline;
}

.mainImage {
display: none;
}

#imgHover ul li a:hover {
position: static;
}

#imgHoverList li a:hover .mainImage {
display: block;
position: absolute;
top: 83px;
left: 3px;
}

（２）のleftの値を

left: -421px;

に変更するか、あるいは、

left: -421px;
_left: -421px;
html>body left: -421px;

と３行にしてみてください。

※このあたりはブラウザの種類によって挙動が変わります。

手元に今Firefoxしかなく、IEでの確認を怠っておりました。

以上、回答欄を多く使用して申し訳ありませんが、訂正してみてください。