Tema: Mapeo de mapas con cambio de colores
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 18/10/2014, 16:11
Avatar de lauser
lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 11 años, 4 meses
Puntos: 401
Respuesta: Mapeo de mapas con cambio de colores
Te pongo este ejemplo.
Correctamente este es de un mapa de España y marca las provincias.

Te lo envió en 3 respuestas...

Código CSS: 
Ver original
  1. /*!
  2.  * jQuery UI CSS Framework 1.8.20
  3.  *
  4.  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  5.  * Dual licensed under the MIT or GPL Version 2 licenses.
  6.  * http://jquery.org/license
  7.  *
  8.  * http://docs.jquery.com/UI/Theming/API
  9.  */
  10.  
  11. /* Layout helpers
  12. ----------------------------------*/
  13. .ui-helper-hidden { display: none; }
  14. .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
  15. .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
  16. .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
  17. .ui-helper-clearfix:after { clear: both; }
  18. .ui-helper-clearfix { zoom: 1; }
  19. .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
  20.  
  21.  
  22. /* Interaction Cues
  23. ----------------------------------*/
  24. .ui-state-disabled { cursor: default !important; }
  25.  
  26.  
  27. /* Icons
  28. ----------------------------------*/
  29.  
  30. /* states and images */
  31. .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
  32.  
  33.  
  34. /* Misc visuals
  35. ----------------------------------*/
  36.  
  37. /* Overlays */
  38. .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  39.  
  40.  
  41. /*!
  42.  * jQuery UI CSS Framework 1.8.20
  43.  *
  44.  * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
  45.  * Dual licensed under the MIT or GPL Version 2 licenses.
  46.  * http://jquery.org/license
  47.  *
  48.  * http://docs.jquery.com/UI/Theming/API
  49.  *
  50.  * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial,%20"Helvetica%20Neue",%20Helvetica,%20Verdana,%20sans-serif;&fwDefault=normal&fsDefault=13px&cornerRadius=4px&bgColorHeader=f3f3f3&bgTextureHeader=01_flat.png&bgImgOpacityHeader=0&borderColorHeader=dddddd&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=0&borderColorContent=dddddd&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=01_flat.png&bgImgOpacityDefault=75&borderColorDefault=dddddd&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=01_flat.png&bgImgOpacityHover=75&borderColorHover=dddddd&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=dddddd&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=000000&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
  51.  */
  52.  
  53.  
  54. /* Component containers
  55. ----------------------------------*/
  56. .ui-widget { font-family: Arial, \\\"Helvetica Neue\\\", Helvetica, Verdana, sans-serif;; font-size: 13px; }
  57. .ui-widget .ui-widget { font-size: 1em; }
  58. .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, \\\"Helvetica Neue\\\", Helvetica, Verdana, sans-serif;; font-size: 1em; }
  59. .ui-widget-content { border: 1px solid #dddddd; background: #ffffff url(images/ui-bg_flat_0_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
  60. /*.ui-widget-content a { color: #222222; }*/
  61. .ui-widget-header { border: 1px solid #dddddd; background: #f3f3f3 url(images/ui-bg_flat_0_f3f3f3_40x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
  62. .ui-widget-header a { color: #222222; }
  63.  
  64. /* Interaction states
  65. ----------------------------------*/
  66. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #dddddd; background: #e6e6e6 url(images/ui-bg_flat_75_e6e6e6_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
  67. .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
  68. .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #dddddd; background: #dadada url(images/ui-bg_flat_75_dadada_40x100.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
  69. .ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
  70. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #dddddd; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
  71. .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
  72. .ui-widget :active { outline: none; }
  73.  
  74. /* Interaction Cues
  75. ----------------------------------*/
  76. .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
  77. .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
  78. .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_inset-soft_95_fef1ec_1x100.png) 50% bottom repeat-x; color: #cd0a0a; }
  79. .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
  80. .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
  81. .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
  82. .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
  83. .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
  84.  
  85. /* Icons
  86. ----------------------------------*/
  87.  
  88. /* states and images */
  89. .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
  90. .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
  91. .ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
  92. .ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
  93. .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
  94. .ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
  95. .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
  96. .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }
  97.  
  98. /* positioning */
  99. .ui-icon-carat-1-n { background-position: 0 0; }
  100. .ui-icon-carat-1-ne { background-position: -16px 0; }
  101. .ui-icon-carat-1-e { background-position: -32px 0; }
  102. .ui-icon-carat-1-se { background-position: -48px 0; }
  103. .ui-icon-carat-1-s { background-position: -64px 0; }
  104. .ui-icon-carat-1-sw { background-position: -80px 0; }
  105. .ui-icon-carat-1-w { background-position: -96px 0; }
  106. .ui-icon-carat-1-nw { background-position: -112px 0; }
  107. .ui-icon-carat-2-n-s { background-position: -128px 0; }
  108. .ui-icon-carat-2-e-w { background-position: -144px 0; }
  109. .ui-icon-triangle-1-n { background-position: 0 -16px; }
  110. .ui-icon-triangle-1-ne { background-position: -16px -16px; }
  111. .ui-icon-triangle-1-e { background-position: -32px -16px; }
  112. .ui-icon-triangle-1-se { background-position: -48px -16px; }
  113. .ui-icon-triangle-1-s { background-position: -64px -16px; }
  114. .ui-icon-triangle-1-sw { background-position: -80px -16px; }
  115. .ui-icon-triangle-1-w { background-position: -96px -16px; }
  116. .ui-icon-triangle-1-nw { background-position: -112px -16px; }
  117. .ui-icon-triangle-2-n-s { background-position: -128px -16px; }
  118. .ui-icon-triangle-2-e-w { background-position: -144px -16px; }
  119. .ui-icon-arrow-1-n { background-position: 0 -32px; }
  120. .ui-icon-arrow-1-ne { background-position: -16px -32px; }
  121. .ui-icon-arrow-1-e { background-position: -32px -32px; }
  122. .ui-icon-arrow-1-se { background-position: -48px -32px; }
  123. .ui-icon-arrow-1-s { background-position: -64px -32px; }
  124. .ui-icon-arrow-1-sw { background-position: -80px -32px; }
  125. .ui-icon-arrow-1-w { background-position: -96px -32px; }
  126. .ui-icon-arrow-1-nw { background-position: -112px -32px; }
  127. .ui-icon-arrow-2-n-s { background-position: -128px -32px; }
  128. .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
  129. .ui-icon-arrow-2-e-w { background-position: -160px -32px; }
  130. .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
  131. .ui-icon-arrowstop-1-n { background-position: -192px -32px; }
  132. .ui-icon-arrowstop-1-e { background-position: -208px -32px; }
  133. .ui-icon-arrowstop-1-s { background-position: -224px -32px; }
  134. .ui-icon-arrowstop-1-w { background-position: -240px -32px; }
  135. .ui-icon-arrowthick-1-n { background-position: 0 -48px; }
  136. .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
  137. .ui-icon-arrowthick-1-e { background-position: -32px -48px; }
  138. .ui-icon-arrowthick-1-se { background-position: -48px -48px; }
  139. .ui-icon-arrowthick-1-s { background-position: -64px -48px; }
  140. .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-