クリッカブルマップのレスポンシブでJQuery使用のソースの書き方

WordPress
スポンサーリンク
スポンサーリンク

新しいサイトで、作成した1枚の地図(画像)でエリア毎にリンクを分たいからクリッカブルマップを使うことにしました。

地図のイメージ(リンクはありません)

地図のイメージ(リンクはありません)

こんな感じの地図作って、エリアごとにリンクするようにクリッカブルマップを作成したんだけど、レスポンシブデザインになってるので、スマートフォンで表示させると画面幅に合わせて縮小される。

そしたら、座標がおかしくなって、本来のエリアからズレてリンクしてしまうから、色々調べたらJQueryを使うことでクリッカブルマップをレスポンシブに対応できるのが分かった。

クリッカブルマップをレスポンシブにするjsファイル「jQuery RWD Image Maps」を使います。

ただ、ソースを後ろ側に書くこととJQueryを読み込むパスを書く必要があるので、初歩的なミスですが、忘れないようにメモとして書き残します。

スポンサーリンク
スポンサーリンク

クリッカブルマップをレスポンシブにするJQueryのコード

上記リンクのサイトを見てもらうと分かるんだけど、以下のようにコードを書く必要がある。

<script type="text/javascript" src="jquery.jsのパス"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.jsのパス"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>

最初見たときはヘッダーに書くものだと思ってヘッダーに書きました。

そしたら

Uncaught ReferenceError: jQuery is not defined

エラーになるんですね。どうやら、jQueryが読み込めてないもようです。

jQueryのソースはフッターなどの後ろに書く

なので上記jQueryのコードをクリッカブルマップの後ろに書きました。

<クリッカブルマップのコード…>

<script type="text/javascript" src="jquery.jsのパス"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.jsのパス"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>

そしたら、エラーは出なくなったんだけど、クリッカブルマップがレスポンシブになっってない。

jQueryライブラリのパスも記入する

なので「jQuery RWD Image Maps」作者のデモページのソースを確認。

そしたら自分のソースが思いっきり間違ってたのに気づきました。jQueryライブラリを読み込むパスを入れてなかったんですよ。

間違ったコード

<script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>

なんか、「jQuery RWD Image Maps」のjsファイルが2つあったからそのまま書いていました。

どうやら、1行目はjQueryライブラリのパスを読み込まないといけなかったようです。

で、そのjQueryを実行するパスは、jQueryからjsファイルをダウンロードしてサーバーで使う方法と、CDNから読み込む方法の2種類があります。なので、今回はCDNから読み込む方法。

Google Ajax API CDNhttps://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Microsoft CDNhttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js
jQuery CDNhttp://code.jquery.com/jquery-1.11.1.min.js

「Google Ajax API CDN」を使うことにしました。それでソースを修正。

<クリッカブルマップのコード…>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>

<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>

これで動作しました。「jquery.rwdImageMaps.min.js」はディレクトリのパスです。

まとめ。jQueryライブラリのパスも忘れずに記入する

凄く初歩的なことなんですが、jQueryのライブラリ入れないと動きませんよね。

てっきりGitHubにある「jQuery RWD Image Maps」のjsファイルをダウンロードしただけで使えたと思っていました(;^_^A

本当、jQueryを使う以前の問題でした

 

スポンサーリンク
WordPress
SNS(アカウント)・RSS
スポンサーリンク
コロロング