人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: mathematician
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS URL いただきます イメージ サイズ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kn1967
●300ポイント

大きく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ずらしてあります。

◎質問者からの返答

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


2 ● ween
●300ポイント

ソースを見てみましたが

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

◎質問者からの返答

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


3 ● kaz
●500ポイント

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

いちばん下の 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;
}
◎質問者からの返答

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


4 ● kn1967
●50ポイント

(2)のleftの値を

left: -421px;

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

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

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


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

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

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ