- 北の空からみなみへ -
exblog staff

<< compare / contr... 懸濁乳化空気の月夜 >>
桜×五画(へっぽこサンプルその2)
2009年 05月 06日
post at 2009.05/06
last edit at 2009.05/09

応答が重そうなので画像はmore欄におきます。

上下左右の4隅に縮小画像を配し、そこでオンマウス(マウスオーバーともいう マウスポインタを対象に上にのせる操作)した元サイズ画像を中央に表示させる、前回のへっぽこサンプルの簡易版です。
説明も簡易版です・・・ ^^;

中央に表示する画像分の高さ(※)を指定し、上下にサムネール表示分のpaddingを設定。
上下padding上の右と左(つまり4隅)に、position:absolute で縮小画像を貼り付ける手法を採用です。

アップロードする画像サイズを [512px × 384px] に固定して、エキブロの画像表示マクロ(簡易タグ)を流用しています。

 ※このエキブロ簡易タグを利用した副作用として、CSS設定の Image(あるいは img や image_mid など)で設定された上下のマージンの分を考えて、div の高さと 上下の縮小判表示スペース分paddingを確保しないと、マウスオン・オフの度にぎくしゃくすると考えられます。

more欄に表示したサンプルのソースを、簡略化しつつも説明文っぽく示します。

<div style="position:relative;height:384px;background:black url('http://pds.exblog.jp/pds/1/画像フォルダ/下敷画像.jpg') no-repeat center;padding:133px 0;">
<a href="#" class="lnk"><span style="position:absolute;top:0;left:0">[#IMAGE|左上画像.jpg|画像フォルダ/|mid|173|128#]</span><span class="mon">[#IMAGE|左上画像.jpg|画像フォルダ/|mid|512|384#]</span></a>
<a href="#" class="lnk"><span style="position:absolute;top:0;right:0">[#IMAGE|右上画像.jpg|画像フォルダ/|mid|173|128#]</span><span class="mon">[#IMAGE|右上画像.jpg|画像フォルダ/|mid|512|384#]</span></a>
<a href="#" class="lnk"><span style="position:absolute;bottom:0;left:0;">[#IMAGE|左下画像.jpg|画像フォルダ/|mid|173|128#]</span><span class="mon">[#IMAGE|左下画像.jpg|画像フォルダ/|mid|512|384#]</span></a>
<a href="#" class="lnk"><span style="position:absolute;bottom:0;right:0">[#IMAGE|右下画像.jpg|画像フォルダ/|mid|173|128#]</span><span class="mon">[#IMAGE|右下画像.jpg|画像フォルダ/|mid|512|384#]</span></a>
</div>


エキブロに画像をアップした場合に、画像表示(マクロ)のタグは
 [#IMAGE|c0062295_2382742.jpg|200905/06/95/|mid|512|384#]
のようになっています。

コピペして 画像.jpg画像フォルダ の部分を入れ替えてご利用ください。 視認性をよくするために改行を入れていますが、この改行は必ず削除してください。




c0062295_2310346.jpg
c0062295_2310346.jpg
c0062295_23103752.jpg
c0062295_23103752.jpg
c0062295_23115477.jpg
c0062295_23115477.jpg
c0062295_23122691.jpg
c0062295_23122691.jpg




つづき : compare / contrast (へっぽこサンプル その3)
[PR]
by bucmacoto | 2009-05-06 23:54 | wave
<< compare / contr... 懸濁乳化空気の月夜 >>
<< compare / contr... 懸濁乳化空気の月夜 >>