イメージマップの画像差し替えについて

回答者様方、いつもお世話になっております。

現在とある求人情報サイトを開発しており、都道府県のマップを各市区町村をイメージマップでリンクにしているのですが、JavaScript（jQuery）で都道府県の画像を別の都道府県に変更すると、最新のFirefoxでイメージマップのリンクが機能しません。（Chromeでは問題なく動作しております）

つまりJavaScriptで後から表示した画像に対してイメージマップがうまく動きません。
（なぜかウィンドウサイズを変更すると動くようになります）
こちら対処法をご存じの方いらっしゃいましたら、お力をお借りしたいです。

該当コード

        <!-- 各都道府県マップ -->
        <img src="/img/map/osaka.jpg" class="eachMap" id="osakaMap" usemap="#OsakaMap" />
        <img src="/img/map/aichi.jpg" class="eachMap" id="aichiMap" usemap="#AichiMap" />
        <img src="/img/map/tokyo.jpg" class="eachMap" id="tokyoMap" usemap="#TokyoMap" />

        <map id="OsakaMap" name="OsakaMap">
            <area shape="rect" coords="82,603,121,620"  href="〜" alt="" />
　　　　　　　　　　　〜
        </map>

        <map id="AichiMap" name="AichiMap">
            <area shape="rect" coords="82,603,121,620"  href="〜" alt="" />
　　　　　　　　　　　〜
        </map>

        <map id="TokyoMap" name="TokyoMap">
            <area shape="rect" coords="82,603,121,620"  href="〜" alt="" />
　　　　　　　　　　　〜
        </map>

　　　　　// 大阪の地図表示
        $(".osakaButton").on('click', function() {
			$(".eachMap").hide();
　　　　　　　　　　　$("#osakaMap").show();
        });

　　　　　// 愛知の地図表示
        $(".aichiButton").on('click', function() {
			$(".eachMap").hide();
　　　　　　　　　　　$("#aichiMap").show();
        });

　　　　　// 東京の地図表示
        $(".tokyoButton").on('click', function() {
			$(".eachMap").hide();
　　　　　　　　　　　$("#tokyoMap").show();
        });