CSSで角丸ボックス、の再考

huevo@ws — Fri, 15 Jan 2010 18:23:11 +0000

CSSで角丸ボックスを作る時はボックスの上下に角丸にした画像をCSSで背景にして配置していますが、自分の今までのやり方は、

HTML:

 class="blockMid">角丸ブロックです。

 class="blockBtm">

としていました。この方法だとHTML-Lintで、「

の中に要素がありません」と怒られてしまう。表示上問題ないので今までほかっておいたんですが、そろそろ気持ち悪くなってきたのでちょっと考えてみました。要は要素が何か入っていればいいと。

以下のようにblockTopの中にblockBtmを入れ子にし、blockMidは削除。

HTML:

CSSはこんな感じ。

CSS:

◆サンプル

　角丸ブロックです。
　ソースも少しすっきり。

このやり方、きっと既出でしょうね。blockMidがいらなくなるので多少ソースもすっきりします。もっと早く気がつけばね〜。

CSSだけでなく、角丸ボックスにはいろいろな方法があるようで試してはいませんが、角丸ボックス・吹き出し：php & javascript roomにいろいろと載っています。

クリッカブルマップでのロールオーバー

huevo@ws — Fri, 15 Jan 2010 17:20:55 +0000

クリッカブルマップでロールオーバーで画像を入れ替える方法をメモ。javascriptを使って画像を入れ替えます。

◆サンプル

イメージタグに、例えば「map」というidをふり、getElementByIdでセットしたidの画像を指定したイメージに置き換える。

JavaScript:

HTMLは以下の通り。

HTML:

usemap="#Map" id="map" src="btn.gif" border="0" alt="test" width="200" height="200" />
id="map" name="map">
onmouseover="changeMapImage('btn-on.gif')" onmouseout="changeMapImage('btn.gif')" shape="circle" coords="101,100,70" href="#" />