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

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【関数編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメ …

no image

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

この記事は約 1 分で読めます。WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。 しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画 …