１枚の看板の箇所によってリンク先を変える設定方法について

Question

お世話になっております。

前にメルマガか当フォーラムで見たような気がするのですが、
見つからないので質問させてください。

１枚の看板画像上の
「あす楽」の説明をしている個所をクリックすると、「あす楽」のカテゴリーページに飛び、
「ポイント10倍」や「送料無料」の説明をしている個所も同様に飛ぶようにしたいです。

やり方についてご教授下さい。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

一枚の画像上に複数のリンクをつけるには、
下記URLにて紹介されている「イメージマップ」という機能をご利用ください。
http://www.tagindex.com/html_tag/img/img_map.html

解説の通り、対象となる画像のタグにusemap属性を追加する必要があるため、
RMSトップメニュー ＞ 1-2 デザイン設定 ＞ 看板
よりご登録いただいた看板にはイメージマップが設定できませんので、
RMSトップメニュー ＞ 1-2 デザイン設定 ＞ ヘッダー・フッター・レフトナビ
にて、改めて看板画像を設置していただく必要があります。

Answer

田中さん

ご教授ありがとうございます。

イメージマップを使う場合は看板は削除したうえで、
ヘッダーにイメージマップを使った看板を設置すると
いうことですよね？

その場合はどのように従来の看板の位置に表示
させるのでしょうか？

サンプルソースをいただければ大変助かります。

よろしくお願いします。

Answer

ECマスターズの田中です。

＞イメージマップを使う場合は看板は削除したうえで、
＞ヘッダーにイメージマップを使った看板を設置すると
＞いうことですよね？

はい、ヘッダーに設置していただく形です。

＞その場合はどのように従来の看板の位置に表示
＞させるのでしょうか？

既存の看板含め、ナビボタンも、
必ずヘッダーコンテンツより上に表示される部分ですので、
それぞれ削除の上、看板とナビボタン用のHTMLを、
ヘッダーコンテンツの先頭にご記載いただく必要があります。

＞サンプルソースをいただければ大変助かります。

それでは、現在、看板とナビボタンを表示させているHTMLの構造をお送りしますので、
各URLをご変更の上、看板用画像にイメージマップを追加してご利用ください。

編集の際に、開始タグと終了タグ（となど）の数を合わせたままにしておかないと、
ページ全体のレイアウトの崩れにつながりますのでご注意ください。

= この下の行から ====================

  
    
      
        
      
    
    
      
        
          
            
            
            
              
                
                
                
                
                
              
            
            
              
            
            
            
            
            
              
                
                
                
                
                
              
            
            
              
            
            
            
            
            
              
                
                
                
                
                
              
            
            
               
            
            

          
        
         
    
  

= この上の行まで ====================

Answer

田中さん、ご丁寧にありがとうございます。

ただ、何か難しく感じて手付かずです＾＾；

このイメージマップと同じように三か所にリンクを貼りたいです。
http://www.tagindex.com/html_tag/img/img_map.html

まずは３か所の始点終点をペイントなどを使って調べ、それを
MAPにして、上記のURLに組み込むという感じですよね。

Answer

ECマスターズの田中です。

＞まずは３か所の始点終点をペイントなどを使って調べ、それを
＞MAPにして、上記のURLに組み込むという感じですよね。

基本的なやり方はその通りですが、
この設定を簡単に行うことができるWebサービスがありますので、
ぜひ、下記URLよりご利用ください。

HTML Imagemap Generator
https://labs.d-s-b.jp/ImagemapGenerator/

Answer

田中さん、ありがとうございます。

イメージマップが作成できました。

もしかすると






のhrefとaltを適切に変更して、
画像を看板の位置に表示するように設定すれば、うまくいくのではないでしょうか？

後は画像を看板の位置にどう表示するかをお教えください。

Answer

ECマスターズの田中です。

＞のhrefとaltを適切に変更して、
＞画像を看板の位置に表示するように設定すれば、うまくいくのではないでしょうか？

はい、正常にイメージマップが動くようになると思います。

＞後は画像を看板の位置にどう表示するかをお教えください。

前々回に申し上げたとおり、
既存の看板とナビボタンを削除の上、
新しく設置する看板とナビボタン用のHTMLを、
ヘッダー・フッター・レフトナビの中にある
ヘッダーコンテンツの先頭にご記載ください。

前々回にご案内差し上げたHTMLソースに含まれる



この１行を、今回作成していただいた








に置き換えていただき、
各src・alt・hrefを適切にご変更いただくことで、上手く動作するようになると思いますので
お試しください。