人気ブログランキング |
- 北の空からみなみへ -
exblog staff

<< 極端な道 春花2009 update >>
はな花ハナ華 = 七変化(へっぽこサンプル)
2009年 05月 04日
ひっさ~~~しぶりに、htmlのへっぽこ技法を書いてみましょう。
 もしかしたら、いやおそらく、むしろきっと、分りにくい記事になるんだろうなぁ(苦笑)

前回記事 (どちらも別窓が開きます) に示した、CSSのA要素にマウスオーバー表示を施していると、この記事のテクニックが使用可能となります。

画像切り替えのCSS設定を利用して、複数画像を表示させようという企画です。
いつもと同じく、書きながら検証するので、記事完成までコメント不可としております。

こちらは雛形。 文字の代わりに画像を入れると画像切替え用途の箱として使えます。
(一応、512x512 の画像が入るサイズを仮作成してみました)




ソースを示します。 勘のいい方はこの色画像を縮小画像に変えることで、ユーザーが一覧からマウスのせによって拡大表示する、というように使えることがお分かりになるかもしれません。
<a name="box" ID="box"></a>
<div style="position:relative;height:572px;line-height:512px;text-align:center"><div style="height:40px;opacity:0.3;filter:alpha(opacity=30)"></div><a href="#box" class="lnk"><span style="position:absolute;left:5px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Red" style="background:rgb(255,0,0)"/></span><span class="mon" style="color:red">RED</span></a><a href="#box" class="lnk"><span style="position:absolute;left:74px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Orange" style="background:rgb(255,208,0)"/></span><span class="mon" style="color:orange">Orange</span></a><a href="#box" class="lnk"><span style="position:absolute;left:143px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Yellow" style="background:rgb(255,255,0)"/></span><span class="mon" style="color:yellow">Yellow</span></a><a href="#box" class="lnk"><span style="position:absolute;left:212px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Green" style="background:rgb(0,255,0)"/></span><span class="mon"style="color:green">Green</span></a><a href="#box" class="lnk"><span style="position:absolute;left:281px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Blue" style="background:rgb(0,0,255)"/></span><span class="mon"style="color:blue">Blue</span></a><a href="#box" class="lnk"><span style="position:absolute;left:350px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Navy" style="background:rgb(0,0,127)"/></span><span class="mon"style="color:navy">Navy</span></a><a href="#box" class="lnk"><span style="position:absolute;left:419px;top:0"><img src="http://pds.exblog.jp/pds/1/200607/05/95/blank.gif" width="64" height="36" border="0" alt="Purple" style="background:rgb(127,0,127)"/></span><span class="mon"style="color:purple">Purple</span></a></div>

post at 2009.05/04
last edit at 2009.05/17






昨日は勤務終了したのが日暮れたあとで、どのくらい桜が咲いたのかわかりませんでした。
今日は日中の最高気温が 24.7度を記録して、中にはみるみる3分咲き近くなったのもありました。

ただし、ここでは桜の代名詞ともいえるソメイヨシノは咲きません。 北限を越えていますので。

ほとんどがエゾヤマザクラという、すこし紅い色が花びらの先端に残りやすい品種です。
それにいつもとんびが空に常駐しているくらいに風の強い港街なので、すぐに桜の弱い花びらはボロっちくなってしまいます。

本州や道南の、貴婦人のような美しさや初々しさを得ることはできませんが、それでも田舎娘の素朴な美しさは味わえるというものです。 < さくらに失礼だ(陰のこえ)

Red
c0062295_2153910.jpg
Orange
c0062295_2171139.jpg
Yellow
c0062295_219135.jpg
Green
c0062295_21111664.jpg
Blue
c0062295_21183554.jpg
Navy
c0062295_21192282.jpg
Purple
c0062295_21232770.jpg
Red
c0062295_21244343.jpg
Orange
c0062295_21265643.jpg
Yellow
c0062295_21313281.jpg
Green
c0062295_2132176.jpg
Blue
c0062295_21322047.jpg
Navy
c0062295_21323697.jpg
Purple
c0062295_21333330.jpg
追記(ぼやき) > firefoxの表示を安定させたら、IEの表示が落ち着きなくなったぁぁ(泣)

あとは番外:
白いムスカリ
c0062295_21344013.jpg

やはり花弁数は6弁。。 なんというくさかしらん? (追記)> 結局ニリンソウらしい
(今日は葉っぱに斑も出てきていたし)
c0062295_2135317.jpg

しゃくなげ(もう咲いていた)
c0062295_21353784.jpg

c0062295_213832.jpg

この花は何でしょう? モクレンかと思っていたら違うっぽい。
追記)ベニシデコブシ(ヒメコブシ)とモクレンの交配種っぽいですが、未確認
c0062295_2136774.jpg

この均整とれて堂々とした花は白モクレンだそうです。 コブシですかと訊ねたら訂正されました。
c0062295_21423687.jpg




つづき : 桜五画(へっぽこサンプルその2)
by bucmacoto | 2009-05-04 21:43 | &Tips;&code;
<< 極端な道 春花2009 update >>
<< 極端な道 春花2009 update >>