タブ切り替えでのクリッカブルマップが動かない

yasuko

錦戸亮新曲AmazonMusicで配信中♪

以前の記事でも少し紹介したクリッカブルマップをレスポンシブに出来るライブラリ

jQuery RWD Image Maps

jquery.rwdImageMaps.min.jsを読み込んで

$(function(){
	$('img[usemap]').rwdImageMaps();
});

と1行添えるだけ。簡単。

だけど・・・

うまくいかないこともある

ページを読み込んだ時に（リサイズした時にも）要素のサイズを取得していい感じにしてくれるので、タブ切り替えなどでdisplay:none;を使っていたりするとクリッカブル要素のサイズが取得できないので、タブを切り替えた際に反応なし・・・

そりゃそうだよな・・・

タブを切り替えた時に再度サイズを取得してくれればいいじゃん！

解決法

$(function() {
	$('img[usemap]').rwdImageMaps();
	//タブ切り替え時処理
	$('タブとしてクリックされる要素').click(function() {
		$('img[usemap]').rwdImageMaps();
	});
});

もっとスムーズにかっこよく処理できる方法もあるかもしれないけど、

今の自分のチカラだとこれが限界でした・・・

yasuko

精進します