初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

【jQuery】クリッカブルマップをレスポンシブ対応させるjs「jQuery RWD Image Maps」の使い方

> JavaScript

クリッカブルマップでマークアップしたいとき、レスポンシブ対応させることができないかと思い調べたら余裕で見つかった。

 

しかも、要素の高さをそろえるjs「tile.js」なみに超絶簡単だったのは笑いがとまらないね!!ハハッ!♪

【超常用】要素の高さを揃えるtile.jsの使い方(javascript実践)

 

 

jQuery RWD Image Mapsの使い方

まずはjsファイルを下記URLからダウンロードする。

https://github.com/stowball/jQuery-rwdImageMaps

 

容量を少なくしてページ読み込み速度を早くするために「jquery.rwdImageMaps.min.js」の方を使いましょう。

 

そして、お好みのjsファイルに

 

$(function(){

 $(‘img[usemap]’).rwdImageMaps();

});

 

と書いて読み込めば完成。

 

【超常用】要素の高さを揃えるtile.jsの使い方(javascript実践)」のtile.jsの場合はセレクタを指定しなければいけないが、jQuery RWD Image Mapsはその必要はない。 実に簡単なjsである。。。

 

 

まとめ

まとめもくそもないが(笑)、クリッカブルマップを使ってマークアップした際には「jQuery RWD Image Maps」が超絶役に立ちます。

 

最近ではレスポンシブ対応のサイトがほとんど(全てといっても過言ではないかも…)なのでレスポンシブ化することは前提としてクリッカブルマップをレスポンシブ化できるのはありがたい。

 

 

駆け出しのwebデザイナー、webコーダーにとってこの記事が少しでも力になれたのなら幸いです。 それでは、今回はこの辺で。。。

 

 

 

 

関連記事

【Javascript】スクロールで要素を表示させる方法
物事を継続させることが成功の「最初の一歩」であり、「最大の一歩」。 どうも、 ジャバスクリプトを勉強中の管理人です。 私はweb制作の仕事を
【Javascript】ジャバスクリプトの基本文法【初心者向け】
web制作の現場で昨今非常によく使われているJavascript。 jQueryという非常に便利なツールが登場し、今ではjavascript
【bxsliderをif文の条件分岐で実行】要素の数によってスライダーを実装するかどうかを切り替える
こんにちは、管理人です。 今回は、要素の数によってbxslider(ボックススライダー)のスライダーを実行するか否かをJavaScriptで
【bxslider】最後のスライドが最初に表示されるバグの対処法
こんにちは。 今回はbxSliderのお話です。 スライダーのjsといえば bxSliderslickSwiper などなどありますね。 実



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です