I am working on a website that is about history and there are some map for this website.

I am using map tag of HTML to select a part of image(map), how can I merge that <map> to <img> that uploaded by drupe

or how can I put the image address and merge map to it:

<img src="file:///C|/xampp/htdocs/geo/sites/default/files/field/image/aa.jpg"  alt="" width="800" height="531" usemap="#Map"/>
<map name="Map">
  <area shape="poly" coords="396,270,516,286,549,324,502,353,447,342,406,343,384,366,400,396,386,414,353,344,346,293,345,263,389,235,428,223,470,234,487,252,596,243" href="#">

Where is the path (address) of files on drupal that I can link to it insted of the path that I give on top source <img src=" I Mean here"/>

  • 1
    you should not give path like that in src. Jun 25 '14 at 6:35
  • I don't know the path of files in drupal Jun 25 '14 at 6:38
  • I give this path but does not working : ` sites/default/files/field/image/aa.jpg` Jun 25 '14 at 6:38
  • add slash (/) to your path. if you sites lives at something/my-drupal-site then path would be /my-drupal-site/sites/all/themes/zen/zen/image.png Jun 25 '14 at 6:46
  • 1
    Ok, if you install contributed module that I think would be easy for you. Is that ok? Jun 25 '14 at 7:00

Try the jQuery Map Hilight module

It enables the simple addition of mouseover highlighting of hotspots to HTML image maps without requiring the editing of theme files or knowledge of javascript/jquery.


  1. provides simple interactive graphics via HTML image maps (no flash required).
  2. easy to use: either select the 'highlight all image maps' default setting or simply add class="jq_maphilight" to the tag of any specific image map you wish to highlight.
  3. no jquery or javascript knowledge required: plugin configuration is handled via an admin/settings screen rather than having to enter jquery code.
  4. fully configurable: options for fill, fill color, fill opacity, outline, outline color, outline opacity, outline thickness, as well as a fade effect.
  5. per image map settings: add image map specific options with an additional class.
  • where do I add this map tag?? I have added an image as a banner in Marinelli theme and I wanted to add usemap to it. So where do I write the code for map tag
    – GIRI
    Mar 12 '15 at 17:30
  • please look into this post drupal.stackexchange.com/questions/151421/…
    – GIRI
    Mar 17 '15 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.