Cambiar color de Paises por Grupo en Mapa

[jasch_21]

Hola tengo un mapa en svg, el cual si paso el mouse por los países estos cambian de color, puedo definir los colores que necesite por país, pero quiero ahora que al pasar el mouse por un botón se activen o cambie de color un grupo de países en particular.

Ejemplo

Mapa

Boton1 y Botón 2


Al pasar el mouse por el botón1 uno, los países cambien de color (USA, México, Argentina, Brasil, España, Alemania.)

Botón 2
Al pasar el mouse por el boton2, el resto de países que no se incluyen en la lista anterior cambien de color


Mi duda en que es mejor desarrollar esto, si en JavaScript o de que otra manera, cualquier idea seria de mucha utilidad,

muchas gracias

[caricatos]

Hola:

Si los botones están dentro del mismo mapa supongo que bastará solo con estilos (:hover), igual que las áreas del mapa (supongo que el resalte lo consigues así). Tal vez agrupando los países a resaltar en una etiqueta "g".

Saludos

[jasch_21]

hola caricatos

intente realizar lo que me comenta:

agrupe países dentro de un g, pero se siguen mostrando individual, no cambian juntos de color.

aquí esta el mapa

Código:

http://jasch.azurewebsites.net/mapa/mapa.html

le comento que los botones estan fuera del mapa y si con hover estoy cambiando el color

lo que quiero lograr es lo siguiente:

abra un método en el que puede colocar los ID de paises, que deseo que cambien de color

en el listado dentro del svg indica los ID de cada países

como asignar al botón1 un grupo de ID'S para que estos cambien a un color todos al mismo tiempo, pasando el mouse por el botón1

y el resto de ID'S utilizarlos con el otro botón2

ya que se piensa ir agregando países al botón1 y quitarlos del botón2, de una forma mas simple


<!-- All areas are listed in the line below. You can use this list in your script. -->
<!--{id:"AD"},{id:"AE"},{id:"AF"},{id:"AG"},{id:"AI"}, {id:"AL"},{id:"AM"},{id:"AO"},{id:"AR"},{id:"AS"}, {id:"AT"},{id:"AU"},{id:"AW"},{id:"AX"},{id:"AZ"}, {id:"BA"},{id:"BB"},{id:"BD"},{id:"BE"},{id:"BF"}, {id:"BG"},{id:"BH"},{id:"BI"},{id:"BJ"},{id:"BL"}, {id:"BN"},{id:"BO"},{id:"BM"},{id:"BQ"},{id:"BR"}, {id:"BS"},{id:"BT"},{id:"BV"},{id:"BW"},{id:"BY"}, {id:"BZ"},{id:"CA"},{id:"CC"},{id:"CD"},


cualquier orientacion sera de mucha utilidad
muchas gracias por su ayuda, saludos