0

I want to use ImageMapster to highlight sections of my image and display tooltips when the cursor is over a specific area. I followed the demos on the ImageMapster site and used the jsfiddle of the clean USA map to test out my ideas for how to get sections to highlight and display tooltips (http://jsfiddle.net/juvyh/2040/).

$('img').mapster({
mapKey: 'state',
singleSelect: true,
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [
    {key: "UT",
    toolTip: "<b>Animals</b> incorporate the nitrogen they consume into amino acids that make up the proteins in their bodies."
    },
    {key: "TX",
    toolTip: "<b>Plants</b> take up 'fixed' nitrogen from the soil. Some plants, called legumes (including peas, beans, alfalfa, and clover) contain symbiotic bacteria in their root nodules; these bacteria can 'fix' nitrogen from the air into a form that the plants can use. Plants incorporate nitrogen into amino acids that make up the proteins in their bodies."
    }]

});

But when I applied it to my own image (http://jsfiddle.net/Querido_Sarita/Gk28V/), I'm not getting any highlighting at all.

$('img').mapster({
mapKey: 'name',
singleSelect: true,
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [{
    key: "animal_waste",
    toolTip: "<b>Animal waste</b> contains nitrogen in an organic form, such as nitrates and urea."
}, {
    key: "atmosphere",
    toolTip: "The <b>atmosphere</b> is 78% nitrogen. But atmospheric nitrogen is not readily available for biological purposes. It needs to be 'fixed' into a form that plants and animals can use. Lightning 'fixes' nitrogen by combining nitrogen with water to form ammonia and nitrates."
}, {
    key: "dead",
    toolTip: "When <b>plants and animals die</b>, decomposers (mainly fungi and bacteria) break down proteins to release the nitrogen from amino acids into the larger environment."
}, {
    key: "fertilizers",
    toolTip: "Humans can make <b>fertilizers</b> from animal waste, which is rich in 'fixed' nitrogen, or they can 'fix' the nitrogen through the Haber-Bosch process, which uses high pressure to force the reaction of nitrogen with hydrogen to make ammonia."
}, {
    key: "groundwater",
    toolTip: "Nitrogen, in the form of nitrites, nitrates, or ammonia, can get into <b>groundwater</b> when fertilizers or animal waste leach through the overlying soil."
}, {
    key: "live_animals",
    toolTip: "<b>Animals</b> incorporate the nitrogen they consume into amino acids that make up the proteins in their bodies."
}, {
    key: "live_plants",
    toolTip: "<b>Plants</b> take up 'fixed' nitrogen from the soil. Some plants, called legumes (including peas, beans, alfalfa, and clover) contain symbiotic bacteria in their root nodules; these bacteria can 'fix' nitrogen from the air into a form that the plants can use. Plants incorporate nitrogen into amino acids that make up the proteins in their bodies."
}, {
    key: "ocean",
    toolTip: "Nitrogen can move into the <b>ocean</b> through runoff from the soil, inflow from surface water, percolation of groundwater, or from the waste materials of plants and animals living in the ocean."
}, {
    key: "rainwater",
    toolTip: "<b>Rainwater</b> can deliver nitrogen by picking up 'fixed' nitrogen from the atmosphere. 'Fixed' nitrogen in the atmosphere can come from lightning strikes or from pollutant emissions of nitrogen oxides."
}, {
    key: "soils",
    toolTip: "<b>Soils</b> support the growth of several species of bacteria and fungi that convert nitrogen into different chemical forms. Some of these organisms 'fix' nitrogen into biologically useful forms, such as ammonia, nitrites, and nitrates. Others denitrify, reducing the nitrites and nitrates into gaseous nitrogen that can be released into the atmosphere."
}, {
    key: "surface_water",
    toolTip: "Nitrogen can move into <b>surface water</b> through runoff from the soil, percolation up from the groundwater, or from the waste materials of plants and animals growing in the water."
}]

});

I used MapSpinner to do the mapping and get the coordinates.

As far as I can tell from comparing my html to the demo html, everything should work. Any help would be greatly appreciated. Thank you!

  • 1
    You've to set the same `name` to `map` as the value of `usemap`. Now you have `Ncycle` as `map` name instead of `mapped_cycle`. [A working fiddle](http://jsfiddle.net/f9JDB/). – Teemu Jun 12 '14 at 17:40
  • Thanks--I can't believe I missed that! – Querido_Sarita Jun 12 '14 at 21:14

0 Answers0