| mapa de imagenes con javascript
hola amigos, me meti en u problemon y no se como salir.
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>
Última edición por funnico; 10/10/2014 a las 09:34 |