日: 2016年2月14日

クリッカブルのレスポンシブ

<!--レスポンクリッカブル--->
<script type="text/javascript" src="/js/jquery.rwdImageMaps.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>
.d_mapbox2{margin-bottom:30px; width:100%;position:relative; display:none}

.d_mapbox2 img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}

ブート

@media (max-width: 768px) {
.d_mapbox{ display:none}
.d_mapbox2{ display: block}
}

<div class="d_mapbox2" > <img src="/img/test.png" usemap="#resp" id="#resp" width="730" height="385" alt="春日井mapメニュー"/>
            <map name="resp">
              <area shape="rect" coords="486, 195, 562, 250" href="/お店/地区/岩成台/" />
              <area shape="rect" coords="486, 139, 562, 194" href="/お店/地区/藤山台/"/>
              <area shape="rect" coords="620, 79, 703, 327" href="/お店/地区/石尾台/"/>
              <area shape="poly" coords="619, 310, 450, 311, 450, 181, 486, 181, 486, 250, 562, 250, 562, 233, 620, 233" href="/お店/地区/高蔵寺/"/>
              <area shape="poly" coords="618, 231, 621, 75, 545, 75, 545, 139, 564, 139, 564, 235, 618, 235, 615, 234" href="/お店/地区/高森台/" />
              <area shape="poly" coords="450, 7, 450, 182, 486, 182, 486, 139, 546, 139, 546, 75, 622, 75, 622, 5" href="/お店/地区/坂下/" />
              <area shape="poly" coords="450, 317, 314, 317, 314, 293, 342, 293, 342, 168, 450, 168"href="/お店/地区/南城/"/>
              <area shape="poly" coords="260, 79, 450, 78, 450, 169, 342, 169, 342, 183, 260, 183" href="/お店/地区/松原/" />
              <area shape="rect" coords="260, 182, 342, 299"  href="/お店/地区/東部/"  />
              <area shape="rect" coords="176, 9, 260, 167"  href="/お店/地区/鷹来/"  />
              <area shape="rect" coords="176, 167, 260, 295"  href="/お店/地区/柏原/"  />
              <area shape="rect" coords="24, 204, 77, 312"  href="/お店/地区/味美/"  />
              <area shape="rect" coords="74, 42, 176, 205"  href="/お店/地区/西部/" />
              <area shape="rect" coords="77, 204, 133, 353" href="/お店/地区/知多/"  />
              <area shape="poly" coords="133, 204, 133, 353, 317, 353, 317, 294, 176, 295, 176, 204" href="/お店/地区/中部/"/>
            </map>
            <!--城北線-->
            <a class="eki jyouhoku map_jyouhoku_ajiyoshi" href="/お店/最寄り駅/味美駅／城北線/#"> 味美駅</a> <a class="eki jyouhoku map_jyouhoku_kachigawa" href="/お店/最寄り駅/勝川駅／城北線/"> 勝川駅</a>
            <!--名鉄-->
            <a class="eki meitetsu map_meitetsu_ajima" href="/お店/最寄り駅/味鋺駅／名鉄/"> 味鋺駅</a> <a class="eki meitetsu map_meitetsu_ajiyoshi" href="/お店/最寄り駅/味美駅／名鉄/"> 味美駅</a> <a class="eki meitetsu map_meitetsu_kasugai" href="/お店/最寄り駅/春日井駅／名鉄/"> 春日井駅</a> <a class="eki meitetsu map_meitetsu_ushiyama" href="/お店/最寄り駅/牛山駅／名鉄/"> 牛山駅</a>
            <!--JR-->
            <a class="eki jr map_jr_kachigawa" href="/お店/最寄り駅/勝川駅／jr/"> JR 勝川駅</a> <a class="eki jr map_jr_kasugai" href="/お店/最寄り駅/春日井駅／jr/"> JR 春日井駅</a> <a class="eki jr map_jr_jinryo" href="/お店/最寄り駅/神領駅／jr/"> JR 神領駅</a> <a class="eki jr map_jr_kouzouji" href="/お店/最寄り駅/高蔵寺駅／jr/"> JR 高蔵寺駅</a> <a class="eki jr map_jr_jyoukouji" href="/お店/最寄り駅/定光寺駅／jr/"> JR 定光寺駅</a>
            <!--春日井市以外-->
            <a class="map_komaki" href="/お店/地区/小牧市/"> 小牧市</a> <a class="map_inuyama" href="/お店/地区/犬山市/"> 犬山市</a>
            <div class="eki_setumei">
              <div class="setumei se1">JR中央本線</div>
              <div class="setumei se2">名鉄小牧線</div>
              <div class="setumei se3">東海交通事業 城北線</div>
            </div>
            <div class="chiiki_setumei"> （中学校区別） </div>
          </div>

結果　ちいさすぎてつかわん

タクソノミーをドロップダウンでリンク　複数設置

<script type="text/javascript">
function sample() {
  var browser = document.fm.s.value;
  location.href = browser;
}
</script> 
<form id="dp_cat" action="#" name="fm">
<select name="s" onChange="sample()">

<option value="">月を選択</option>
<?php
$argv = array(
'orderby' => 'order', // PS Taxonomy Expander
);
$terms = get_terms('ciku', $argv);
foreach($terms as $value): 
echo "<option value=\"/お店/地区/".$value->slug."/\">".$value->name."</option>";
endforeach;
?> 
</select>
</form>

<script type="text/javascript">
function sample2() {
  var browser2 = document.fm2.s2.value;
  location.href = browser2;
}
</script> 
<form id="dp_cat2" action="#" name="fm2">
<select name="s2" onChange="sample2()">

<option value="">月を選択</option>
<?php
$argv = array(
'orderby' => 'order', // PS Taxonomy Expander
);
$terms = get_terms('nearest_station', $argv);
foreach($terms as $value): 
echo "<option value=\"/お店/最寄り駅/".$value->slug."/\">".$value->name."</option>";
endforeach;
?> 
</select>
</form>

参考

http://blife.boo.jp/643/

<script type=”text/javascript”>
function sample() {
  var browser = document.fm.s.value;
  location.href = browser;
}
</script> 
<form id=”dp_cat” action=”#” name=”fm”>
<select name=”s” onChange=”sample()”>
<?php
$argv = array(
‘orderby’ => ‘order’, // PS Taxonomy Expander
);
$terms = get_terms(‘dptopics_category’, $argv);
foreach($terms as $value): 
echo “<option value=\””.WWW_URL.”dptopics/”.$value->taxonomy.”/”.$value->slug.”/\”>”.$value->name.”</option>”;
endforeach;
?> 
</select>
</form>

お気にに入れたが
検索を使って　複数条件でタクソノミー　を　検索

http://satohmsys.info/wordpress-searchbox-dropdown/
zip保存
アーカイブ