php - 如何制作可点击的 map 悬停效果？

Question

你好，我有这段代码:

<img src="/map.png');" alt="usa" usemap="#Map" border="0" style="position:absolute; width:500px; height:500px; opacity:0" width="500" height=":500"/>
</div>
    <map name="Map" id="Map">
    <area shape="poly" coords="215,226,213,232,216,237,224,239,223,245,225,248,221,253,225,271,218,275,216,274,212,276,203,271,193,270,191,271,184,271,184,268,186,266,181,260,180,255,190,250,188,246,189,234,203,228,206,232,210,229,212,224,215,226">
    <area shape="poly" coords="234,224,234,227,231,231,240,239,246,241,249,238,255,243,256,247,253,250,242,254,241,258,236,262,232,267,225,270,222,253,226,248,224,245,225,238,217,236,214,232,216,226,219,223,234,224">
    <area shape="poly" coords="274,224,277,223,281,225,293,226,298,225,298,227,303,226,304,229,308,227,315,234,318,231,323,233,320,238,315,238,312,240,303,243,300,246,280,244,270,247,255,249,257,247,256,243,250,238,257,229,253,224,257,224,257,221,264,225,266,220,274,224">
    <area shape="poly" coords="145,213,145,217,149,217,150,222,147,226,151,232,155,233,158,239,162,242,162,248,164,249,161,250,160,254,164,255,158,271,153,268,140,264,137,265,130,261,126,261,114,264,106,262,104,260,107,252,110,252,112,250,111,246,113,244,116,245,115,239,121,232,120,230,124,222,129,223,134,219,141,219,142,213,144,213">
    <area shape="poly" coords="256,229,246,240,241,238,232,231,235,227,235,223,237,219,237,211,250,209,254,212,252,224,256,229">
    <area shape="poly" coords="341,215,341,211,354,212,357,213,362,209,365,211,362,214,359,221,349,236,352,240,350,242,352,252,349,264,347,266,330,265,321,260,318,252,310,255,308,250,300,250,296,251,291,246,300,247,303,243,312,241,316,238,321,238,328,227,324,216,318,211,318,207,322,208,325,205,328,205,341,215">
    <area shape="poly" coords="265,206,275,206,284,207,284,210,288,210,289,207,291,209,294,207,309,207,313,205,317,207,317,211,323,216,327,227,324,232,318,230,316,233,308,226,304,227,303,225,299,226,298,224,294,225,281,224,277,223,275,223,266,219,264,224,257,220,256,224,254,223,254,212,251,209,252,207,254,208,263,204,265,206">
    <area shape="poly" coords="173,207,176,203,180,211,183,211,185,231,190,232,188,233,187,246,189,249,179,255,181,260,184,266,183,268,183,271,176,267,169,271,161,272,159,271,165,254,161,253,162,251,165,249,162,247,163,242,158,238,155,232,152,231,148,226,151,223,157,225,160,222,163,222,165,220,168,221,166,212,168,203,171,202,173,207">
    <area shape="poly" coords="108,195,107,203,115,213,128,217,129,220,131,220,129,222,123,221,119,229,120,232,114,239,115,244,113,243,108,246,100,240,97,236,93,234,88,226,89,225,92,224,94,221,96,220,98,222,101,222,102,220,99,216,95,216,88,211,83,213,77,224,73,221,73,217,77,217,76,213,80,205,86,209,89,204,98,189,101,189,108,195">
    <area shape="poly" coords="147,176,147,177,145,180,147,190,144,195,144,212,142,212,141,218,137,218,134,218,132,219,129,219,128,217,116,212,108,203,108,195,101,188,98,188,95,185,100,179,126,178,128,176">
    <area shape="poly" coords="214,175,217,178,217,185,223,192,224,198,228,199,230,203,228,206,233,206,236,212,237,219,234,223,218,222,215,225,212,223,210,228,207,231,206,230,208,222,204,218,204,212,205,210,203,198,204,195,202,187,203,184,205,187,209,173,214,170,214,170,214,175">
    <area shape="poly" coords="330,166,333,168,335,173,350,180,355,179,358,176,373,168,379,167,385,169,390,173,392,183,389,200,371,204,368,207,365,210,362,208,357,212,355,211,340,210,340,213,329,204,325,204,328,200,327,192,329,184,326,182,327,179,322,177,322,170,324,167,328,169,330,166">
    <area shape="poly" coords="321,170,321,177,326,179,325,182,329,185,327,192,327,200,322,207,317,207,314,204,309,207,294,206,291,208,289,206,291,195,286,184,284,184,287,180,293,182,294,178,295,178,297,171,302,165,308,166,314,171,321,170">
    <area shape="poly" coords="242,168,244,173,246,176,245,179,248,183,251,183,252,185,256,184,255,190,262,197,260,199,262,203,254,207,252,206,250,209,236,211,233,206,229,205,231,203,229,198,224,197,224,192,218,184,218,178,215,175,215,169,222,166,228,167,232,170,234,165,242,168">
    <area shape="poly" coords="175,161,176,167,174,168,173,182,175,188,173,205,171,201,168,203,165,211,167,220,165,219,163,221,160,221,157,224,151,222,150,216,146,216,145,195,148,191,146,180,148,177,148,174,138,174,138,168,149,164,163,165,171,161,175,161">
    <area shape="poly" coords="203,182,200,187,203,195,202,199,204,210,203,212,204,219,207,222,205,229,204,227,192,232,186,230,184,210,181,210,176,202,174,205,176,188,174,182,175,169,177,167,176,160,189,160,194,161,200,161,208,172,205,184,203,182">
    <area shape="poly" coords="101,169,98,171,100,178,94,185,97,189,86,208,80,204,75,213,76,216,73,216,71,215,57,213,55,208,46,206,45,203,45,201,52,199,53,198,50,195,47,194,46,192,51,185,51,182,52,178,53,175,49,168,51,163,58,158,66,161,69,159,73,163,76,161,75,159,80,157,82,159,86,154,90,154,92,158,99,163,101,169">
    <area shape="poly" coords="253,148,259,157,273,165,277,164,284,170,290,168,291,171,296,171,295,177,293,177,293,181,287,179,283,185,285,185,290,195,287,209,285,209,285,207,276,205,265,205,261,199,263,197,256,190,257,184,252,184,252,182,248,182,246,179,248,176,244,173,243,167,239,165,241,165,246,158,249,160,253,148">
    <area shape="poly" coords="219,135,217,139,219,146,224,151,227,150,235,154,241,164,233,164,232,169,229,167,223,165,215,168,209,172,200,160,194,161,189,159,184,159,182,149,186,145,185,141,193,133,195,129,209,127,219,135">
    <area shape="poly" coords="323,128,322,130,324,141,323,144,325,154,324,158,328,165,330,165,328,167,324,166,322,169,315,170,308,165,302,164,301,159,289,143,288,133,298,127,301,135,304,128,308,128,311,130,313,129,314,126,318,129,323,128">
    <area shape="poly" coords="287,133,288,143,300,159,301,165,296,171,291,171,290,167,284,169,278,163,274,164,260,157,253,147,253,138,257,133,262,135,262,131,277,132,277,129,285,130,284,127,289,124,298,126">
    <area shape="poly" coords="34,130,35,133,38,132,49,132,50,130,59,139,62,135,63,138,71,134,82,139,87,136,88,142,94,147,90,153,85,153,82,158,80,156,74,158,75,161,73,162,69,158,66,160,58,157,50,162,48,168,52,175,50,181,46,180,34,175,22,165,20,157,21,154,21,148,18,148,11,139,4,135,0,128,4,126,9,127,11,124,16,127,20,123,29,129,34,130">
    <area shape="poly" coords="182,120,182,130,184,132,190,131,192,133,184,140,185,145,181,149,183,159,170,160,162,164,149,163,143,165,139,161,140,157,138,153,140,147,143,146,149,138,149,135,152,133,155,136,160,128,163,127,165,121,182,120">
    <area shape="poly" coords="231,129,242,127,248,122,250,122,255,134,252,138,253,148,249,159,246,157,241,163,236,153,227,149,224,150,220,145,218,139,220,134,215,130,217,125,225,120,231,129">
    <area shape="poly" coords="110,115,113,122,116,124,119,133,122,133,129,149,128,151,128,156,137,167,137,174,127,175,126,177,100,178,99,172,101,170,100,162,93,157,91,153,95,147,89,141,88,135,91,134,90,128,92,121,99,121,101,116,110,115">
    <area shape="poly" coords="113,103,116,108,120,105,122,106,129,103,133,106,138,107,140,112,143,109,153,110,157,116,165,121,162,127,159,127,155,135,152,132,148,135,148,138,143,146,139,146,137,153,139,157,138,161,142,165,138,167,129,156,129,151,130,150,123,133,119,132,117,124,114,122,111,114,105,115,101,111,104,103,113,103">
    <area shape="poly" coords="56,97,60,94,68,94,71,97,75,96,80,98,80,102,86,104,91,111,101,111,104,115,101,115,99,120,92,120,89,129,90,133,82,138,71,133,63,137,62,134,59,137,49,128,48,131,38,131,35,132,34,129,29,128,21,122,21,120,25,118,29,120,34,120,39,117,40,111,45,108,42,104,45,101,44,99,48,97,51,93,56,97">
    <area shape="poly" coords="273,87,275,91,287,90,287,93,290,94,288,98,296,112,298,125,289,122,283,126,284,129,276,128,276,130,261,130,261,134,258,132,256,133,251,122,249,121,248,114,243,117,242,112,237,111,240,106,236,101,236,95,238,94,239,97,244,98,247,95,250,98,261,95,265,91,268,93,273,87">
    <area shape="poly" coords="308,82,309,82,310,85,311,84,312,86,316,84,318,85,322,84,322,85,326,95,325,115,324,117,322,120,323,121,323,127,319,128,313,125,312,128,311,129,309,127,303,127,301,132,299,126,296,112,289,98,291,94,288,92,286,84,292,83,298,83,303,81,303,79,308,82">
    <area shape="poly" coords="207,76,207,91,205,93,207,96,195,106,195,109,193,113,191,113,190,115,193,122,198,122,201,127,195,128,193,132,190,130,184,131,183,130,183,120,165,121,158,115,154,109,154,105,157,104,158,101,157,98,160,95,158,92,163,88,167,92,174,90,175,87,181,80,182,83,186,81,186,78,191,71,202,70">
    <area shape="poly" coords="229,80,227,85,231,99,235,96,235,101,239,106,235,112,242,113,243,118,247,116,248,121,241,126,241,126,231,128,225,119,217,124,214,129,210,126,202,127,199,122,193,121,191,116,192,114,193,114,196,110,196,106,208,96,207,93,208,92,208,76,205,73,212,67,218,73,226,74">
    <area shape="poly" coords="261,72,267,71,270,75,278,74,280,72,285,76,282,79,285,83,287,90,275,90,273,86,268,92,265,89,260,95,250,97,247,94,244,97,240,97,238,93,231,97,228,85,231,80,226,73,223,72,226,64,228,61,228,59,232,62,240,60,246,60,253,57,260,65,261,72">
    <area shape="poly" coords="156,55,156,58,153,58,153,67,156,67,160,73,161,81,164,83,163,87,157,92,159,95,156,98,157,101,156,103,153,104,153,109,142,108,140,111,139,106,133,105,130,102,122,105,120,104,116,107,113,102,107,102,107,97,101,88,106,82,102,78,104,75,107,77,110,76,111,80,118,83,118,84,123,83,124,81,126,82,130,81,135,73,134,71,137,67,140,67,142,62,148,61,149,55,156,55">
    <area shape="poly" coords="135,55,141,54,144,57,148,56,147,60,142,62,140,66,137,66,135,68,133,71,134,73,129,80,126,81,124,79,123,82,119,83,119,82,112,80,111,76,107,76,97,69,98,68,95,64,100,56,105,52,107,51,111,52,114,55,119,55,121,50,129,52,135,55">
    <area shape="poly" coords="171,42,183,44,185,43,194,42,199,47,198,51,196,53,198,55,197,70,191,70,185,78,185,81,183,82,181,79,174,87,173,89,168,91,163,88,165,82,162,81,161,73,157,66,154,66,154,59,157,58,157,55,161,48,165,48,171,42">
    <area shape="poly" coords="322,83,318,84,315,82,313,85,312,83,310,83,309,79,308,81,301,77,302,81,298,83,292,82,286,83,283,79,287,76,280,70,277,73,271,73,267,70,262,71,261,65,257,60,259,59,256,56,256,53,263,56,265,46,275,47,277,50,281,44,286,46,287,42,292,41,298,49,299,53,301,57,305,60,308,66,319,74,322,83">
    <area shape="poly" coords="86,41,90,50,97,52,99,56,94,64,97,68,96,70,103,75,101,78,105,82,100,88,106,97,106,102,103,102,100,111,92,110,87,103,81,102,81,98,75,95,71,96,68,93,60,93,56,96,52,93,54,91,51,89,60,75,58,73,66,63,68,55,74,51,72,45,79,39,86,41">
    <area shape="poly" coords="201,31,209,21,217,20,229,19,235,17,242,24,247,26,251,33,256,38,257,46,262,54,256,52,255,56,257,58,256,59,253,56,246,59,240,59,232,61,226,58,227,61,225,63,222,72,219,72,212,65,206,71,204,69,198,70,199,55,197,53,199,52,199,46,195,42,198,39,198,31">
    <area shape="poly" coords="197,38,194,41,185,42,183,43,171,41,165,47,161,47,156,54,149,54,144,56,142,53,136,54,130,51,120,49,116,50,115,48,117,47,118,43,121,40,125,44,132,35,125,32,127,29,134,31,143,25,134,16,134,16,134,16,155,18,165,21,172,18,180,19,184,25,189,27,192,33,197,32">
    <area shape="poly" coords="142,25,134,30,126,28,124,33,130,36,125,42,121,39,117,42,117,46,114,48,116,51,120,50,119,54,114,54,112,51,107,50,99,55,98,51,90,49,86,40,80,38,85,32,90,31,92,28,98,29,104,23,104,22,117,15,120,10,124,11,128,14,132,16,142,25">
    <area shape="poly" coords="264,1,272,6,279,13,279,15,282,19,282,22,286,31,286,35,291,41,286,41,285,45,280,43,277,49,275,47,264,45,262,53,258,46,257,37,251,32,248,26,243,23,236,17,243,16,249,7,259,3,261,3,264,1">
</map>

当我将鼠标悬停在 map 图像上时，我想粘贴一个图像，我该怎么做？

这是一个网站，所以您会明白我的意思:http://www.mercador.ro或 http://www.tocmai.ro

谢谢你的帮助:D

Answer 1

你见过 imagemapster 插件吗？

http://www.outsharked.com/imagemapster/

这里是他们演示的链接以供快速分析:

http://www.outsharked.com/imagemapster/default.aspx?demos.html#usa

这是一个简化的例子:

http://members.shaw.ca/sites/AbsoluteBeginners/beginner1.htm