下層ページイメージ

新着情報

イメージマップ、今はあまり使わないかもしれないけど+レスポンシブ対応を追加

(最終更新日:

ホームページ制作を始めた10年前くらいに何度か使っていた「イメージマップ」機能。
画像やイラストの上にリンクが貼れる便利な機能です。

ここに来て、イラストレータで作成したイラストにリンクを貼るご希望があり久々に使っています。
バナーにリンクを張る場合でも、マウスオーバーの時は何かしらの動きがある昨今。
イラストにリンクを張っても、なにも動作がないとなかなかリンクとわかりづらいのが気がかりなのでこちらのjavasvriptです。

javascriptでマウスオーバー時に画像を変えることができます。

html

これならイラストにリンクが張ってあるのがわかるので安心です。

今回参考にさせていただいたサイトです
イメージマップでロールオーバー時の画像を変更する方法(javascript使用)

イメージマップレスポンシブにしたい場合に追加するjavascript

イメージマップを作成していて、ふと「レスポンシブにする必要がある」ことに気がつきました(おそい!)
そのままではリンクと画像がズレズレですよ(とほほ)

レスポンシブにするにはjavascriptが必要になります。
マウスオーバーの時のhtmlはそのままで、javascriptを追加するだけでオッケーなので楽々です。

作業自体はとても簡単なのですが、他のjavascriptとぶつかってしまって、その箇所を探し出すのに半日以上費やしてしまいました。。。

今回参考にさせていただいたサイトです
レスポンシブデザインでクリッカブルマップ(イメージマップ)対応にするjQueryプラグイン


« | »

こちらの記事もオススメです

新着情報一覧

ホームページ制作にまつわる便利な情報を長野より発信!