necesito hacer en html lo mismo que esta en el fash.
un mapa donde clickeando en una de los estados se muestre una informacion.
cree el mapa de imagenes y ahora creo que deberia ir javascript, la verdad no se, pero vi en un ejemplo que lo hacian con javascript, y no lo pude hacer.
este es el link del flash
www.grupohelvetia.tuars.com/map/deutschland_plz_2014.swf
debajo adjunto el mala de imagene que cree
Código HTML:
<body> <img src="http://www.grupohelvetia.tuars.com/map/map.png" width="352" height="396" usemap="#Map" border="0" /> <map name="Map" id="Map"> <area shape="poly" coords="122,5,144,10,147,11,152,6,165,13,163,17,167,19,164,26,171,26,169,35,176,28,188,34,197,30,199,39,191,46,193,51,202,49,212,53,214,48,225,50,228,62,213,70,230,83,208,89,228,92,220,99,205,99,189,109,179,108,173,102,166,105,159,119,148,111,157,96,158,90,154,86,163,81,163,73,151,70,145,57,132,55,130,41,129,34,123,36,123,29,133,27,132,21,122,5" class="flatshape" id="01" /> <area shape="poly" coords="120,361,135,367,149,377,160,376,163,372,178,389,187,372,202,374,203,367,197,364,197,346,214,328,204,306,189,300,174,299,155,311,138,313,133,322,125,324,120,345,119,361" class="flatshape" id="02" /> <area shape="poly" coords="117,362,108,371,88,372,82,363,86,338,107,301,66,292,44,273,62,267,86,253,101,265,132,278,150,263,165,271,177,297,157,308,136,311,130,318,122,328,117,346,117,362" class="flatshape" id="03"/> <area shape="poly" coords="204,379,219,378,245,368,264,365,278,375,281,363,267,343,288,330,292,317,301,319,303,304,286,294,271,290,254,296,244,311,240,303,219,298,206,304,219,327,199,347,200,362,206,368,204,379" class="flatshape" id="04"/> <area shape="poly" coords="241,236,255,253,250,260,261,273,278,288,267,288,255,292,245,304,236,299,223,296,209,300,203,303,181,297,169,275,157,261,170,252,163,245,159,236,166,227,185,230,187,222,214,225,223,231,233,230,242,235" class="flatshape" id="05" /> <area shape="poly" coords="145,109,154,97,154,90,151,85,159,80,159,75,149,72,142,62,129,59,117,63,115,71,104,67,101,62,61,76,58,83,65,91,64,107,53,110,55,120,66,121,70,135,82,149,110,146,117,143,116,129,110,122,128,121,136,103,144,109" class="flatshape" id="06" /> <area shape="poly" coords="217,42,230,39,258,25,276,38,286,49,299,58,306,78,303,93,300,102,314,112,316,121,308,126,292,122,263,121,246,113,234,111,231,121,224,115,216,118,203,117,198,107,206,101,219,102,232,92,220,89,236,86,221,71,229,65,229,52,223,46" class="flatshape" id="07" /> <area shape="poly" coords="68,140,77,150,91,151,102,150,110,165,117,160,123,164,123,176,120,188,106,195,91,203,76,186,65,171,65,163,50,157,60,152,58,148,67,141" class="flatshape" id="08" /> <area shape="poly" coords="36,155,62,164,64,174,73,185,73,202,44,224,31,207,35,200,31,195,42,179,35,155" class="flatshape" id="09" /> <area shape="poly" coords="44,271,82,253,78,240,87,231,98,218,95,205,89,205,77,189,77,202,45,226,46,233,38,239,36,252,48,260" class="flatshape" id="10" /> <area shape="poly" coords="81,242,84,250,93,256,114,268,131,275,150,262,166,251,158,241,157,232,164,226,167,220,164,209,169,198,168,189,160,182,152,183,155,173,149,169,141,180,129,175,124,188,98,203,102,218" class="flatshape" id="11" /> <area shape="poly" coords="170,215,170,225,180,226,185,217,216,223,232,227,237,212,242,189,234,179,242,173,262,150,253,145,263,142,272,124,262,124,236,114,233,123,224,118,218,120,205,120,198,117,197,127,201,133,199,147,188,149,187,159,191,168,180,173,167,182,172,191,170,205" class="flatshape" id="12" /> <area shape="poly" coords="236,229,247,238,254,229,270,225,311,200,310,191,319,193,324,201,331,200,335,180,332,169,318,152,321,144,315,127,309,129,300,126,288,125,274,124,266,143,262,154,239,179,244,186" class="flatshape" id="13" /> <area shape="poly" coords="138,107,157,121,161,122,166,111,172,106,179,111,194,110,194,122,197,131,196,144,185,149,186,165,170,176,159,179,156,170,148,166,139,176,125,174,125,161,116,156,111,160,108,150,120,147,120,129,117,125,132,124" class="flatshape" id="14" /> </map> <div>Aca se muestra la info de cada estado</div> </body>