jmootipsIn HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

In HTML an image map is made of the actual image, that is embedded with the <img>-tag. The image has to be assigned the attribute "usemap".
The image map comprise a <map>-tag and in the detail of the <area>-tags, which defines the fields with optional weblinks. These are similar to the <a>-Tag defining which URL should be opened.

A Sample of Image Map below (The coordinates of the respective areas can be found out, for example, with the graphics tools from Gimp):

<img src="/images/stories/lakes.jpg" alt="" width="450" height="339" border="0" usemap="#Map" />
<map name="Map" id="Map">
 <area shape="rect" coords="120,85,156,118" nohref alt="Lake Superior" />
 <area shape="rect" coords="142,206,179,237" href="##" alt="Lake Michigan" />


Since jmootips Version 1.1.1 you may add tooltips within images using image maps. (Note: This feature is not available if Bootstrap Javascript Framework used for jmootips. Also it may happen, that Microsoft's Internet Explorer does not display tooltips at all. For a solution for Bootstrap and Internet Explorer see next chapter of this article).
To add tooltips to be used with image maps, embed <area>-tags with tooltip tags:
{tip id="127" position="above"}<area shape="rect" coords="120,85,156,118" href="##" />{/tip}
jmootips will use the shape-attribute and coords-attribute to position tooltips within image.

Sample of Image Map with Tooltips

To show tip, move mouse pointer onto question marks within image:

Lake Huron Lake Erie Lake Ontario

Note: If bootstrap javascript framwork used, then tooltips are not positioned correctly.

The Bootstrap Javascript Framework with its tooltip plugins does not position tooltips correctly if an image map with <area>-tags is used. There is a solution to solve this problem by "translating" HTML <img>-tag and <area>-tags to HTML- and CSS-settings.
This way to provide tooltips within an image works as well with the Mootools Javascript Framework. Below three steps describe (using a sample image) how to implement this solution:
  1. Redefine your <img>-tag to a <div>element:
    <img src="/images/stories/lakes.jpg" alt="" width="450" height="339" border="0" usemap="#Map" />
    translates to:
    <div style="position:relative;width:450px;height:339px;background-image:url(/images/stories/lakes.jpg);">
  2. Redefine <area>-tags:
    <area shape="rect" coords="120,85,156,118" href="#" alt="Lake Superior" />
    translates to:
    <a href="#" style="opacity:0;position:absolute;top:85px;left:120px;width:20px;height:15px"></a>
  3. with embedded tooltip tags your new "image map" would look like:
    <div style="position:relative;width:450px;height:339px;background-image: url(/images/stories/lakes.jpg);">
    {tip id="127"}<a  nohref
    {tip id="128"}<a  href="##"
    {tip id="129"}<a  href="##"
    {tip id="130"}<a  href="##"
    {tip id="131"}<a  href="##"
Image with tooltips (result of above settings):


To show tip, move mouse pointer onto question marks within image:

Tooltip contents have been provided via Joomla articles - they are referred to using jmootips parameter "id". Both above solutions require use of jmootips version 1.1.1 or higher.


Today: 28
Yesterday: 35
This Week: 110
Last Week: 343
This Month: 1,710
Last Month: 2,555
This Year: 13,440
Germany 31.8% Germany
USA 22.3% USA
France 3.3% France
Italy 2.7% Italy
Indonesia 2.1% Indonesia
Poland 2.0% Poland
Netherlands 1.8% Netherlands
Spain 1.7% Spain



We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.