如何在地图区域悬停?

时间:2016-04-18 17:35:56

标签: html css dictionary hover area

请问,如何在地图中对区域进行悬停效果?

这是地图的代码。

非常感谢你!

enter image description here

<img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Vladimir Ponechal  -->
<area shape="poly" coords="10,128,12,129,13,133,13,135,13,136,16,138,19,138,19,143,22,146,22,149,22,152,24,154,26,155,29,154,29,143,32,140,37,134,39,130,44,124,47,124,49,119,53,117,58,116,63,115,68,114,71,118,79,110,83,111,86,109,92,113,96,116,99,121,105,121,112,121,113,122,114,127,126,127,129,129,127,143,129,148,130,151,134,158,131,162,131,165,134,167,133,174,134,176,128,178,128,184,120,181,113,179,109,182,102,188,97,188,96,198,93,197,87,196,73,196,68,196,67,198,57,199,55,201,48,196,43,195,46,191,45,187,44,185,35,182,27,173,22,173,22,169,14,165,15,152,12,147,10,143,9,140,7,142,4,142,4,139,8,138,8,134,7,128" alt="KarlovarskyKraj" target="KarlovarskyKraj" href="KarlovarskyKraj" />
<area shape="poly" coords="100,116,108,110,108,101,117,101,119,99,121,101,125,101,134,88,141,90,144,84,148,79,154,85,162,82,164,82,166,74,168,72,166,66,175,66,177,63,181,66,190,64,194,63,196,64,200,64,207,61,207,54,210,54,215,49,221,51,235,45,239,45,243,40,245,37,251,39,254,39,255,37,259,36,263,32,264,28,254,23,255,19,253,17,252,19,248,19,252,12,257,12,260,17,264,13,281,19,278,34,282,33,287,30,286,36,283,43,278,44,277,50,265,47,265,55,260,55,262,61,256,66,256,70,252,72,256,81,257,88,259,91,264,100,266,102,266,110,260,110,255,113,255,126,254,127,247,126,244,128,224,130,216,127,213,130,214,134,210,134,208,138,202,139,199,144,194,142,191,145,181,149,180,147,176,147,170,154,163,153,156,158,156,162,155,162,154,166,149,167,148,171,144,170,143,168,135,166,137,160,131,142,131,126,118,124,114,118,101,117,100,116,101,116" alt="UsteckyKraj" target="UsteckyKraj" href="UsteckyKraj" />
<area shape="poly" coords="326,18,329,16,334,16,339,20,343,20,346,17,348,20,346,22,350,22,352,20,353,22,357,22,358,24,356,30,356,36,358,40,366,45,367,56,371,57,376,53,382,56,387,61,388,62,387,66,387,69,388,69,390,79,390,86,389,89,395,96,394,98,386,98,382,93,379,94,378,97,376,99,374,99,374,103,373,103,370,100,366,100,364,98,355,98,354,101,347,100,337,91,331,86,327,85,327,81,317,81,315,84,315,87,310,89,309,94,308,95,304,92,297,92,298,99,294,102,292,103,284,104,281,100,271,99,270,96,266,96,257,75,260,73,260,68,264,64,266,58,269,56,270,52,272,52,276,55,279,53,286,45,298,50,305,50,309,45,315,41,318,41,321,43,329,41,329,34,332,26,332,22,330,20,327,18" alt="LibereckyKraj" target="LibereckyKraj" href="LibereckyKraj" />
<area shape="poly" coords="152,179,152,169,155,169,158,166,158,161,163,156,171,156,177,151,180,151,183,151,186,151,189,150,194,147,194,146,198,149,202,148,201,144,208,143,214,138,216,137,216,130,221,132,226,132,238,133,245,133,253,130,257,130,261,118,265,117,270,112,271,105,280,105,280,109,289,109,303,101,302,95,306,97,313,97,314,91,318,90,321,87,336,92,339,99,339,100,344,116,338,124,340,128,341,132,344,130,348,135,349,137,353,141,368,141,367,149,371,154,366,159,367,164,374,167,373,170,372,175,367,184,385,197,387,201,382,207,383,213,377,213,372,217,373,223,371,221,363,229,353,230,347,239,348,245,355,251,354,253,347,254,345,257,340,257,329,257,326,257,318,265,313,260,305,256,298,255,295,261,296,267,290,267,288,271,285,271,283,265,280,267,271,267,260,265,256,267,251,268,246,264,239,263,236,268,224,268,219,265,215,264,212,268,208,270,203,272,196,269,192,269,190,269,185,263,186,258,186,254,184,249,182,244,184,243,183,240,182,240,184,233,186,238,193,232,196,231,195,229,193,227,194,217,197,209,196,201,193,198,189,196,189,193,184,192,178,187,178,186,176,185,173,186,171,187,165,187,165,183,162,179,157,179,153,179" alt="StředočeskýKraj" target="StředočeskýKraj" href="StředočeskýKraj" />
<area shape="poly" coords="247,174,247,171,245,170,250,167,253,169,256,171,257,167,259,165,273,160,276,162,278,165,281,165,282,168,293,174,291,176,288,178,289,181,290,188,283,188,279,184,275,185,272,186,270,189,266,192,263,193,258,193,258,196,253,196,254,192,251,189,248,183,245,178,247,175" alt="Praha" target="Praha" href="Praha" />
<area shape="poly" coords="389,56,396,56,397,59,401,60,406,63,418,61,419,65,423,72,424,74,435,72,439,80,435,81,438,84,439,86,443,87,447,85,447,82,448,78,452,76,453,76,456,80,458,81,462,82,465,78,466,74,469,75,473,76,481,81,487,87,487,89,482,88,483,95,479,100,476,100,461,111,461,115,465,120,469,123,469,127,473,126,476,123,479,123,479,128,484,134,488,134,490,138,502,152,503,161,498,158,492,158,492,162,492,163,480,169,476,177,471,178,468,175,465,179,448,172,448,167,445,167,441,160,436,159,431,158,428,158,420,164,419,159,415,157,406,165,398,163,388,162,381,169,379,170,378,165,372,161,373,155,369,137,363,137,362,139,353,138,352,131,341,124,346,119,343,101,353,107,357,102,365,104,370,105,370,109,378,106,379,101,383,99,387,101,399,101,400,97,395,94,395,89,392,88,396,85,392,77,392,70,391,59" alt="Královéhradecký" target="Královéhradecký" href="Královéhradecký" />
<area shape="poly" coords="376,173,382,173,391,167,395,167,400,167,403,169,405,169,410,165,413,160,416,161,418,167,421,167,429,163,436,163,439,166,439,170,446,171,446,174,453,175,454,179,461,181,461,183,480,182,477,177,480,176,480,172,495,165,495,162,500,163,506,165,517,172,521,172,535,152,536,153,533,160,531,166,529,167,529,170,529,179,524,185,520,185,519,185,524,207,521,211,521,215,529,227,529,235,536,235,536,238,531,246,531,252,531,253,525,254,523,250,508,249,503,248,501,255,492,255,490,255,486,258,480,252,472,252,470,246,455,240,453,240,451,236,446,237,439,230,440,233,436,236,436,240,434,240,428,238,426,233,419,229,418,225,411,225,409,221,406,221,397,220,386,214,384,210,387,204,388,195,385,193,381,188,381,186,376,185,374,183,376,179" alt="PardubickýKraj" target="PardubickýKraj" href="PardubickýKraj" />
<area shape="poly" coords="137,171,143,173,145,174,148,176,147,178,145,178,147,182,150,184,153,183,154,182,157,185,166,188,167,191,175,191,175,190,177,192,184,197,184,201,189,200,192,203,192,211,190,215,190,219,190,221,190,225,189,226,188,227,187,229,189,231,189,233,184,233,181,234,180,236,175,234,173,235,175,244,179,252,184,254,183,264,181,266,187,267,186,270,183,272,183,278,186,282,186,290,184,292,187,297,188,299,187,301,184,303,181,305,181,306,178,310,178,312,178,316,177,319,178,323,179,324,176,327,174,331,172,334,167,332,164,334,164,338,165,340,165,350,161,351,156,365,146,361,146,352,138,341,131,336,121,336,119,328,104,312,103,306,93,298,75,297,75,294,73,290,72,287,70,284,66,283,61,281,61,265,57,263,55,263,55,259,54,255,52,250,49,247,48,245,48,239,46,237,42,235,39,234,39,229,35,229,36,226,42,221,42,216,46,212,49,208,49,204,49,203,59,204,59,201,61,201,64,204,77,197,89,201,95,199,97,199,99,192,103,191,114,184,114,183,118,183,129,188,131,181,136,177" alt="PlzeňskýKraj" target="PlzeňskýKraj" href="PlzeňskýKraj" />
<area shape="poly" coords="187,271,190,273,201,274,203,275,213,273,216,268,219,266,220,269,220,271,226,271,228,270,235,270,239,269,241,266,243,265,245,264,246,267,249,268,250,270,252,271,256,271,256,269,261,269,269,269,272,269,274,271,279,272,282,274,288,275,292,271,295,268,299,266,298,259,301,256,307,261,313,263,314,266,317,270,315,271,318,274,318,276,318,280,318,284,315,288,315,290,314,294,314,296,316,298,316,299,315,302,315,306,324,314,332,313,333,315,334,317,346,325,349,322,355,325,365,324,366,332,369,337,373,339,379,341,391,341,393,345,393,346,390,347,385,359,382,362,383,363,393,368,389,374,386,370,382,368,376,367,372,363,363,363,359,361,358,362,358,366,348,367,347,362,344,360,339,360,335,357,325,357,326,362,324,362,324,372,322,373,322,380,320,383,321,386,323,386,323,390,322,391,321,393,321,397,323,400,322,400,318,400,312,398,307,397,305,398,303,401,303,402,303,407,303,408,297,411,294,417,293,425,293,431,290,431,289,427,285,424,283,425,271,425,271,423,264,420,263,421,263,429,257,430,255,431,252,433,252,436,236,430,224,429,216,421,220,418,215,412,215,408,212,408,200,399,193,397,192,391,187,386,184,378,175,379,173,374,172,368,166,365,162,364,161,363,162,358,167,350,168,350,168,345,167,342,167,339,168,337,168,336,172,336,176,332,180,332,181,327,182,324,179,321,185,317,183,313,183,306,188,306,190,301,192,299,188,292,188,285,188,276,186,275" alt="JihočeskýKraj" target="JihočeskýKraj" href="JihočeskýKraj" />
<area shape="poly" coords="377,219,384,215,389,220,392,221,392,223,404,223,408,227,412,227,413,230,412,230,422,235,423,239,426,242,431,244,436,244,439,241,440,237,444,240,447,240,451,242,450,244,467,247,471,251,470,254,482,257,484,261,483,264,482,266,483,267,486,268,487,269,487,272,479,271,480,275,482,276,483,277,483,279,477,278,475,279,474,281,473,283,470,288,467,292,466,296,465,301,467,304,470,306,473,307,470,310,473,315,468,320,467,322,472,326,467,330,469,332,467,334,464,334,464,339,468,341,466,343,466,345,461,346,458,347,452,353,451,352,449,351,444,351,443,353,441,352,440,351,440,348,436,349,433,350,432,352,430,352,428,352,426,355,426,356,423,357,421,357,413,365,413,366,409,366,409,365,404,365,402,369,401,369,389,364,388,359,392,353,393,350,395,349,398,349,398,344,392,336,389,336,388,338,379,338,375,336,368,333,368,323,356,322,350,319,346,322,344,322,343,317,340,317,340,315,331,309,329,309,326,312,324,311,318,304,318,302,319,300,321,299,320,296,316,297,316,293,318,289,319,285,320,282,320,278,319,276,319,273,320,271,322,271,322,265,322,264,324,262,326,262,328,259,331,258,333,260,337,260,338,258,339,257,344,260,348,259,349,258,354,256,355,255,357,252,356,248,354,245,351,244,350,242,350,239,354,238,354,234,354,232,358,231,359,231,361,230,370,230,371,226,375,225,379,224" alt="VysočinaKraj" target="VysočinaKraj" href="VysočinaKraj" />
<area shape="poly" coords="504,252,507,252,507,254,521,253,525,255,528,256,525,258,525,268,530,268,530,269,529,272,529,273,530,276,530,279,532,280,532,283,530,286,531,288,535,290,536,292,537,293,540,293,548,284,543,275,545,274,548,277,552,280,553,286,559,292,560,297,572,305,572,312,570,312,571,321,572,321,572,329,578,329,577,331,572,334,572,338,568,338,569,345,576,345,580,343,582,345,582,349,580,352,583,353,587,352,591,357,596,356,598,356,597,361,601,361,605,365,610,366,613,364,616,365,616,366,619,366,619,370,628,375,631,378,630,380,629,382,622,385,621,386,618,386,615,382,609,382,606,386,605,387,601,387,596,382,584,378,580,377,572,385,571,385,569,385,569,391,564,398,561,403,558,408,554,413,554,421,551,421,549,417,550,410,549,407,546,405,539,407,533,407,528,403,522,402,521,397,519,394,511,395,510,393,507,390,501,393,497,392,495,392,491,401,488,405,485,405,484,403,481,403,481,404,471,403,451,402,440,394,439,391,436,391,436,387,432,387,432,383,425,382,425,381,423,381,419,382,416,383,412,385,411,384,405,382,397,377,391,376,398,369,400,372,403,371,408,367,409,368,410,370,413,370,415,367,422,361,427,360,438,352,440,356,447,354,449,354,451,355,457,354,461,352,460,349,466,348,470,344,472,344,473,339,470,338,471,329,474,329,474,325,470,320,478,315,477,312,472,312,473,309,476,309,477,306,475,301,468,300,473,287,480,286,480,283,486,284,487,275,490,271,491,269,489,266,487,265,488,262,489,259,503,258,504,253" alt="JihomoravskýKraj" target="JihomoravskýKraj" href="JihomoravskýKraj" />
<area shape="poly" coords="573,313,579,311,579,308,583,307,590,307,598,300,598,296,597,294,596,292,596,287,597,287,598,291,598,292,602,292,605,293,608,296,609,297,615,294,616,291,616,289,619,287,622,287,626,289,630,286,632,286,630,283,630,282,635,279,637,280,640,282,643,281,647,277,648,272,652,269,653,267,657,268,659,266,661,263,664,263,665,263,667,268,672,267,687,266,689,267,695,271,697,271,698,270,702,270,703,273,704,275,710,278,711,280,709,280,710,283,714,286,715,287,715,290,714,292,711,296,704,299,692,302,687,311,686,313,686,321,682,330,683,341,676,349,664,349,662,352,660,367,648,366,638,378,633,378,631,373,626,369,625,370,621,364,621,362,618,362,617,361,610,361,609,363,607,362,605,358,601,358,600,356,595,352,589,352,588,349,585,349,585,345,582,341,574,342,571,342,572,340,579,332,582,327,581,326,578,325,575,322,574,320,573,317" alt="ZlínskýKraj" target="ZlínskýKraj" href="ZlínskýKraj" />
<area shape="poly" coords="539,110,560,118,572,121,577,130,589,131,589,140,597,139,598,146,593,144,590,151,582,155,579,159,579,160,578,168,576,171,579,175,572,181,569,190,573,193,572,198,569,198,568,202,571,204,568,205,572,214,576,214,577,216,575,218,584,218,593,211,593,214,596,221,598,223,603,217,607,216,619,231,628,230,630,233,632,242,638,242,645,252,651,253,651,257,649,259,651,263,644,269,642,278,640,279,632,274,628,278,625,278,627,284,618,285,612,287,611,291,602,289,600,285,596,285,592,290,593,295,594,297,589,301,590,305,577,305,574,307,573,304,573,300,563,295,563,286,560,287,547,270,539,276,542,285,543,290,538,290,536,287,538,283,533,276,533,271,535,269,532,265,529,265,529,262,533,261,535,253,534,247,538,243,538,235,531,224,528,224,528,218,524,214,529,209,524,189,534,181,532,171,540,151,549,148,551,150,556,150,554,140,555,135,548,132,543,126,544,120,537,116,539,111" alt="OlomouckýKraj" target="OlomouckýKraj" href="OlomouckýKraj" />
<area shape="poly" coords="620,139,627,136,630,130,633,134,633,136,632,137,632,142,636,146,636,147,632,148,627,153,620,153,618,155,618,159,624,166,632,166,638,178,649,188,658,187,665,181,671,181,672,176,667,174,669,172,675,177,675,182,683,186,686,183,691,187,696,188,697,194,701,195,706,193,721,197,729,197,729,202,732,204,732,208,730,208,737,229,749,232,750,235,754,235,756,234,760,241,760,247,766,255,760,263,755,265,749,263,741,263,737,263,728,266,729,272,723,279,719,283,714,283,713,279,705,273,705,266,703,268,690,267,689,263,681,263,673,264,672,266,664,259,662,260,650,251,650,248,645,245,637,236,636,240,633,240,634,235,635,230,630,227,621,228,617,227,610,214,610,211,608,206,605,204,602,206,605,211,598,213,598,217,594,217,596,210,594,207,589,208,580,215,580,208,574,209,573,205,574,197,576,196,575,190,573,188,575,180,579,176,579,170,578,167,581,166,581,162,581,160,589,154,593,155,594,148,599,151,600,147,605,139,618,138" alt="MoravskoslezskyKraj" target="MoravskoslezskyKraj" href="MoravskoslezskyKraj" />
</map>

1 个答案:

答案 0 :(得分:0)

检查一下。 jQuery maphilight。 Exapmple 1 Exapmple 2

`https://jsfiddle.net/1rja65rx/22/`