Confession time: I love image maps!

 

For communities who don't have UX/UI resources to make some of the fancier images, an image map can be a great resource. I used them in almost all of my groups when I was the Community Manager at Agilent and still find myself using them here in the Jive Community as well.

Below are some simple instructions on how I created the user group map shown here: The specified item was not found.

 

What's required

 

  • Photoshop or some other moderately advanced image editing tool.
  • Dreamweaver or some other moderately advanced HTML editing tool.
  • Image for your map (either you need to make one or buy one).
  • URLs for where you want people to go.

  Here's the image we'll use for this example.

 

What you need to know

  • Column width determines image width - Do you know where you want your image map to go? You can place an image map into any HTML widget on any overview tab. Image maps can be placed in headers, side bars, as well as the center column. You'll need to know image width so that you don't place text or a button where people will not see. Also, you don't want users to see the little scroll bar that appears under an image when it is put into a space too small. Right? No scroll bars!
    • Determine your column width - Because different Jive versions and different communities have standardized on different column widths, you will need to test how wide your image needs to be.
      • One way to test your column width is to take a screen capture of your overview page (at the size you want it displayed) and then copy it into Photoshop.
      • Crop the image down to display only the column area where you want to place the image map. Under the Image menu, select Image Size then capture the pixel width (for examples, sidebars are usually about 200 to 225 pixel widths depending on your version of Jive).
      • Note: This is not a perfect method and there are other ways to get this done, so if you have a better way please let me know in the comments!
    • Center column concerns - Since the center column can be a flexible width space (for some of us at least) you will either have to plan for the lowest possible width (which I do not recommend) or plan for a nice medium sized width and then hope people don't mind the white-space if they are viewing the image on a large display. If you are able to pull information from an analytics program like Google Analytics, then you can determine the screen width used by most people on your community. This will help you decide the optimal screen size for the screen capture you are taking in the step above.
  • URLs can be simple or complex - You can point people to a document or a place from an image map. You can also point them to a set of search results also. Linking to search results is a little more complicated but is useful for getting people to content that is not is a container like a group, space, project or category.
    • Simple URLs - You can point to a site link https://community.jivesoftware.com/ or a document like One Stop Doc for JiveWorks New Member Onboarding : Tips and Tricks Directory. Copy the URL itself into Notepad or some other non-formated text document, you will need them later.
    • Complex URLs - If you want to point to search results, I suggest you search from a place's Content tab.
      • Click on the group's Content link in the masthead to bring you to the Content view.
      • If you want to bring people to all of the ideas posted in a group, click on the Ideas tab at the top of the content list.
      • If you want to limit the search to Ideas in a specific category, you can further narrow the search by clicking on the Category you want in the left sidebar.
      • The URL at the top of the browser window will continue to change as you click. Copy this URL when you are done making your selections.

Search_results_URL_screen_2015-01-08_1126.png

     See the URL at the very top of the screen? That's the one you want to copy for complex search URLs.

 

Bringing it all together

 

For the image maps I make, I always place the image into a new page in Dreamweaver in order to build the hot spots. I'm not going to go into great detail here because I think there are good instructions on the web for how to build image map hot spots in HTML.

  • Place the image into the Dreamweaver page
  • Select the hotspot tool in the Dreamweaver app and draw a box or circle around the area that I want to be clickable.
  • Enter in the URLs in Dreamweaver for each of the hot spots created. (Remember that you saved the URLs in the Notepad document earlier, so you can copy and paste from there.)

 

The resulting HTML code should look something like this (I used all search result URLs):

<p align="center"><img src="/resources/statics/850340/User%2Bgroup%2Bmap_480390195.jpg" width="800" height="572" usemap="#Map" border="0" align="middle"/>

  <map name="Map" id="Map">

    <area shape="rect" coords="17,3,320,317" href="/places?filterID=all~tag[ugna]" target="_blank" alt="North America user groups" />

    <area shape="rect" coords="25,321,296,574" href="/places?filterID=all~tag[ugsa]" target="_blank" alt="South America user groups" />

    <area shape="rect" coords="323,4,538,234" href="/places?filterID=all~tag[ugea]" target="_blank" alt="European user groups" />

    <area shape="rect" coords="323,237,536,580" href="/places?filterID=all~tag[ugaf]" target="_blank" alt="Africa user groups" />

    <area shape="rect" coords="541,5,794,369" href="/places?filterID=all~tag[ugapac]" target="_blank" alt="Asia Pac user groups" />

    <area shape="rect" coords="544,372,794,572" href="/places?filterID=all~tag[uga]" target="_blank" alt="Australia user groups" />

  </map>

</p>

 

Loading the image map into your place

 

In the place where you want to load your image map, open the Overview page by selecting Overview Page from the Manage pull-down menu on the right side of the screen. If you do not see this option in your group/space then you do not have admin rights and will not be able to load the image map.

  1. From the list of Widgets, select Other, then HTML. Drag the HTML widget into the column where you would like the image map.
  2. On the HTML widget, click on the arrow to select Edit this Widget.
  3. Click on the Manage Files button (in the HTML widget) to upload the image you want to use. Copy the URL for the uploaded image into your clipboard then paste it to your open text or Notepad document (you'll need it in a second). You might be on another version of Jive and may not have the "Manage Files" option. Let me know if that's the case.
  4. Copy and paste your HTML code for the image map into the field for "Your HTML"
  5. Update the URL for the image you just uploaded in the HTML code (the URL you copied in step 3 above).
  6. Save the widget properties. Review the widget appearance in the Overview preview before you publish. You might need to fix some of the steps above it the image map is not displaying correctly.
  7. Publish the layout.

 

Okay, I'm sure this is the whirlwind version of how to get this done. Feel free to point out where I might need to make some edits to this doc or if you have the right access permission, go ahead and edit it yourself. Thanks for listening!