0

当光标位于特定区域时,我想使用 ImageMapster 突出显示图像的各个部分并显示工具提示。我关注了 ImageMapster 网站上的演示,并使用干净的美国地图的 jsfiddle 来测试我的想法,即如何让部分突出显示和显示工具提示 ( 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."
    }]

});

但是当我将它应用到我自己的图像(http://jsfiddle.net/Querido_Sarita/Gk28V/)时,我根本没有得到任何突出显示。

$('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."
}]

});

我使用 MapSpinner 进行映射并获取坐标。

据我将我的 html 与演示 html 进行比较可以看出,一切都应该工作。任何帮助将不胜感激。谢谢!

4

0 回答 0