

はじめて質問させていただきます。

現在テンプレートのおみくじを使って背景画像を差し込みました。

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    </head>
    
    <style>
        body {
            background-image: url("images/TOP_BK.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
            text-align: center;
    
        }
    
    </style>
    </head>
    </html>
    
[/code]

この背景画像にイメージマップを作りたいのですが、以下のコードはどこに差し込むべきかご教示ください。

[code]

    <body>
    <map name="TOP_BK">
    <area shape="rect" coords="417,299,626,619" href="BP">
    <area shape="rect" coords="13,299,224,619" href="BS">
    <area shape="rect" coords="117,547,317,867" href="BJ">
    <area shape="rect" coords="324,547,524,867" href="BH">
    <area shape="rect" coords="324,51,524,371" href="BA">
    <area shape="rect" coords="120,51,320,371" href="BC">
    </map>
    
    <img src="TOP_BK.jpg" usemap="#TOP_BK">
    
[/code]

＊ちなみに背景画像内には6角形のイラストがあり、その6角形内をタップすると別ページへ行くようにしたいです。


CC BY-SA 3.0
2016-03-14T16:35:03.500
23133
2016-12-05T08:45:26.693
14785
question
monaca
背景画像のイメージマップ作成手順について


イメージマップは、画像(imgタグで表示される)の一部分にリンクを張るものです。背景画像に対しては、使えません。

解決方法は２つあります。

１．背景画像(background-image:
url("images/TOP_BK.jpg");)ではなく、imgタグで画像を表示し、そこにイメージマップを付ける。

[code]

    <body>
      <img src="TOP_BK.jpg" usemap="#TOP_BK">
    
     <map name="TOP_BK">
       <area shape="rect" coords="417,299,626,619" href="BP">
       <area shape="rect" coords="13,299,224,619" href="BS">
       <area shape="rect" coords="117,547,317,867" href="BJ">
       <area shape="rect" coords="324,547,524,867" href="BH">
       <area shape="rect" coords="324,51,524,371" href="BA">
       <area shape="rect" coords="120,51,320,371" href="BC">
     </map>
    
[/code]

２．背景画像はそのままにして、透明な長方形の画像をimgタグで表示し、そこにイメージマップを付ける。

HTMLは、上の例と同様で、使う画像が透明な長方形であることのみが異なります。  
背景画像と、透明な長方形の位置関係は、ブラウザによって異なるので、複数のブラウザで表示させようとすると、それぞれのブラウザ専用に修正したmapを使うといった工夫が必要です。  
背景画像を変更する事が許されない場合にのみ、検討してください。


CC BY-SA 3.0
2016-03-15T07:00:16.650
23154
2016-03-15T07:00:16.650
217
23133
answer