我需要在鼠标悬停时弹出一个文本。我创建了一个州地图并给出了每个地区的链接。我想在mouseover上弹出一个区域名称。 以下是我的演示代码
<!DOCTYPE html>
<html>
<body>
<img src= image.jpg" width="300" height="430" alt="Planets" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="" href="#" shape="poly" coords="446,128,479,82,508,60,534,16,576,69,567,130,545,149" />
<area alt="" title="" href="#" shape="poly" coords="353,185,348,195,355,210,375,216,400,232,395,254,408,270,396,278,436,276,469,263,504,257,529,251,562,246,552,228,546,213,554,195,559,186,574,176,581,157,486,144,420,130,409,136,393,160,393,177,393,191" />
<area alt="" title="" href="#" shape="poly" coords="371,380,376,361,375,344,395,328,393,299,387,284,384,266,392,250,374,220,324,189,294,182,271,175,272,194,282,247,249,250,237,269,248,312,252,330" />
<area alt="" title="" href="#" shape="poly" coords="400,337,381,357,409,357,431,346,453,339,477,319,514,330,550,324,552,295,554,276,552,254,507,260,473,269,437,279,405,288" />
<area alt="" title="" href="#" shape="poly" coords="242,313,227,290,188,324,189,348,212,361,248,390,258,430,300,419,333,402,361,413,369,388" />
<area alt="" title="" href="#" shape="poly" coords="377,381,384,413,405,435,439,464,457,479,482,436,504,416,548,412,564,385,556,353,483,326" />
<area alt="" title="" href="#" shape="poly" coords="229,263,203,267,168,261,161,282,117,305,93,299,78,312,69,339,80,357,94,373,92,384,87,405,68,440,52,459,73,485,97,498,128,496,144,463,174,460,207,457,231,431,240,410,222,385,196,358,176,352,171,328,166,317,195,310,216,287" />
<area alt="" title="" href="s.png" shape="poly" coords="324,543,312,500,313,468,337,452,339,422,389,429,404,453,433,478,399,513" />
<area alt="" title="" href="#" shape="poly" coords="238,456,226,446,249,439,301,435,317,448,300,484,308,521,297,560,264,562,243,548,251,483,262,466,256,458,253,452" />
<area alt="" title="" href="#" shape="poly" coords="152,554,185,545,203,537,233,530,252,490,240,465,207,467,170,470,147,471" />
<area alt="" title="" href="#" shape="poly" coords="62,485,99,506,144,518,145,552,174,588,162,634,142,651,132,684,102,698,105,731,90,721,70,649,65,626,45,603,35,590,30,575,52,569,58,532,62,515" />
<area alt="" title="" href="#" shape="poly" coords="185,558,207,546,231,557,250,560,262,571,276,586,271,598,277,613,291,635,273,651,260,667,254,681,245,669,227,659,210,631,201,623,188,621,175,617" />
<area alt="" title="" href="#" shape="poly" coords="278,581,283,588,284,607,304,628,329,645,338,628,340,608,358,615,379,618,393,630,420,623,433,601,435,575,441,555,462,552,501,553,488,505,478,484,490,469,485,447,459,476,430,496,400,517,370,533" />
<area alt="" title="" href="#" shape="poly" coords="236,704,247,698,253,683,263,682,281,658,298,632,310,643,336,648,343,631,352,621,367,623,384,630,398,640,396,652,387,657,368,660,351,655,346,669,342,683,328,709,332,731,320,749,307,759,286,712" />
<area alt="" title="" href="#" shape="poly" coords="181,811,170,782,152,760,135,740,114,729,124,699,135,693,156,687,160,674,157,651,168,647,179,625,203,634,216,649,222,667,237,675,244,687,232,702,250,719,280,716,292,745,294,763,247,770,235,771,220,790,197,794" />
<area alt="" title="" href="#" shape="poly" coords="109,739,130,746,145,758,154,777,168,789,172,811,176,830,183,864,167,869,142,871,124,862,119,817,117,789,105,758" />
<area alt="" title="" href="#" shape="poly" coords="443,578,460,600,445,627,458,653,462,665,468,683,479,692,504,683,532,689,539,704,539,719,525,727,502,727,488,711,475,703,464,713,459,728,443,744,439,764,422,773,404,790,393,788,390,797,386,794,360,783,341,751,337,705,353,663,403,651,379,662,421,629" />
<area alt="" title="" href="#" shape="poly" coords="201,864,184,832,199,804,231,786,261,776,292,768,320,761,344,765,355,786,368,806,342,819,323,829,324,843,283,856,291,849,277,866,273,880,251,898,234,871,220,859" />
<area alt="" title="" href="#" shape="poly" coords="132,883,158,873,178,874,207,873,233,875,241,894,248,917,256,945,242,968,214,960,194,940,161,924,132,895" />
<area alt="" title="" href="#" shape="poly" coords="226,979,258,972,275,952,298,949,306,942,308,958,307,979,300,992,318,1011,340,1038,326,1056,301,1057,267,1037,240,1008,221,990,226,981" />
<area alt="" title="" href="#" shape="poly" coords="322,964,309,988,326,1014,350,1041,339,1068,354,1079,377,1093,398,1071,420,1058,444,1055,452,1044,474,1035,488,1026,474,1011,457,994,440,1009,395,980,371,959,338,972" />
<area alt="" title="" href="#" shape="poly" coords="382,951,384,921,400,933,415,918,436,892,458,911,471,934,487,947,496,967,500,985,520,995,522,1008,492,1012,464,988,447,992,433,991,403,973" />
<area alt="" title="" href="#" shape="poly" coords="389,803,422,776,445,769,462,739,480,747,480,777,506,773,528,760,546,776,535,795,531,818,512,841,491,875,496,905,491,924,469,912,437,885,418,878,386,859,382,838,393,821" />
<area alt="" title="" href="#" shape="poly" coords="546,791,544,814,566,820,582,828,615,844,642,845,656,825,666,801,652,788,652,769,647,757,631,762,622,749,599,768,596,776,577,778" />
<area alt="" title="" href="#" shape="poly" coords="699,802,677,813,659,837,647,850,637,853,637,871,636,888,623,900,629,913,640,919,657,920,676,928,681,917,692,905,703,901,716,884,724,869,724,851,712,842,702,844,696,836" />
<area alt="" title="" href="#" shape="poly" coords="506,866,514,854,525,848,537,838,543,822,557,827,575,832,588,840,600,847,608,860,620,860,632,863,627,878,623,885,615,899,609,886,601,873,583,860,565,855,553,865,547,875,537,887,522,877,513,875" />
<area alt="" title="" href="#" shape="poly" coords="540,898,547,888,556,870,572,863,592,870,602,888,596,899,604,911,608,918,606,925,603,938,593,946,583,939,566,933,559,922,549,914,541,903" />
<area alt="" title="" href="#" shape="poly" coords="498,874,500,893,506,911,506,927,497,940,503,956,506,970,522,977,532,994,535,1009,554,1011,572,996,569,975,572,953,567,940,554,931,544,918" />
<area alt="" title="" href="#" shape="poly" coords="449,1121,452,1102,466,1087,481,1084,492,1089,509,1087,529,1087,552,1079,495,1090,520,1086,547,1085,551,1075,563,1067,582,1057,589,1040,567,1029,547,1024,527,1014,502,1020,495,1031,486,1042,469,1046,460,1060,447,1066,421,1064,406,1077,388,1093,393,1104,404,1104,416,1115,432,1121" />
</map>
</body>
</html>
我怎么能实现这个目标?任何链接或建议都将是有益的。在此先感谢。
答案 0 :(得分:0)
如果这些区域都是地图的不同区域,那么您可以为地图的title属性提供值。只要将鼠标放在该位置,它就会弹出工具提示。