In 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" /> ... </map>
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:
Note: If bootstrap javascript framwork used, then tooltips are not positioned correctly.
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:
-
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);">
-
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>
-
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 style="opacity:0;position:absolute;top:85px;left:120px;width:20px;height:15px"></a>{/tip} {tip id="128"}<a href="##" style="opacity:0;position:absolute;top:206px;left:142px;width:20px;height:15px"></a>{/tip} {tip id="129"}<a href="##" style="opacity:0;position:absolute;top:175px;left:236px;width:20px;height:15px"></a>{/tip} {tip id="130"}<a href="##" style="opacity:0;position:absolute;top:260px;left:269px;width:20px;height:15px"></a>{/tip} {tip id="131"}<a href="##" style="opacity:0;position:absolute;top:208px;left:350px;width:20px;height:15px"></a>{/tip} </div>
Notes:
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.
Lake Superior (French: Lac Supérieur) is the largest of the Great Lakes of North America. The lake is bounded by Ontario and Minnesota to the north and west, and Wisconsin and Michigan to the south. It is generally considered the largest freshwater lake in the world by surface area. It is the world's third-largest freshwater lake by volume and the largest by volume in North America.
Lake Michigan is one of the five Great Lakes of North America and the only one located entirely within the United States. The other four Great Lakes are shared by the U.S. and Canada. It is the second largest of the Great Lakes by volume and the third largest by surface area, after Lake Superior and Lake Huron (and is slightly smaller than the U.S. state of West Virginia). To the east, its basin is conjoined with that of Lake Huron through the wide Straits of Mackinac, giving it the same surface elevation as its easterly counterpart; the two are technically a single lake. Lake Michigan is bounded, from west to east, by the U.S. states of Wisconsin, Illinois, Indiana, and Michigan. The word "Michigan" originally referred to the lake itself, and is believed to come from the Ojibwa word mishigami meaning "great water".
Lake Huron (French: Lac Huron) is one of the five Great Lakes of North America. Hydrologically, it comprises the easterly portion of Lake Michigan–Huron, having the same surface elevation as its westerly counterpart, to which it is connected by the wide Straits of Mackinac. It is bounded on the east by the Canadian province of Ontario and on the west by the state of Michigan in the United States. The name of the lake is derived from early French explorers who named it for the Huron people inhabiting the region. The huronian glaciation was named due to evidence collected from Lake Huron region.
Lake Erie (French: Lac Érié) is the fourth largest lake (by surface area) of the five Great Lakes in North America, and the tenth largest globally or twelfth largest globally if measured in terms of surface area. It is the southernmost, shallowest, and smallest by volume of the Great Lakes and therefore also has the shortest average water residence time. It is bounded by Ontario to the north, Ohio, Pennsylvania, and New York to the south, and Michigan to the west. The lake is named after the Erie tribe of Native Americans who lived along its southern shore. The outflow from the lake provides hydroelectric power to Canada and the U.S. as it spins huge turbines at Niagara Falls.
Lake Ontario (French: Lac Ontario) is one of the five Great Lakes of North America. It is bounded on the north and southwest by the Canadian province of Ontario, and on the south and east by the American state of New York. Ontario, Canada's most populous province, was named for the lake. In the Wyandot (Huron) language, ontarío means “Lake of Shining Waters”. It is the last in the Great Lakes chain and serves as the outlet to the Atlantic Ocean via the St. Lawrence River. Lake Ontario is also the only one of the five Great Lakes not to share a coast with the state of Michigan.