- 北の空からみなみへ -
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 | Trackback(1) | Comments(6)
トラックバックURL : https://bucmac.exblog.jp/tb/11481997
トラックバックする(会員専用) [ヘルプ]
Tracked from はまかぜマリンワールドの.. at 2009-05-09 09:31
タイトル : 5月の天候の特徴、北海道では唯一真夏日に!
5月に入り、GWも終わりました。本格的に学校、仕事もスタートしています。そういえばここ最近、天気がすっきりしない日が続いた気がします。今日は久しぶりに、青空が広がりましたが。ところで5月の天候は、下のようなイメージがあるといわれています。以下は、こちらの記事から引用しました。なお引用文は、区別をつけるため少し字を小さくしています。 5月は「風薫る5月」心地よいイメージですが、    「風変わる5月」でもあります。 風向きが北風から南風にバトンタッチ ⇒雨雲の原料になる湿った空気が入りや...... more
Commented by mellon1 at 2009-05-07 07:52
こんにちは。
ついに、そちらも桜の季節になりましたね。
寒さに耐える地域だけあって、花びらが強靭にも見えます。
こっちは、GW後半から今日まで3日も雨が続いてるから、
写真も撮れないし、早く青空が見たいよ~。
Commented by bucmacoto at 2009-05-07 19:37
☆ mellon さま

それが先月30日にいきなり最高気温25度がきて、3日4日と20度台にまで気温が上がっていたら、今日はなんと30度を記録です。 だしぬけに真夏日なんですよ!
先月の昭和の日までは朝の気温が7日連続の氷点下だったのに・・・(爆)

咲いたばかりの桜の花びらが夕方には散り始めておりました(花の命は短くて…)
いちおうこの記事には上品っぽい色白美人さんを集めたのですが、本州桜に目が肥えているmellonさんには無骨に見えたと・・・(そこまで書いてないって w
Commented by i0812n at 2009-05-09 09:29
こんにちは。北海道では、かなり暑くなり真夏日もでたようですね。氷点下から一気に、日中の真夏日なんてすごいものですよね。桜も一気に終わってしまいそうな気配すら感じられます。しかしすごいですね。

トラックバックのほう、後ほどはらせていただきます。なお、トラバする記事には、今回の北海道の真夏日の要因を、リンクしています。そちらも是非参照にしてください。
Commented by bucmacoto at 2009-05-09 15:39
☆ はまかぜまりん さま

近所のコンビニ店長のこの時期の口癖は「桜が咲いてから雪が降ることだってありますからね」というものです。
とはいえ最高気温30度の真夏日を過ぎてからの雪便りってはいくらなんでも・・・あったらブログネタにしたいと思います(笑)
急に暑いほどの夜を迎えたので、翌朝は喉が痛くなりました。
(他にも同様な人が複数存在しているのを確認済み)
ストーブを我慢して冬の寒さに対する耐性を獲得しても、急激な暑さではカゼ(あるいはB型インフルエンザ)にやられてしまう感じです ^^;
Commented by hokkaido-m at 2009-05-09 20:24
すごいです、こんな技あるんですねー
自分も使ってみたい (けど、仕切高い。。。かも)

桜は自分はまだ撮っていないのに、札幌では終わり???
乗り遅れましたー。きれいですね。。。明日撮れたらいいな
Commented by bucmacoto at 2009-05-09 22:08
☆YouOne さま

え? もしかしてやってみようとしてらっさはる < 動揺中
サンプルソース見直したらアンカータグ<a …>内に class="lnk" が抜けてました orz...
もしもこれが原因でうまくいかなかったらご一報ください。

オホーツクでの今年の桜の足の速さにはびっくりです。。
早い木では葉桜が緑色になり始めていました。
まぁここでもサクランボや梅やスモモがまだ咲いていますし、札幌の平岡公園ならまだ梅が盛りではないでしょうか? (子育て中はよくあそこに行きました)
名前
URL
画像認証
削除用パスワード
<< compare / contr... 懸濁乳化空気の月夜 >>
<< compare / contr... 懸濁乳化空気の月夜 >>