Webの記録

クリッカプルマップをjQueryでレスポンシブ対応させる方法

投稿日:

この記事は約 3 分で読めます。

android_mini
滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。
しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リンク位置がズレてしまう現象がおきます。
レスポンシブサイトで使用する場合は、「stowball/jQuery-rwdImageMaps」を使用すると、リンクズレが簡単に解決できたのでメモします。


「stowball/jQuery-rwdImageMaps」をダウンロード

stowball/jQuery-rwdImageMaps」のページからファイル一式ダウンロードします。

「jquery.rwdImageMaps.js」か「jquery.rwdImageMaps.min.js」のどちらかを使用します。

【デモページもありました】:http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html


使用方法

まずは普通にクリッカプルマップでコーディングしておきます。

//クリッカプルマップコーディング例(HTML)
<img src="画像のパス" width="xxx" height="xxx" alt="" usemap="#任意の名前"  />
<map name="任意の名前">
<area shape="rect" coords="開始座標位置X,開始座標位置Y,終了座標位置X,終了座標位置Y" href="リンク先URL" alt="">
<area shape="rect" coords="開始座標位置X,開始座標位置Y,終了座標位置X,終了座標位置Y" href="リンク先URL" alt="">
</map>

あとはjsを読み込ませます。

//js実装例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.rwdImageMaps.min.js"></script>
<script>
      $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
      });
</script>

これだけで、クリッカプルマップをレスポンシブ対応完了です!簡単でしたね♪

小さな画面からでも、リンク位置がズレなくなりました!

-Webの記録
-, , ,

執筆者:


  1. 高木 より:

    上記のようにレスポンシブ対応しましたが、Android端末ではクリックできましたが、iOS端末ではクリックできませんでした。
    何か対応策がありましたら、教えて頂けますでしょうか。

    • Motoshige より:

      高木さま
      はじめまして。コメントありがとうございます!
      返信遅くなり、申し訳ございません。

      随分前に試しにしたもので、諸事情で実際作ったものをアップできませんが・・・、iOS端末でもクリックできていたと思います。
      今手元にあるiPadでも、サンプルページのクリックはできました。
      特別iOSに対して、対策をとってなかったと思います。

      • 高木 より:

        ご回答ありがとうございます。
        iOS端末の最新版では不具合が修正されている様ですが、少し古いものですと出来ないようです。
        それに対応する方法は、いくつか別サイトにあり、やってみたのですが、それでは無理でした。
        何か御存知でしたら、ご教授頂けたら幸いです。

      • Motoshige より:

        高木さま
        返信遅くなりまして、申し訳ございません。
        すっかりハマり込んでいるいるようですね。
        大変ですね。。。

        私がこの記事を書いたときのバージョンでも、問題なかったと思うのですが、更に古い機種なのでしょうか。

        他の方のブログでiPhoneでの不具合を書かれていましたが、同じような状態でしょうか?
        http://notes25.net/htmlcss/iphone%E7%89%88chrome%E3%81%A0%E3%81%91%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AB%E3%83%96%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%81%8C%E3%81%8D%E3%81%8B%E3%81%AA%E3%81%84/

        私は高さを入れていたので、問題起きなかったから、最初から気付かなかったのかもしれません。

        その他の理由は、体験していないので情報を持っていないです。ごめんなさい。
        単純に画像の高さだけの問題だったら良いですね。

  2. 高木 より:

    ご回答ありがとうございます。
    上記も既にやってみたのですが、駄目でした。。。
    すっかりハマってしまいましたが、他にも色々やってみます。
    もし何かわかりましたら、ご連絡頂けると嬉しいです。
    お手数をお掛けしましたが、ありがとうございました。

  3. 高木 より:

    上記は既に試していたのですが、ご紹介があった為、もう一度だけ座標を入れ試してみると、
    なぜかクリックできました!
    ご紹介頂かなければ再度試していなかった為、とても助かりました。
    何度も申し訳ありません。ありがとうございました。

    • Motoshige より:

      高木さま
      無事に解決できたそうで、良かったですね。
      安心しました!
      わざわざご報告いただきまして、ありがとうございました。

comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「sidebar.php」の部分を作りたいと思います。 私が作りたいオリジナルテーマの「si …

no image

WordPressでオリジナルテーマ作りにチャレンジ7【page.php編】

この記事は約 1 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 前回までで一通り表示は出来るのですが、今回気になるのは固定ページ。 お問い合せフォームの上にページをい …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

右クリック禁止で画像のコピーガード(ドラッグ禁止対策追加)

この記事は約 2 分で読めます。 【2015.2.20追記】設置方法にドラッグ禁止についても、対策追加しました! 今、あるところのサイト制作をしているのですが・・・。 「画像の著作権を守るため、画像の …