Para ello usaremos HTML y en concreto, el código necesario para construir un campo desplegable de un formulario. El código básico sería este:
<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="location.href=formulario.destinos.value;" type="button" value="IR" name="button">
</form>
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="location.href=formulario.destinos.value;" type="button" value="IR" name="button">
</form>
Por cada nuevo enlace habría que añadir una nueva OPTION, con sus correspondientes etiquetas de apertura y cierre, incluyendo un VALUE igual a la dirección de destino. La etiqueta LABEL justo después de abrir el formulario, sólo contiene texto para servir de título sobre lo que el desplegable contiene. Se puede eliminar si se desea. El resultado sería este:
Notaréis que la etiqueta INPUT genera el botón que sirve para ir al enlace seleccionado. El texto del VALUE puede ser el que queráis (en el ejemplo "IR").
Pero también podríamos modificar un poco el código, para que se acceda al enlace sin necesidad del botón. Esto haría que fuéramos directamente a la dirección, nada más cambiar nuestra selección:
En este segundo caso, suprimiríamos el mencionado INPUT (botón "IR") y tendríamos que colocar un ONCHANGE en la etiqueta SELECT:
<form name="formulario2" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos2" onchange="location.href=formulario2.destinos2.value;">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select>
</form>
<label>MIS SITIOS</label>
<select name="destinos2" onchange="location.href=formulario2.destinos2.value;">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select>
</form>
Actualización.
Para abrir el resultado de la selección en una ventana/pestaña nueva, sustituimos dentro del onclick, location.href por window.open.
<form name="formulario" method="post" action="">
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="window.open(formulario.destinos.value);" type="button" value="IR" name="button">
</form>
<label>MIS SITIOS</label>
<select name="destinos">
<option value="http://google.es">Google</option>
<option value="http://youtube.com">YouTube</option>
<option value="http://gmail.com">GMail</option>
</select><input onclick="window.open(formulario.destinos.value);" type="button" value="IR" name="button">
</form>
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Es justo lo que estaba buscando para llenar una página estática de enlaces sin sobrecargarla en exceso. Por supuesto, no es mala idea para blogroll, como sugieres...
ResponderEliminarMuy buen aporte, sobre todo la versión sin el botón "ir".
Un saludo.
Este es mi blog, y he puesto por provincias los alumnos que han sido entrenados con su correspondiente enlace de nueva entrada.
ResponderEliminarNo quiero que se vean todas las entradas de albacete, madrid, sevilla...
No se como ocultar esas entradas, pero si que cuando se pinche en alumnos entrenados en sevilla, aparezca el contenido de la entrada Sevilla.
No se tampoco como cambiar el orden de las entradas.
Muchas gracias
http://integracioncerebral.blogspot.com/2011/03/mapa.html
José GDF, el inconveniente que tiene la versión sin botón, es que si te equivocas de selección, sales de la página en la que estás, pero ahí queda por si es de utilidad para alguien.
ResponderEliminarRosa y Manuel, si quieres ocultar esas entradas, la primera opción podría ser editarlas y ponerles una fecha de 2009. Así no aparecerían las primeras ni en tu blog ni en el archivo.
Otra opción, sería hacer páginas estáticas en lugar de entradas. Incluso si marcas esa opción, podrías generar un menú superios con las distintas provincias.
Hola Oloman, es muy util esta nota! solo una consulta: hay algún modo de que los enlaces se abran en otra página?
ResponderEliminarSe me ocurre que en alguna parte del código html habría que agregarle a_blanck, pero dónde?
Saludos!!!
Alquimia, he actualizado el post y, al finial, he incluído la posibilidad que comentas.
ResponderEliminarGracias Oloman ;)
ResponderEliminarSaludos!!!
Hola que tal, me ha gustado mucho tu blog y la manera tan simple que tienes de explicar las cosas, asi cualquiera entiende, y sobre todo yo, que soy principiante en esto de los blogs. Quisiera me expliques como pongo un juego "embed" en mi blog, pero al mismo tiempo poner en la pagina de categoria del juego una imagen del mismo y cuando le den clic la aplicacion se ejecute sin salir de mi blog....me doy a entender?
ResponderEliminargracias,
Amneris,
Pd. si no es molestia puedes contestarme a amnerisls@gmail.com
Eso va por barrios. Unos dicen que no entienden nada y otros que explico chorradas.
EliminarSobre la pregunta, sé cómo insertar un embed pero no entiendo bien lo que quieres hacer con la imagen.