タイトル下部のカテゴリーリンク作成

前々から作りたかったものをようやく作ってみました。
各カテゴリーに振り分けたリンクボタンです。



専門家の作るウェブサイトにはホームページのタイトル下部によく各カテゴリー別に
振り分けられたタブメニューが設置されています。
見ていてどうやって作っているんだろう…と気になっていた方もいると思います。

Tableタグやスタイルシートを使ったり、画像にリンクを指定したりして作られています。
ボタンの背景色にグラデーションが欲しかったので今回は画像を使って作りました。
なんだか少しプロっぽいデザインになったような気がします。（笑）
各パーツ（gif）は画像編集ソフトやグラフィック編集ソフトを使うと簡単に作成できます。

サイト全体のサイズから各パーツの大きさを決定して
Adobe Illustratorで自作しました。

マウスのカーソル（ポインタ）を合わせた時にパーツの色を変えるにはJavaScriptを
使います。（スタイルシートでも作成は可能？）
色違いの2つの画像パーツをそれぞれのパターンに指定して作成するみたいです。
JavaScriptのソースは各ホームページ作成支援サイトで参考にしてみて下さい。

（参考サイト）
TAG index > JavaScript > ポイント時に画像を切りかえる（1）
eweb > Webデザインテクニック > マウスを上に置くと画像を入れ替える
無料ブログ テンプレート カスタマイズ > オブジェクトの背景色を変化させる （DHTML）

上手く表示されるようにもう少し頑張ってみます。

イラストレーターをオンライン価格で簡単見積！