Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2017/09/24こんにちは(・∀・)今回はクリッカブルマップのご紹介です。3種類のサンプルをご用意しました。一つ目は通常のクリッカブルマップ。二つ目は通常のクリッカブルマップをJavaScriptでロールオーバーするクリッカブルマップ。三つ目はCSSでクリッカブルマップ風。クリッカブルマップ通常のクリッカブルマップです。JavaScriptでロールオーバーするクリッカブルマップサンプルをダウンロードして画像を見てもらえばわかりますが、マウスオンした時にボタンだけ入れ替わっているのではなく、画像全体が入れ替わる様になっています。CSSでロールオーバーするクリッカブルマップこちらもクリッカブルマップではありません、クリッカブルマップ風です。ボタン4つ目の中あき部分もマウスオンに反応してしまいます。hidden;}Resultサンプルデモクリッカブルマップの設定方法は、map要素【HTMLリファレンス】、area要素【HTMLリファレンス】のページを参考にしてください。座標の取り方はarea要素【HTMLリファレンス】のページに解説してありますがrect(四角)の場合、左上X、左上Y、右下X、右下Yをcoordsに記述します。画像をフォトショップで開いてカーソルを持っていくと情報ウィンドウのXYに座標が表示されますので画像の左上と右下にカーソルを合わせた時の座標をcoordsに記述してください。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。