CSS - Como hago para darle color al seleccionar una region en un mapa

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 9 puestos en CSS (en relación al último mes)
Gráfica de CSS

Como hago para darle color al seleccionar una region en un mapa

Publicado por Javier (2 intervenciones) el 17/05/2017 06:29:28
buenas amigos disculpen tengo un codigo en html de crear un mapa con area de tipo poligonal; al seleccionar la region lo hace sin problemas perooo necesito que al pasar el cursor sobre cualquier pais cambie de color no se como hacerlo les dejo el codigo en html ....les agradezco nuevamente de su ayuda.....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<?php
   // $ano_escogido=$_GET['fecha'];
?>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   	<title>Sin titulo 1</title>
</head>
 
<body  >
<img src="mapa02.jpg" width="1029" height="479" usemap="#map_mundo"/>
    <map name="map_mundo">
        <area shape="poly" coords="298,367,305,365,306,368,309,365,314,369,323,374,322,380,330,380,333,375,335,379,328,385,324,389,323,395,321,399,326,407,325,412,316,416,312,416,310,423,303,422,303,425,306,427,305,429,303,434,298,437,296,441,300,443,301,445,297,449,295,452,293,452,292,456,292,459,288,459,283,457,283,456,281,454,282,451,283,446,285,441,285,436,285,431,283,425,285,422,286,418,287,414,286,409,288,406,290,401,289,396,289,391,290,386,293,382,294,378,293,376,294,371,298,368" title="Argentina" href="dos.php"/>
    </map>
</body>
</html>
como veran estoy probandolo con una sola region en este caso argentina y al colocar el cursor sobre ese pais me muestra el nombre y si le doy click me envia a la pagina llamada dos, pero no se como hacer para cuando el cursor este sobre argentina cambie de color y asi para cualquier otro pais...les agradezco su ayuda,,,,,
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hago para darle color al seleccionar una region en un mapa

Publicado por txema (17 intervenciones) el 18/05/2017 17:38:44
Hola Javier.

Si bien en la etiqueta <area> podemos usar onmouseover y onmouseout, que puede ser útil para otros usos (ver https://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap,) no es útil para lo que precisas ya que tendríamos que trabajar con una imagen específica a superponer en cada caso/país.

El código a implementar en cada <area> sería parecido a esto:
1
onmouseover="this.src='argentina.jpg';" onmouseout="this.src='mapa02.jpg';"
La línea completa:
1
<area shape="poly" coords="298,367,305,365,306,368,309,365,314,369,323,374,322,380,330,380,333,375,335,379,328,385,324,389,323,395,321,399,326,407,325,412,316,416,312,416,310,423,303,422,303,425,306,427,305,429,303,434,298,437,296,441,300,443,301,445,297,449,295,452,293,452,292,456,292,459,288,459,283,457,283,456,281,454,282,451,283,446,285,441,285,436,285,431,283,425,285,422,286,418,287,414,286,409,288,406,290,401,289,396,289,391,290,386,293,382,294,378,293,376,294,371,298,368" title="Argentina"  onmouseover="this.src='argentina.jpg';" onmouseout="this.src='mapa02.jpg';" href="dos.php"/>

Te recomiendo utilizar el plugin de jQuery Maphilight

Desde este enlace de descarga tienes acceso a demos y tutoriales.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 9 puestos en CSS (en relación al último mes)
Gráfica de CSS

Como hago para darle color al seleccionar una region en un mapa

Publicado por Javier (2 intervenciones) el 19/05/2017 01:46:20
buenas amigo muchas gracias me sirvio su ayuda....te corrijo tu codigo me funciono de esta manera...

1
2
3
4
<img name="mapa" src="mapa02.jpg" width="1029" height="479" usemap="#map_mundo"/>
<map name="map_mundo">
    <area shape="poly" coords="298,367,305,365,306,368,309,365,314,369,323,374,322,380,330,380,333,375,335,379,328,385,324,389,323,395,321,399,326,407,325,412,316,416,312,416,310,423,303,422,303,425,306,427,305,429,303,434,298,437,296,441,300,443,301,445,297,449,295,452,293,452,292,456,292,459,288,459,283,457,283,456,281,454,282,451,283,446,285,441,285,436,285,431,283,425,285,422,286,418,287,414,286,409,288,406,290,401,289,396,289,391,290,386,293,382,294,378,293,376,294,371,298,368" title="Argentina" href="dos.php" onmouseover ="document.images.mapa.src = 'argentina.jpg'" onmouseout="document.images.mapa.src = 'mapa02.jpg'"/>
</map>


y consegui dos formas mas de hacerlo una con xml usando la etiqueta svg y algo de javascript
y la otra forma usando puro css y en el html usando las etiquetas <ul> <li> <a href=""><img src=""/></a> </li> </ul>

claro es batante laborioso porque hay que cuadrar margenen en el css pero muy bueno...
y pues este ejemplo que facilitaste es rapido pero tambien me gusto aunque me recomiendas usar lo que no he aprendido todavia que es el condenado jquery jejejejeje......gracias compa por ayudarme ......
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de txema
Val: 39
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como hago para darle color al seleccionar una region en un mapa

Publicado por txema (17 intervenciones) el 20/05/2017 01:13:29
Tu mismo Javier, Todos los caminos conducen a Roma.

Mi particular opinión: Mi solución inicial, corregida por tí y para tu página (onmouseover onmouseout) te va a resultar muy pesada. (estas trabajando con el mapa-mundi y( cuento hasta 247 países) qu serán otras tantas imágenes..

css y html usando las etiquetas <ul> <li> etc. es más de lo mismo y arcaico. No funciona con HTML5 (con etiquetas <map> y <area>)

xml usando la etiqueta svg ya ha quedado obsoleta y lenta incluso para google maps

Personalmente me voy al plugin de JQuery que, aunque desconozcas el lenguaje JQuery, es muy fácil de adaptarlo.
Solo tendrías que trabajar modificando a tu gusto los valores
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
fill: true,
fillColor: '000000',
fillOpacity: 0.2,
stroke: true,
strokeColor: 'ff0000',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
// sombras
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false

Pero te reitero lo dicho en mi primera línea. Tú mismo, porque todos los caminos conducen a Roma. Y yo optaría por el que más me guste y conozca.

Saludos y éxito.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar