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 より:

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

  4. kodama より:

    とても初歩的な質問で恐縮ですが、

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

    とは、ダウンロードしてしたファイルをどこ(ファイル)に置けばよいのでしょうか?

    • Motoshige より:

      kodamaさま

      jsを読み込むときに、ファイルの場所を指定しますので、どこに置いても管理できる場所なら良いと思います。
      「jsを読み込ませますの下部のコーディング例の3行目」に記述しているのが、ファイルの位置とファイル名です。

      作例では、htmlと同階層になっています。

comment

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

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

関連記事

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

この記事は約 1 分で読めます。 「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。 そんな時、ほんの少しcssでクラス …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …