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

※参考にしたデモページのURL
http://css-eblog.com/eblog_sample/0901/css-remote-rollover/

回答の条件
  • 1人2回まで
  • 登録:2009/12/15 12:33:59
  • 終了:2009/12/15 14:59:08

回答(4件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/12/15 13:59:10

ポイント300pt

大きく2箇所。

(1)枠の位置とサイズ変更

#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にしてますので実際の画像に合わせてください。


(2)枠内に表示される画像の位置変更

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

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

ボーダーの幅が3pxなので(1)よりも3pxずらしてあります。

id:mathematician

回答ありがとうございました。早速試してみたのですが、拡大画像が右に大きくずれて表示されてしまいます。高さはあっているのですが、横がサムネイルの一番右のさらに右端より右側に表示されます。どこを修正すればよいでしょうか?

2009/12/15 14:24:18
id:ween No.2

ween回答回数78ベストアンサー獲得回数72009/12/15 14:09:33

ポイント300pt

ソースを見てみましたが

コメントを入れた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の位置*/
			}

id:mathematician

ご回答ありがとうございました。早速テストしてみましたが、拡大画像が大きく右にずれて表示されてしまいます。どうやら、4つのサムネイルの一番右端を基準にして、さらに40px右に表示されてしまうようです。どのように修正すれば枠の位置に拡大画像が表示できるようになりますのでしょうか?

2009/12/15 14:35:12
id:kaz No.3

kaz回答回数200ベストアンサー獲得回数422009/12/15 14:42:22

ポイント500pt

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

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

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

#imgHover ul li a:hover .mainImage {
display: block;
position: absolute;
top: 83px;   /* 上の top の値プラス3 */
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;
}
id:mathematician

ご回答ありがとうございました。早速テストしてみました。イメージに近いものができました。ありがとうございます。

2009/12/15 14:56:06
id:kn1967 No.4

kn1967回答回数2915ベストアンサー獲得回数3012009/12/15 14:52:30

ポイント50pt

(2)のleftの値を

left: -421px;

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

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

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


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

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

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

id:mathematician

早速のご回答ありがとございました。IEによる特殊要因と理解できました。

2009/12/15 14:57:24

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません