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 と 画像フォルダ の部分を入れ替えてご利用ください。 視認性をよくするために改行を入れていますが、この改行は必ず削除してください。 つづき : compare / contrast (へっぽこサンプル その3)
by bucmacoto
| 2009-05-06 23:54
| wave
|
Comments(6)
Commented
by
mellon1 at 2009-05-07 07:52
こんにちは。
ついに、そちらも桜の季節になりましたね。 寒さに耐える地域だけあって、花びらが強靭にも見えます。 こっちは、GW後半から今日まで3日も雨が続いてるから、 写真も撮れないし、早く青空が見たいよ~。
0
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... もしもこれが原因でうまくいかなかったらご一報ください。 オホーツクでの今年の桜の足の速さにはびっくりです。。 早い木では葉桜が緑色になり始めていました。 まぁここでもサクランボや梅やスモモがまだ咲いていますし、札幌の平岡公園ならまだ梅が盛りではないでしょうか? (子育て中はよくあそこに行きました)
|
おきにいりすと
closing / sleeping
イラスト
わるとも
Photo plus α
からだ と こころ
archive in this blog
統計資料・PC史資料など
勝手に応援
machine translation
以前の記事 カテゴリ
タグ
日記録(345)
市内風景(296) 小さな説(255) 写真と画像(217) 詩もどき(180) 回顧(109) おふざけ(94) science(79) 備忘Log(65) &Tips;&code;(62) おはなし(61) 夢想(57) 冬雪景(48) nursery(36) (?_?)(30) star&moon(29) my function & character(29) aha♪ / esprit(28) work_list(22) 食記録(18) 若者への手紙(17) present(13) 一画一句(11) 文・人・理(9) 春花草木(8) 記事ランキング
最新のトラックバック
検索
その他のジャンル
ファン
|
ファン申請 |
||