0

Hi, I have this code:

<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>

when I hover a I want to peste a image over the map image, how can I do that ?

Here is a site so you'll know what I mean : http://www.mercador.ro or http://www.tocmai.ro

Thank you for your help :D

  • http://stackoverflow.com/questions/15649184/image-hover-when-over-area-map – Nouphal.M Jan 30 '14 at 19:27
  • Image maps are one of the most difficult things to try to do. `Imagemapster` is by far the most powerful -- and easiest -- way to do what you want. The way to learn it is to play with his demos, beginning with the one for absolute beginners. It is much easier than it looks - his demos are complex. Recreate the demos on your own system, and then start experimenting. The Beatles demo is a good one to start out with. Good luck with your project. – cssyphus Jan 30 '14 at 22:45
  • I saw your comment in my message (I responded above). The best way to respond to someone's proposed answer is to click the "add comment" link below the answer. It will all come together for you once you've been on here for a while -- welcome to StackOverflow! – cssyphus Jan 30 '14 at 22:47
  • Ok, I managed to do my map :D Thank you guys for the help ! – user3254675 Feb 01 '14 at 10:25

1 Answers1

1

Have you seen the imagemapster plugin?

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

Here is a link to their demos for quick analysis:

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

Here is a simplified example:

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

cssyphus
  • 37,875
  • 18
  • 96
  • 111