ちょっと変わった形のボタンがほしい。長方形だけでない、ひし形ボタンの実装方法

皆さんこんにちわ。

私のブログは、平日に多くアクセスいただくのですが、もしかすると同じようなWeb業界の方に見てもらっているのかなぁとおもいます。

参考になるかはわかりませんが、とてもうれしい限りです!!

もし気が向いたらいくらでもコメント受け付けていますのでよろしくお願いいたします。

 

さて、今回の本題なのですが、ちょっと変わった実装方法についてご説明させていただきます。

通常、HTML上にリンクを張ると、「display:inline」として表示されます。(インライン要素)

CSSで変更すれば「display:block」とブロック要素としても表示できますが、基本的にリンクの範囲は長方形型となるかと思います。

ボタン

Web上のボタンなどがいい例ですね。

 

最近変わったデザインのサイトを作成することが多く、今回実装が必要となった「ひし形」のボタンの実装方法をご説明させていただきます。

デモ

blank

 

つくり方

つくり方としてはまず、

1.空のブランク画像(透過画像)を配置(サイズはボタンとなるひし形を内包する長方形のサイズで表示)

2.空のブランク画像にidを振り分け、<map>タグにてひし形を作成

3.イベントがほしいときは<area>内にonclickなどで実装

というものです。以外に簡単。

つくり方によっては、どんな形のボタンでも実装できると思います。

 

javascriptでお手軽ひし形ボタン

今回のサンプルとして手軽にひし形ボタンを作成するJSファイルを簡単ではありますが用意いたしました。

 jquery.shape.js

上記ファイルをダウンロード後、ひし形ボタンにしたい画像を<a class=”shape_link” />でくくって下さい。

jQueryと上記のファイルを読み込むだけでひし形リンクに変換されます。

コメントを残す

メールアドレスが公開されることはありません。