@nanakochi123456 (夜桜なの)posted at 2022-01-09

クリッカブルマップ、オワコンでしょうか？

Q&A

HTML5 レスポンシブ

解決したいこと

解決したいことは、外注したこのWebデザインに決定した上司を説得することです。

発生している問題・エラー

クリッカブルマップが正しく動作しない

該当するソースコード

<picture>
    <source media="(min-width:1921px)" srcset="image/PC_3840.png">
    <source media="(min-width:2161px)" srcset="image/PC_2600.png">
    <source media="(min-width:1921px)" srcset="image/PC_2160.png">
    <source media="(min-width:1681px)" srcset="image/PC_1920.png">
    <source media="(min-width: 992px)" srcset="image/PC_1680.png">
    <source media="(min-width: 414px)" srcset="image/SP_1284.png">
    <source media="(min-width: 375px)" srcset="image/SP_828.png">
    <img src="image/SP_750.png" usemap="test">
</picture>

<map name="test">
    <area shape="rect" coords="1574,241,1882,361" href="" alt="" />
    <area shape="rect" coords="1300,200,1600,310" href="">
    <area shape="rect" coords="300,800,650,930" href="">

　　　　<!--etc...-->
</map>

<!--あれ、こういう入れ方をするとusemap ってどこにいれるんでしたっけ-->

pngとありますが、対応ブラウザは .htaccessでlossしたwebpにリダイレクトさせています。

なお、画像についてはただ解像度別に用意したわけではなく、若干異なっています。

自分で試したこと

areaのリンク先は1か所ですが・・・・・

解像度別に該当箇所をなんでもかんでもareaにする

→結局右下半分以上ほとんどareaになってしまう。
→それなら全画面 <a href= しているのとほぼ同じで、画面が大きいので特にスマホで操作性が悪くなる

jQuery-rwdImageMaps、image-map-resizerを使う

→全然動いてくれない

以下にすることを説得したい

この１枚の画像はほとんどがビットマップですが、
リンク部分がベクターでできているので。
ビットマップの上にdivコンテナ追加してSVGを乗っけるようにと
上司の説得を得たいということです。

念のためですが

表示速度は最重要課題のように見えますが、実際にはそうではありません。
速度よりも最小限のギガしかユーザーに消費させず、かつ高画質になるように、
このようなことを最重要として行っています。

さすがに4KノートPCをモバイル回線で使われて閲覧されたら相応のギガを消費してしまいますが、そのようなケースは論外とします。

Are you sure you want to delete the question?