Q&A
前提・実現したいこと
jQueryのプラグイン「RWD Image Maps」でイメージマップリンクをレスポンシブ対応さたいです。
どうぞよろしくお願いします。
発生している問題・エラーメッセージ
https://github.com/stowball/jQuery-rwdImageMapsからダウンロードしたjsファイルをHTMLに読み込ませ、Dreamewaverでイメージマップを作成したのですが、ブラウザで確認してもリンクになりません。
「北海道・東北」「北陸・甲信越」「関東」「関西」「中部」「中国・四国」「九州・沖縄」の所に四角のクリッカブルマップを指定しました。
該当のソースコード
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width"> 6<link href="css/reset.css" rel="stylesheet" type="text/css"> 7<link href="css/common.css" rel="stylesheet" type="text/css"> 8<link href="css/top.css" rel="stylesheet" type="text/css"> 9 10<!--jQuery本体--> 11<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 12<!--Font Awesome--> 13<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> 14<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 15<!--Google Web Fonts--> 16<link href="https://fonts.googleapis.com/css?family=Aclonica" rel="stylesheet" type="text/css"> 17<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet" type="text/css"> 18<!--フッター固定--> 19<script src="js/footerFixed.js"></script> 20<!--トップへ戻るボタン--> 21<script type="text/javascript" src="js/page-top.js"></script> 22<!--mmenu（右から出てくるメニュー）--> 23<link rel="stylesheet" href="css/jquery.mmenu.all.css"> 24<link rel="stylesheet" href="css/jquery.mmenu.positioning.css"> 25<script src="js/jquery.mmenu.all.min.js"></script> 26<script src="js/mmenu.js"></script> 27<!--slider-pro（メインスライダー）--> 28<link rel="stylesheet" href="css/slider-pro.min.css"/> 29<script src="js/jquery.sliderPro.min.js"></script> 30<!--jquery.rwdImageMaps.js（エリアマップ）--> 31<script src="js/jquery.rwdImageMaps.js"></script> 32<script> 33$(function(){ 34 $('img[usemap]').rwdImageMaps(); 35}); 36</script> 37</head> 38 39<body> 40<div id="sb-site"> 41 <div id="wrapper"> 42 <!-- ++++++++++++++++++++++++ main ++++++++++++++++++++++++ --> 43 <main> 44 <article> 45 <!-- +++++ コンテンツエリア+++++ --> 46 <div id="content-wrap"> 47 <!-- メインスライダー --> 48 <div class="slider-pro" id="slider1"> 49 <div class="sp-slides"> 50 <!-- Slide 1 --> 51 <div class="sp-slide"> <a href="#" target="_blank" ><img src="img/ad/main-1.jpg" class="sp-image" alt="メイン画像"/></a> </div> 52 <!-- Slide 2 --> 53 <div class="sp-slide"> <a href="#"><img class="sp-image" src="img/ad/main-2.jpg" alt="メイン画像"/></a> </div> 54 <!-- Slide 3 --> 55 <div class="sp-slide"> <img class="sp-image" src="img/ad/main-3.jpg" alt="メイン画像"/> </div> 56 <!-- Slide 4 --> 57 <div class="sp-slide"> <img class="sp-image" src="img/ad/main-4.jpg" alt="メイン画像"/> </div> 58 <!-- Slide 5 --> 59 <div class="sp-slide"> <img class="sp-image" src="img/ad/main-5.jpg" alt="メイン画像"/> </div> 60 <!-- Slide 7 --> 61 <div class="sp-slide"> <img class="sp-image" src="img/ad/main-6.jpg" alt="メイン画像"/> </div> 62 <!-- Slide 7 --> 63 <div class="sp-slide"> <img class="sp-image" src="img/ad/main-7.jpg" alt="メイン画像"/> </div> 64 </div> 65 </div> 66 67 <!-- end メインスライダー --> 68 <!-- エリア選択マップ --> 69 <div class="wrapper"> 70 <div class="container"> 71 <div class="wrapper-title"> 72 <h2><i class="fas fa-minus"></i>エリアで探す</h2> 73 </div> 74 <div class="erea_map"> <img src="img/common/img-erea-map.png" alt="" width="2047" height="888" usemap="#Map"/> 75 <map name="Map"> 76 <area shape="rect" coords="713,91,838,188" href="#" alt=""> 77 <area shape="rect" coords="524,185,649,282" href="#" alt=""> 78 <area shape="rect" coords="508,304,636,402" href="#" alt=""> 79 <area shape="rect" coords="348,207,473,304" href="#" alt=""> 80 <area shape="rect" coords="365,345,490,440" href="#" alt=""> 81 <area shape="rect" coords="188,241,314,336" href="#" alt=""> 82 <area shape="rect" coords="3,280,127,378" href="#" alt=""> 83 </map> 84 </div> 85 </div> 86 </div> 87 <!-- end エリア選択マップ --> 88 89 </div> 90 </article> 91 </main> 92 <!-- ++++++++++++++++++++++++ main END ++++++++++++++++++++++++ --> 93 </div> 94</div> 95<!--slider-pro（メインスライダー）--> 96<script> 97 $(document).ready(function(){ 98 $( '#slider1' ).sliderPro({ 99 width: 600,//横幅 100 arrows: true,//左右の矢印 101 buttons: true,//ナビゲーションボタンを出す 102 slideDistance:15,//スライド同士の距離 103 shuffle:true,//スライドをシャッフルするか否か 104 visibleSize: '100%'//前後のスライドを表示 105}); 106 }); 107</script> 108 109</body> 110</html>
試したこと
HTML
1<script src="js/jquery.rwdImageMaps.js"></script> 2<script> 3$(function(){ 4 $('img[usemap]').rwdImageMaps(); 5}); 6</script>
上記を隠すと、イメージマップのリンクがちゃんと表示されるのですが、レスポンシブ対応はできません。
一緒に使っているjQueryのスライドメニュー「mmenu」が問題かと思い削除して確認しましたが、同じ結果でした。
補足情報（FW/ツールのバージョンなど）
Dreamewaver2020
macOS Catalina
あなたの回答
tips
プレビュー
