Menú jcyl.es

Junta de Castilla y León

Catálogo de componentes - Junta de Castilla y León

  • Zona privada
  • Contacto

Idiomas

Menu jcyl.es

Mi cuenta

usuario2017xxx

usuario@gmail.com

Mi cuenta

Cerrar sesión

Guía de estilos y componentesde la Junta de Castilla y León

Redes sociales

  • Facebook
  • Twitter
  • Youtube

Listado mapa área

Ávila Valladolid Segovia Soria Burgos Palencia León Zamora Salamanca

Para obtener el listado de cursos 2017, puede pulsar sobre cualquiera de las provincias del mapa, o bien elegir una de ellas a través del listado desplegable y a continuación el botón "buscar"

Página 1 de 3

Responsividad

La parte del buscador del componente se dispondrá en dos columnas, mapa a la izquierda y buscador a la derecha a partir de 1024px, por debajo de esta resolución el mapa se colocará encima del buscador cada uno en una columna.

El mapa desaparecerá por debajo de 700px.

La parte del listado fluirá con el espacio disponible en filas de una columna.

Código

						
<div class="mapa-buscador">
	<div class="mapa">
		<img src="img/mapa/mapa.png" alt="" class="mapa" usemap="#mapa" id="imgmap">
		<map name="mapa" id="mapa">
			<area shape="poly" coords="329,388,328,392,329,396,329,399,326,401,321,403,320,402,317,399,316,403,316,406,315,411,313,411,311,413,311,415,312,419,311,423,309,430,305,432,299,435,298,442,298,446,294,447,286,450,282,457,282,459,282,462,282,463,278,464,270,465,269,452,260,455,257,454,254,454,253,457,251,460,246,462,237,465,233,465,227,466,220,469,214,474,209,476,207,475,205,472,199,472,194,472,190,469,186,461,188,455,188,451,185,451,178,453,172,458,168,460,164,459,159,457,156,454,155,453,153,451,152,448,149,447,142,446,142,446,143,443,146,440,148,437,148,434,148,429,150,425,153,421,157,419,161,418,160,421,163,426,168,425,168,421,171,421,173,420,175,415,178,408,178,405,175,404,167,406,168,402,172,402,174,402,177,400,181,397,184,394,184,390,184,388,191,384,194,383,203,374,209,369,210,361,213,357,215,353,216,349,217,339,217,335,215,333,212,329,213,325,216,319,219,318,223,319,224,318,228,317,231,317,237,321,246,325,249,325,251,322,253,319,258,318,260,321,263,328,264,330,267,334,271,339,273,343,276,346,279,350,279,355,279,359,282,362,280,363,279,366,282,367,287,367,289,371,290,373,297,379,298,383,299,395,301,398,304,399,309,398,311,394,313,391,316,390,321,390,325,388,329,388,329,388,329,388" href="#" title="Ávila" alt="Ávila" id="avila" />
			<area shape="poly" coords="292,294,289,295,287,293,285,290,281,292,277,292,275,292,274,294,276,296,276,298,274,302,269,307,270,314,265,312,261,316,258,317,253,318,250,322,246,324,239,321,230,315,226,316,220,317,214,318,211,314,206,314,203,313,202,311,200,308,197,309,191,311,190,310,190,308,194,303,196,297,194,292,191,286,192,279,192,273,191,266,193,264,198,262,201,261,203,258,202,256,199,254,197,253,198,251,199,248,196,246,193,244,193,240,193,237,191,234,190,231,189,228,187,228,186,223,188,220,195,218,198,214,195,213,194,213,195,204,196,203,197,198,193,195,200,192,201,190,199,188,196,188,195,185,191,183,189,182,188,179,189,170,188,166,186,157,188,154,191,155,195,157,197,153,202,155,205,152,202,149,205,146,211,147,216,143,218,140,222,143,223,148,225,151,227,147,227,144,229,144,230,144,227,155,227,159,226,163,228,165,232,166,237,165,238,170,240,175,237,178,236,183,236,184,231,193,229,196,231,200,233,201,236,199,238,199,241,200,246,200,248,204,251,209,252,213,253,215,256,215,260,212,262,208,267,204,270,205,272,207,276,213,282,215,288,212,291,211,293,215,290,218,291,222,294,224,299,223,303,221,308,223,312,223,316,221,319,219,323,219,333,219,333,221,335,223,341,224,338,227,336,228,337,230,339,232,343,236,343,241,343,246,347,251,348,253,348,255,346,260,333,266,320,270,312,271,301,273,298,274,293,276,288,277,285,278,286,281,288,284,287,287,289,291,292,294,292,294" href="#" title="Valladolid" alt="Valladolid" id="valladolid" />
			<area shape="poly" coords="329,388,327,387,324,387,314,389,311,390,310,393,308,397,304,398,301,396,300,393,299,387,300,381,299,379,292,372,290,370,287,366,282,366,280,366,281,364,283,361,281,359,280,356,280,348,277,345,274,342,272,338,269,333,266,330,264,327,261,320,262,316,265,314,268,314,271,315,271,312,271,308,273,304,277,299,277,295,276,293,279,294,283,292,285,293,287,295,292,295,291,291,289,289,289,285,286,279,288,278,293,277,297,275,304,274,322,271,339,266,347,262,348,260,349,253,356,256,364,264,367,266,369,262,371,259,371,266,371,268,373,269,377,270,377,266,377,261,381,258,385,255,388,252,393,252,397,251,399,256,402,258,410,258,410,263,414,266,418,268,422,269,420,272,420,277,423,280,428,283,431,289,435,293,435,293,433,296,427,299,419,299,414,300,416,305,415,307,413,307,409,309,398,314,391,317,387,323,382,327,375,335,372,339,367,342,359,347,353,355,352,359,352,363,351,367,348,373,345,375,343,374,338,373,336,377,335,379,331,383,329,388,329,388,329,388" href="#" title="Segovia" alt="Segovia" id="segovia" />
			<area shape="poly" coords="470,181,473,184,477,183,481,180,485,178,485,175,485,169,488,166,492,169,492,173,488,179,487,183,490,186,493,184,496,185,499,185,505,186,508,186,511,183,515,177,516,172,517,170,519,169,525,166,532,163,539,164,542,167,544,171,548,170,554,168,559,170,557,173,555,175,556,177,559,179,560,184,561,189,566,191,571,192,575,195,579,197,583,195,591,189,591,194,591,199,594,204,596,208,594,212,592,215,595,218,601,225,600,227,598,230,600,233,594,234,589,236,585,241,583,243,581,243,576,245,577,249,578,254,578,259,580,264,583,273,572,277,573,275,574,272,573,270,565,269,562,271,563,275,563,279,561,282,557,289,558,297,561,307,563,308,569,311,571,313,571,317,571,324,567,320,564,318,560,320,558,322,555,322,552,321,550,323,548,325,545,325,543,326,539,325,536,323,534,325,529,326,524,323,519,314,516,314,510,315,512,310,509,308,511,305,508,303,500,300,497,298,495,295,491,296,485,299,481,298,479,294,475,289,470,291,462,296,452,295,441,291,438,291,435,293,435,293,430,284,427,281,423,278,421,276,422,272,423,269,419,267,413,264,411,262,412,260,410,257,407,256,400,255,398,252,397,248,398,246,400,246,401,247,407,247,409,242,413,235,418,231,419,228,421,225,427,221,427,214,426,209,426,203,435,212,436,215,438,217,440,218,445,215,447,210,449,206,452,205,457,204,459,202,460,198,463,196,465,193,465,190,466,187,469,183,470,181,470,181,470,181" href="#" title="Soria" alt="Soria" id="soria" />
			<area shape="poly" coords="470,181,465,185,464,192,464,194,461,196,458,199,457,202,454,203,449,205,446,210,443,215,439,216,437,213,434,210,428,204,425,202,425,205,426,220,418,226,417,229,413,232,411,235,406,246,400,245,397,245,396,248,395,250,393,250,386,252,380,256,376,262,376,268,376,269,373,267,373,256,369,259,368,262,367,265,365,263,358,255,356,254,346,248,344,242,344,235,339,231,337,229,341,225,342,219,339,217,337,215,338,212,338,208,341,209,344,208,347,205,353,198,354,196,355,196,359,195,359,190,357,189,351,191,344,194,343,194,346,189,350,182,342,179,341,180,337,181,335,178,335,175,337,175,340,174,338,172,335,170,335,169,339,168,339,166,337,163,334,165,329,168,324,167,325,164,324,158,321,149,317,137,316,133,316,130,313,130,311,129,310,127,310,124,312,120,314,123,318,124,320,121,320,114,319,111,316,109,313,106,313,105,314,103,317,101,315,98,312,94,315,91,317,84,322,82,326,78,330,75,334,78,337,74,343,75,349,73,351,76,354,74,356,73,361,69,360,68,361,68,364,70,367,69,369,63,368,57,363,54,363,54,366,49,364,45,361,46,357,49,353,50,351,46,353,37,361,32,368,29,365,26,370,25,372,20,376,19,378,17,382,11,384,8,387,10,391,11,402,14,410,15,417,12,425,6,429,5,433,8,438,8,441,8,438,14,437,18,440,19,441,25,442,27,440,29,438,31,440,33,448,34,451,35,452,37,453,40,455,41,459,43,457,46,455,48,449,49,446,49,444,47,442,44,439,43,433,40,431,40,429,42,426,47,424,49,424,52,425,53,429,58,436,55,439,57,441,57,446,53,446,53,443,59,442,63,443,66,444,69,454,69,453,72,455,74,457,75,463,82,465,78,469,82,473,90,467,89,457,86,451,89,451,93,451,96,449,99,446,102,445,105,448,106,451,105,451,109,447,111,451,114,454,116,454,120,452,125,451,121,448,122,449,127,452,131,448,133,448,139,449,146,449,151,447,155,445,157,447,159,448,160,452,166,456,171,458,173,460,174,464,173,467,173,469,177,470,181,470,181,470,181" href="#" title="Burgos" alt="Burgos" id="burgos" />
			<area shape="poly" coords="321,45,322,59,326,62,330,60,332,60,332,62,330,63,327,66,331,69,334,70,338,71,335,75,329,74,324,77,321,81,315,82,315,83,315,88,312,92,313,98,317,100,314,102,311,104,312,107,315,110,319,115,319,121,318,123,315,122,311,119,309,124,309,125,309,130,314,131,317,140,320,149,323,158,323,165,323,168,328,169,332,168,335,165,338,164,337,167,334,170,337,173,334,176,334,180,337,183,342,182,342,181,345,182,348,182,344,189,342,192,343,196,358,190,358,195,355,195,352,197,348,201,347,204,344,206,341,207,338,207,337,207,337,217,338,218,341,222,337,221,335,221,334,218,332,217,324,218,322,217,318,217,316,219,312,221,308,221,303,220,299,222,293,222,292,218,296,215,294,212,291,210,287,211,281,214,275,210,273,206,270,203,267,203,261,208,258,212,254,214,247,200,245,197,242,198,240,198,232,200,231,196,233,193,234,190,234,188,236,186,237,182,238,179,240,177,242,175,241,174,240,168,238,164,233,164,227,164,230,152,231,150,231,146,235,144,238,140,238,136,234,135,235,131,239,131,241,130,242,128,243,118,244,111,242,104,242,100,244,89,245,83,246,78,244,76,242,77,240,75,241,73,244,66,245,59,246,56,252,50,255,42,257,37,261,34,279,33,282,34,285,32,289,31,293,31,297,30,301,30,306,37,309,41,321,45,321,45" href="#" title="Palencia" alt="Palencia" id="palencia" />
			<area shape="poly" coords="25,50,30,44,34,46,36,47,39,46,44,42,50,43,59,44,69,43,70,42,74,39,72,34,76,34,79,26,82,24,82,25,89,28,91,29,94,31,97,29,100,26,104,28,107,30,110,28,112,22,117,24,120,25,123,23,127,32,133,37,141,40,149,39,150,33,153,27,155,25,159,27,162,29,166,29,170,30,175,32,179,28,182,27,187,28,189,27,190,25,192,21,201,23,209,23,217,19,221,21,224,18,225,14,227,9,229,8,235,8,240,4,242,1,246,1,250,4,251,9,250,14,250,19,254,22,261,28,262,30,260,32,255,37,253,43,250,50,245,55,243,59,243,65,240,71,239,76,244,79,244,80,241,100,241,105,243,110,243,115,239,129,234,131,233,135,237,137,235,142,230,142,226,143,225,147,225,150,224,148,223,144,220,140,218,139,216,141,210,147,208,146,205,144,202,147,201,150,203,153,203,154,200,154,197,152,195,156,192,154,187,153,185,157,187,166,188,167,186,180,184,181,180,181,177,176,174,173,171,170,168,171,168,173,166,176,164,174,160,172,158,166,153,164,153,167,148,168,145,165,141,165,136,166,133,167,132,165,129,162,126,163,121,165,119,164,115,161,109,160,100,159,97,160,94,161,91,160,89,157,85,155,84,154,82,151,79,151,71,151,64,154,60,153,56,151,52,150,45,150,44,150,36,148,31,143,35,137,36,129,34,126,31,124,25,120,27,114,27,109,23,106,14,102,12,102,6,104,1,102,1,97,2,95,4,93,2,87,4,85,7,82,6,79,4,75,9,71,13,68,17,67,21,65,26,58,26,54,25,50,25,50" href="#" title="León" alt="León" id="leon" />
			<area shape="poly" coords="1,170,6,166,9,161,12,160,12,156,15,154,26,150,29,149,29,145,30,145,34,148,38,151,44,151,53,152,56,152,59,154,62,155,65,155,80,152,81,152,90,160,94,163,97,161,100,161,109,162,114,162,118,165,120,167,123,166,128,163,130,165,133,169,137,167,143,166,147,169,153,169,155,165,158,167,159,171,160,174,164,177,168,177,169,171,171,172,175,184,175,187,175,190,180,191,182,188,182,187,182,183,188,183,192,184,194,186,196,189,199,190,193,194,192,196,194,198,195,199,193,210,192,213,196,214,197,215,194,218,189,219,186,219,184,222,184,226,185,228,187,230,188,231,189,232,191,237,191,243,194,247,197,248,197,249,195,253,199,256,201,258,200,260,197,261,192,263,190,266,191,274,191,279,190,285,192,291,195,299,191,305,190,307,189,311,193,313,193,318,192,320,190,320,189,319,184,317,182,315,182,312,179,309,173,312,172,315,170,310,167,306,162,306,158,305,156,303,154,301,151,301,140,304,138,305,129,302,124,302,122,307,121,312,118,316,116,312,111,315,111,312,110,306,105,305,99,305,94,304,85,298,73,291,70,291,63,291,67,284,68,284,71,281,71,277,78,276,79,272,82,270,81,268,90,254,91,253,93,247,88,242,83,238,77,233,68,231,63,233,59,234,55,233,53,231,51,227,53,216,56,208,57,202,51,200,52,199,52,191,46,190,35,192,32,191,30,188,29,185,27,183,25,185,22,188,18,190,13,190,9,188,6,184,7,179,8,176,7,173,5,172,1,171,1,170,1,170" href="#" title="Zamora" alt="Zamora" id="zamora" />
			<area shape="poly" coords="142,446,138,447,138,443,136,436,133,435,129,437,124,444,122,447,116,446,113,443,111,441,111,438,108,436,104,435,105,431,106,427,102,426,100,425,95,420,89,415,86,414,82,416,80,419,76,419,73,421,70,424,67,427,62,430,58,432,48,437,45,442,44,447,39,448,34,449,31,450,28,449,24,451,23,452,21,451,19,450,15,450,12,446,17,440,20,434,17,427,14,421,17,414,19,408,17,402,17,398,19,392,19,385,17,376,18,366,18,361,20,356,18,352,16,349,10,337,6,330,8,328,12,329,18,329,23,323,25,319,25,315,26,312,29,309,33,305,36,301,40,297,46,296,60,292,62,291,71,292,83,298,90,303,98,306,104,306,109,307,110,311,111,315,114,314,115,313,118,317,120,316,122,313,123,309,123,305,125,303,128,303,137,306,142,305,152,302,155,304,161,307,167,308,170,313,171,316,174,316,173,315,177,311,181,311,181,315,182,318,185,319,189,320,193,321,194,317,195,313,197,310,200,309,201,312,203,315,206,315,210,316,213,318,213,321,212,324,211,330,214,334,215,338,214,351,213,355,209,360,208,365,208,369,205,371,196,379,192,382,188,383,185,386,183,388,183,391,183,394,181,396,175,400,172,401,167,401,166,404,167,408,177,405,172,419,167,421,167,425,162,423,161,421,162,419,162,417,160,417,153,419,148,424,147,433,147,437,144,440,142,443,142,446,142,446,142,446" href="#" title="Salamanca" alt="Salamanca" id="salamanca" />
		</map>
	</div>
	<div class="buscador-especifico">
	<p>Para obtener el listado de cursos 2017, puede pulsar sobre cualquiera de las provincias del mapa, o bien elegir una de ellas a través del listado desplegable y a continuación el botón "buscar"</p>
		<form name="formulario" method="get" action="[ACTION]">
			<div>
				<label for="provincia">Provincia</label>
				<select id="provincia">
					<option>Todas</option>
					[...]
				</select>
			</div>
			<input id="aceptar" name="aceptar" value="Buscar" type="submit" class="boton">
		</form>
	</div>
</div>

<div class="listado mapa">
	<h2>Resultados de la búsqueda</h2>
	<p>X resultados</p>
	<ul>
		<li>
			<a href="[ENLACE]">
				<span class="titulo">[TÍTULO]</span>
				<span class="descripcion">[DESCRIPCIÓN]</span>
			</a>
		</li>
		[...]
	</ul>
</div>
						
					
  • Ilunion WCAG 2.0 WAI - AA