Adding an Image Map or Hot Spot

Image Preparation

  1. Using FireWorks or other image preparation software, create the image you want to map as a jpeg, png, or other web-friendly format.
  2. Save the image to your local computer disk.
  3. Create a new Block and upload the image.
  4. Assign the Block to the Region and page location. 

Prepare Image Map Setup

  1. Use the instructions provided by Adobe to create your image map file:
  2. Export the image map and open the HTML page that results in the export.
  3. Open the Block created in step #3 above.
  4. Change the text format to Full HTML
  5. Copy the Image map code from the HTML page into your Block, changing the image page to include the base path for your site (just add text that it bold).

    <img src=”/sites/default/files/images/exhibition-main.jpg” width=”260” height=”479” usemap=”#m_exhibitionmain” alt=”” />

  6. Make sure the references to the page are relative and do not include the full URL. Using the node reference is best in the event that the page name changes (and therefore the URL).
    <map name=”m_exhibitionmain” id=”m_exhibitionmain”>
    <area shape=”circle” coords=”87,258, 19” href=”/node/23” alt=”” />
    <area shape=”circle” coords=”56,58, 20” href=”/node/21” title=”Wadi Natrun Exibition” alt=”Wadi Natrun Exibition” />
    </map>
  7. Save the Block. This should work on phones, tablets, etc.