Мое отображение изображений не работает, но оно выглядит как демонстрационное отображение
Я хочу использовать 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, все должно работать. Любая помощь будет принята с благодарностью. Спасибо!