Forum Discussion

amandaghui's avatar
amandaghui
Helper
10 years ago

Custom Content not functioning

Hi!

 

I was hoping I can get a little help on a custom component feature that isn't functioning properly. A 400 px by 400 px image is divided into 4 areas to link to other URLs, works when created with dreamweaver, used the same HTML codes in Studio and the links won't work (used in custom content).

 

Here's the code:

 

---------

 

<#assign message_list_title = text.format("custom.Still_Need_Help.title") />

<img src="image.png" width="240" height="240" alt="socialicon" usemap="socialicon">
<map name="socialicon">
   
    <area shape="rect" coords="0,0,120,120" href="link1" alt="Aide">
    
    <area shape="rect" coords="0,0,240,240" href="link2" alt="Facebook">
    
    <area shape="rect" coords="0,120,120,240" href="link3" alt="Compliment">
    
<area shape="rect" coords="120,120,240,240" href="link4" alt="Probleme">
  </map>

 

--------------------

 

I took out the official URL and used generic names.

Please help!

 

Thanks in advance.

  • sunny_mody's avatar
    sunny_mody
    Advisor
    10 years ago

    Hi amandaghui,

     

    I tried doing the same and it worked for me.

    I believe your code isn't working because your area co-ordinates for facebook link might be wrong.

     

    Could you please try the code written below :

     

    Show more
    <#assign message_list_title = text.format("custom.Still_Need_Help.title") />

    <img src="image.png" width="240" height="240" alt="socialicon" usemap="socialicon">
    <map name="socialicon">
        <area shape="rect" coords="0,0,120,120" href="link1" alt="Aide">
        <area shape="rect" coords="120,0,240,120" href="link2" alt="Facebook">
        <area shape="rect" coords="0,120,120,240" href="link3" alt="Compliment">
        <area shape="rect" coords="120,120,240,240" href="link4" alt="Probleme">
      </map>

     

     

    Thanks,

    Sunny

    • amandaghui's avatar
      amandaghui
      Helper
      10 years ago

      Hi there!

      Thanks for looking into it for me. I tried the page again and it's running!

       

       

    • amandaghui's avatar
      amandaghui
      Helper
      10 years ago

      Hi again! sunny_mody 

       

      I just realized that the codes work when I am opening the page with Google Chrome but doesn't seem to display with Firefox.

      Would you know how to go about this?

       

      Thanks a million!

      Amanda

      • sunny_mody's avatar
        sunny_mody
        Advisor
        10 years ago

        Hi amandaghui 

         

        I just tried doing the same in firefox and it worked. Below is the piece of code I have used.

         

        <img src="http://dummyimage.com/400x400/cccccc/000000.png&text=0x2B" alt="" usemap="#map1413871782102">
<map id="map1413871782102" name="map1413871782102">
	<area shape="rect" coords="0,0,200,200" title="google" alt="google" href="http://google.com" target="_blank">
	<area shape="rect" coords="200,0,400,200" title="yahoo" alt="yahoo" href="http://yahoo.com" target="_blank">
	<area shape="rect" coords="0,200,200,400" title="fb" alt="fb" href="http://facebook.com" target="_blank">
	<area shape="rect" coords="200,200,400,400" title="twitter" alt="twitter" href="http://twitter.com" target="_blank">
</map>

         

        Please try using this and see if it works for you.

         

        As far as browser compatibility is in concern, these HTML tags are supported by all browsers.

         

        Thanks,

        Sunny