イメージマップをPCとスマホで画像が切り替わる場合に対応させたい

Question

実現したいこと

イメージマップをPCとスマホで画像が切り替わる場合に対応させたい

発生している問題

PCのイメージマップは反映できたが、スマホで画像が切り替わる際にPCのエリアが表示されてしまう

該当のソースコード

<!-- イメージマップPC -->
        <img src="assets/images/flow.png" class="pci" usemap="#ImageMap" alt="" />
        <map class="pci" name="ImageMap">
          <area class="pci" shape="rect" coords="-16,1,285,447" href="＃>
          <area class="pci" shape="rect" coords="311,-3,590,446" href="＃>
        </map>
        <!-- イメージマップSP -->
        <img src="assets/images/flow_sp.png" class="spi" usemap="#ImageMap" alt="" />
        <map class="spi" name="ImageMap">
          <area class="spi" shape="rect" coords="6,-3,340,178" href="＃" alt="" />
          <area class="spi" shape="rect" coords="8,192,339,326" href="＃>
        </map>

pciとspiはcssでPCとスマホで見える見えないを指定しています。
.pci {display: block;
@include sp {display: none !important;}}

.spi {display: none;
margin: auto;
@include sp {display: block;}}

試したこと

PC版をコメントアウトでスマホ版はスマホのエリアでうまく動きました。

Answer 1

usemapが同じだからではないですか？

usemap | <img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN

Comments

[tomi-]

usemapを別にして解決しました。
ありがとうございます。とても助かりました。