我的图像映射不起作用,但它看起来非常像演示映射

时间:2014-06-12 17:14:39

标签: javascript html tooltip highlight imagemapster

我希望使用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和demo html,一切都应该有效。任何帮助将不胜感激。谢谢!

0 个答案:

没有答案