Image mapping using content editor webpart in SharePoint 2010
Last week, I got a request from a site owner whose site recently had been migrated to SharePoint 2010. He is having problem with one content editor webpart. The content editor webpart has an image and it has couple of hyperlinks (image mapping). This hyperlink was working perfectly in WSS 3.0, however after migrating the site, the hyperlink doesn’t seems to be work anymore.
The objective is to create a simple content editor webpart at SP 2010 team site and configure one image there with the hyperlinks using existing HTML image mapping code from WSS 3.0. It seems to be pretty simple, however while implementing, couple of issues comes out. Below are the steps explaining how to map an image using content editor webpart in SharePoint 2010 team site.
Open the SharePoint 2010 team site using IE and then browse the site >> Click on ‘Page’ and then click on ‘Edit Page’ >> Click on ‘Add a Web Part’ button and the select the ‘Media and Content’ category and select the ‘Content Editor’ webpart and click on ‘Add’ button in the right hand side to place this in mid of the page.
Now, your content editor webpart is in the SharePoint page. You just need to place the image there and put the required HTML attributes to map the image.
The HTML is given below.
<p><map name=”FPMap0″ id=”FPMap0″>
<area href=”http://laha.sharepoint.com/teams/90/293/globalwls/default.aspx” shape=”rect” coords=”345, 60, 489, 98″ />
<area href=”http://laha.sharepoint.com/humanresources/workplace/occhealth/occ_health_home.html?location=test&tm=corp” shape=”rect” coords=”365, 117, 509, 151″ />
<area href=”http://laha.sharepoint.com/teams/90/314/industrialhygiene/default.aspx” shape=”rect” coords=”384, 172, 530, 207″ />
<area href=”http://laha.sharepoint.com/healthydirections/” shape=”rect” coords=”365, 227, 511, 261″ />
<area href=”http://laha.sharepoint.com/humanresources/hwls/hwls-index.html” shape=”rect” coords=”345, 280, 492, 316″ />
<area href=”http://laha.sharepoint.com/teams/90/292/EnvMgt/default.aspx” shape=”rect” coords=”51, 65, 196, 98″ />
<area href=”http://laha.sharepoint.com/clearspace/community/cop/product_safety_and_compliance” shape=”rect” coords=”23, 118, 170, 151″ />
<area coords=”6, 171, 152, 206″ shape=”rect” href=”http://laha.sharepoint.com/clearspace/community/cop/product_safety_and_compliance” />
<area coords=”25, 227, 170, 261″ shape=”rect” href=”http://laha.sharepoint.com/clearspace/community/cop/agronomy” />
<area coords=”50, 283, 197, 315″ shape=”rect” href=”http://laha.sharepoint.com/clearspace/community/cop/biomass” />
<area href=”http://laha.sharepoint.com/teams/env_health_safety/default.aspx” shape=”rect” coords=”200, 117, 333, 155″ />
<area href=”http://laha.sharepoint.com/main.asp” shape=”rect” coords=”199, 164, 338, 200″ />
</map>
<img border=”none” alt=”" src=”/teams/env_health_safety/Images1/EHS-Graphic_web1.jpg” width=”535″ height=”332″ usemap=”#FPMap0″ /></p>
Now, select the content editor webpart or click inside the pan there and then in the ribbon menu, you will see the ‘HTML’ button (Editing tool >> Insert >> HTML >> Edit HTML Source), there click on ‘Edit HTML Source’ button and a window will be open.
Once open, paste the HTML content there. To generate the image mapping HTML code, you can also use SharePoint designer 2010 as well.
Once added and click on ‘Apply’, the image will be visible in the webpart. Make sure you upload the image in proper picture/document library and put the relative path in the HTML.
Here the problem started. It seems that the image is being displayed properly, but hyperlinks not working on different area of the image. While revisiting the HTML Source windows, found some parts of the HTML (by comparing source HTML) is missing there. In fact, for every image mapping tag i.e. <area>, I found two attributes with values i.e. shape=”rect” and coords=”345, 60, 489, 98″ are missing. Even if you follow the same process and try to save the HTML, the same will happens. Farm is compatible with Service pack 1 and June 2011 CU patch.
While redoing the same at the HTML save event through ‘HTML Source’ window, found one SharePoint alert and it is saying “Warning: The HTML source you entered might have been modified.”. Seems like SharePoint internally change/remove some parts of the input HTML as a precaution purpose.
As an alternate approach, save the html as simple text file and upload it in any document library.
Now, select the content editor and delete whatever the entry there in ‘HTML Source’ window. Now, to link this script file with the content editor, go to the ‘Edit Webpart’ window and select the button under ‘Content Link’ label. Paste the script location (relative path) there. Click ok and apply and exist from edit page.
Now, browse the page and see how it is working.
Cool!
