Creating Hot Spots on Images

If you want to use an image with clickable areas within that image, you need to create hot-spots on that image such that when a person clicks on a particular area on that image, he is redirected to the specified URL.

Put your image into a content editor web part, go to source editor and below is how you can do it:


<MAP id=MenuLinks1 name=MenuLinks1>

<AREA title="Scope definition and freeze" href="http://sydtelfev02:8888/Program%20Management/Forms/AllItems.aspx?RootFolder=%2fProgram%20Management%2fHigh%2dlevel%20Release%20Cycle%20and%20supporting%20exhibits%2fScope%20definition%20and%20freeze&FolderCTID=&View=%7b2F8702E0%2dCEC2%2d4708%2d895B%2dD0EEA0875678%7d" shape="rect" coords="  3, 79, 64, 160">

<AREA title="Capability Planning" href="http://sydtelfev02:8888/Program%20Management/Forms/AllItems.aspx?RootFolder=%2fProgram%20Management%2fHigh%2dlevel%20Release%20Cycle%20and%20supporting%20exhibits%2fCapability%20Planning&FolderCTID=&View=%7b2F8702E0%2dCEC2%2d4708%2d895B%2dD0EEA0875678%7d" shape="rect" coords=" 3, 172, 64, 232">

<AREA title="Change Plan" href="http://sydtelfev02:8888/Program%20Management/Forms/AllItems.aspx?RootFolder=%2fProgram%20Management%2fHigh%2dlevel%20Release%20Cycle%20and%20supporting%20exhibits%2fChange%20Plan&FolderCTID=&View=%7b2F8702E0%2dCEC2%2d4708%2d895B%2dD0EEA0875678%7d" shape="rect" coords=" 3, 239, 64, 289">

</MAP>

<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px" id=MenuImage border=0 alt=Menu src="http://sydtelfev02:8888/SiteCollectionDocuments/PictorialDocumentTemplate4.JPG" useMap=#MenuLinks1>

shape = circle

shape = poly

are also available.

Hope this helps-

Rehman.

Advertisements
  1. MHALL1
    May 5, 2011 at 3:46 pm

    Hi,

    I’m doing the above using rectangular hot spots but when I paste the code into the HTML Editor in the CEWP and click to Stop Editing the page, all of the shapes and coordinates are getting wiped out. Any ideas on how to fix that?

    We have SP 2010, on WinXP, and I used SPD 2010 to set the hot spots.

    Thanks.

  2. August 17, 2011 at 4:26 am

    I’ve same issue in SharePoint 2010 CEWP.

  3. August 18, 2011 at 5:18 am

    Are you copying from this page, if yes, paste into a notepad first and then to CEWP…..

  4. November 24, 2011 at 2:14 am

    Particularly well written piece of writing!!

  5. December 5, 2011 at 8:54 am

    You’r totally correct with this piece!!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: