スマホ対応のイメージマップの作成

[sadaka38]

el-pianoを使用してのTOPページのデザインを現在検討中です。
「自社カタログの表紙画像を全面表示して、そこからイメージマップで各ページへリンクする」
というものを作ろうかなぁって思っています。
ですが、スマホにも対応できるレスポンシブデザインでは難しいとのこと。
やはり、
「レスポンシブデザインでイメージマップを使うにはjQueryプラグイン」
ということになるのでしょうか？

「jQueryプラグインの設定」は、初心者の私には若干、ハードルが高いことと、Digipressのバージョンアップ等の際に再度対応が必要になるのではないかと不安があります。

何か他に対応策はありますでしょうか？
自社カタログ表紙を背景画像に設定して、その上にギャラリーみたいに透明画像？を表示なども考えては見たのですが、何分、知識・経験不足ですので、よろしくお願いします。

添付ファイル:

添付ファイルを開くにはログインしてください。

[DigiPress サポート]

該当のjQueryプラグインでイメージマップをレスポンシブ化する場合であっても、テーマを直接編集する必要はありません。

個別のカスタマイズについては具体的にはサポート致しかねますが、イメージでは以下の要領で可能だと思われます。

●「Responsive Image Maps jQuery Plugin」の読み込み：

これは詳細設定の「HTMLヘッダー設定」→「headタグ内のユーザー定義」に指定すればこのプラグインをscriptタグで読み込めます。

直後に、イメージマップを使う対象を指定して rwdImageMaps()関数を実行させます。

<script type="text/javascript" src="js/jquery.rwdImageMaps.min.js"></script>
<script>
 j$(document).ready(function(e) {
    j$('img[usemap]').rwdImageMaps();
});
</script>

●イメージマップ用のコンテンツを表示：
あとは「コンテナエリア上部」や「メインコンテンツエリア上部」ウィジェットにテキストウィジェットを追加してイメージマップ用のHTMLを記述するだけで実現可能ではないでしょうか。

<img src="powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="" />
    <map id="powerpuffgirls" name="powerpuffgirls">
        <area shape="poly" coords="122,36,281,36,・・・" href="リンク先" title="The Powerpuff Girls" alt="The Powerpuff Girls" />
        <area shape="poly" coords="864,668,912,650,・・・" href="リンク先" title="Cartoon Network" alt="Cartoon Network" />
        <area shape="poly" coords="1010,298,995,281,・・・" href="リンク先" title="Buttercup" alt="Buttercup" />
        <area shape="poly" coords="571,101,563,83,・・・" href="リンク先" title="Blossom" alt="Blossom" />
        <area shape="poly" coords="254,286,232,271,・・・" href="リンク先" title="Bubbles" alt="Bubbles" />
        </map>

トップページのみに任意のウィジェットを表示したい場合は、以下を参考にしてください。

ページの種類ごとで表示するウィジェットを分ける方法

[sadaka38]

アドバイスありがとうございます。頑張って見ます！

[投稿者]

投稿