Skip to Content

<P>Have you tried creating an image map for navigating a KM repository? ):<BR><BR>If you haven’t already created an image map for navigating a KM repository, here’s an example of how you can do it! <BR><BR>In KM, image maps are used for a graphical depiction of folder contents. These objects are displayed using graphics instead of in their normal text form. <BR><BR>Step 1 – Determine the image you want to use for navigating. This can be any JPG or GIF file. In this example I will reference the file world.gif.<BR><BR>Step 2 – Configuring an image map. Take your image file world.gif and place it in the system. For our example place the file in the path: …../knowledgemanagement/etc/public/graphics. The subdirectory “graphics” was created within the public folder.<BR><BR>Step 3 – In the documents folder, create the following folders:<BR>

<LI>World

<UL>

<LI>Within the “World” folder, create the subfolders:</LI>

<UL>

<LI>North America</LI>

<LI>South America</LI>

<LI>Europe</LI>

<LI>Asia</LI></UL></UL></LI><BR>Note: you can create as many folders as you like. This structure will serve as the navigation structure for world.gif image map. <BR><BR>Step 4 – Determine the navigation coordinates for the image world.gif. Any tool can be used, for this example the tool GeoHTML was used. It is a freeware tool that can be downloaded from http://www.fegi.ru/geohtml. <BR>

<LI>The following coordinates were determined for the folders:

<UL>

<LI>North America: 253, 255, 303, 285</LI>

<LI>South America: 424, 171, 474,201</LI>

<LI>Europe: 368, 43, 418, 73</LI>

<LI>Asia: 276, 37, 326, 67</LI></UL></LI><BR><BR>Step 5 – Create new link-sensitive Areas for the image map. Menu path: Configuration -> Content Management -> User Interface -> Image Maps -> Areas <BR><BR>Here is an example of what the configuration would look like. <BR><BR>

<P><IMG height=190 alt=image src=”https://weblogs.sdn.sap.com/weblogs/images/3683/Picture1.jpg” width=556 border=0></P><BR>Please note, an area would need to be defined for each area on the image map that would be link-sensitive areas. <BR><BR>Step 6 – Defining an Image Map. In this step the name of the image map will be defined as well as specifying the path of the image, the tooltip, and lastly assigning the areas. <BR><BR>

<P><IMG height=365 alt=image src=”https://weblogs.sdn.sap.com/weblogs/images/3683/Picture2.jpg” width=556 border=0> </P><BR><BR>Step 7 – Configure an Object Type Handling (OTH) file for the image map. OTH files are located in the /oth subdirectory within the /etc repository. Copy an existing OTH file in this subdirectory and copy it to “world.oth”. In This OTH file, define the navigation path, collection renderer, layout controller, action and image map. The OTH file should look as follows: <PRE>  <?xml version=”1.0″?><BR>  <ObjectTypeHandler Name=”Image Map world” </PRE>

<P dir=ltr style=”MARGIN-RIGHT: 0px”>Class=”com.sapportals.wcm.service.objecttypehandler.GenericObjectTypeHandler”><BR> <SelectionCriteria><BR>  <Paths><BR>    <Path>/documents/World</Path><BR>  </Paths><BR> </SelectionCriteria><BR> <Properties><BR>  <Property Key=”rndCollectionRenderer”              Value=”ImageMapRenderer”/><BR>  <Property Key=”LayoutController”                   Value=”DefaultLayoutController”/><BR>  <Property Key=”rndShowActions”                      Value=”false”/><BR>  <Property Key=”rndMap”                      Value=”MapOfWorld”/><BR> </Properties><BR> <Actions/><BR></ObjectTypeHandler><BR><BR>

</P>

<P>

Step 8 – Display the image map.  For the navigation iView that is being used, ensure that the iView property “Layout Set Mode” is set to default. <BR>

<BR>

Step 9 – Reload the object type handler in order for the system to read the new oth file world.oth.  This can be done by within the Rendering Information link in any navigation iView for a user that is specified in the Debugging Settings (this is done in the user interface configuration).  Another option to reloading the object type handler would be restarting the J2EE engine.<BR>

<BR>

Step 10 – In the navigation iView for this mage map, navigate to the image map.  In this example, the menu path would be documents/World <BR><BR>

</P>

<P><IMG height=311 alt=image src=”https://weblogs.sdn.sap.com/weblogs/images/3683/Picture3.jpg” width=553 border=0></P>

<P><BR> </P>

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. With Netweaver 04 SPS10 there is now a brand new way to use image maps within KM. While the result is exactly the same as described in this web log, the effort and the numer of steps is significantly smaller! I will start writing a web log on this as soon as possible … stay tuned.
    (0) 

Leave a Reply