You are here

Cool module: jQuery Map Hilight

The jQuery Map Hilight module is a javascript wrapper module which uses the jquery map hilight plugin and provides an easy-to-use Drupal admin interface to control highlighting functionality on your page's html image maps.

Let's go through an example to create the following interactive image map:

BD Image Map Example

 

Drupal setup

  1. Download and enable the following modules
  2. Download the following external library to the directory /sites/all/libraries/jquery.maphilight.  If you don't have a sites/all/libraries directory yet, just create it.
    • https://github.com/kemayo/maphilight - grab the minified js file (https://github.com/kemayo/maphilight/blob/master/jquery.maphilight.min.js)
  3. Go to the module's admin interface to check out the settings and make sure it doesn't give you a warning (i.e. it can find the plugin from above)
    • admin/config/content/jq_maphilight  OR
    • Administration --> Configuration --> Content authoring --> jQuery Map Hilight

 

Creating the image map

There are many online tools that can help you come up with the coordinates of the special interactive areas on your image, if you don't want to be struggling with doing the figuring out and math yourself.  I just used the following one that was mentioned in the jQuery Map Hilight module itself: http://www.maschek.hu/imagemap

  1. Size and prepare the image you want to use
  2. Upload it to http://www.maschek.hu/imagemap in the 'Select source' section
  3. Hit 'accept' next to the upload section to have the image load
  4. Next, you have to decide whether you want rectangular, circular, or polygon sections on your images.  As you can see, I've combined and used a circular image for my face and a rectangle for the picture
    • Select the type of shape you want in the image's map
    • Then click on the upper-left corner that you want your circle or rectangle to start with and drag the mouse until you get the shape you're happy with.  You can drag and drop the shape into place too after the fact. (If you create a polygon, you just need to click around the polygon shape to create each of the vertices and make sure to Shift+click on the last one, so it closes properly)
    • When you're happy with the result and have adjusted the shapes that overlay your image, copy and save the resulting HTML code from the 'Code' section.  We'll use it shortly as we create our Drupal page.

Creating the HTML page

I used the code from the tool above and just entered the 'Source' mode of the CKEditor, so I can paste html in directly.  Here's how I modified the code from above:

  • I added in a custom id and name from the random string ones given
  • I added links in the blank 'href' attributes for each of the regions, based on where I wanted those to go when clicked
  • I added '_blank' to the 'target' attributes, so the links would open in new windows
  • Finally, I added the actual image with (very important) the 'usemap' property to make sure the map above is applied to the image!  The usemap needs to specify the name of the corresponding map.
  • I removed the comment (but you can leave it in)

Here's the exact HTML I use in the sample in this page

<map id="bd_map" name="bd_map">
  <area alt="" coords="213,101,53" shape="circle" href="/about" target="_blank" title="" />
  <area alt="" coords="50,51,155,182" shape="rect" href="/artwork" target="_blank" title="" />
</map>
<img alt="BD Image Map Example" src="http://www.drupalwoo.com/sites/default/files/blog_images/bd_image_map.jpg" usemap="#bd_map" />

 

That's it.  Let me know if you have any edits, problems or successes with this.  Good luck!

 

Share

Comments

Hi I need a module to create page like this mariinskaya. info/plan/, do you have any ideas? Thanks in advance!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.