Lista desplegable de enlaces en blogger

Aumentamos el nivel de HTML usado. Vamos a necesitar usar un formulario y la etiqueta select. Aun así, tenemos varias opciones:

• Enlace directo. Método onchange

Dentro de un formulario (etiqueta <FORM> </FORM>) creamos una lista desplegable (etiqueta <SELECT></SELECT>) con las distintas opciones a elegir. La opción elegida nos envía a ese enlace con el método ONCHANGE.

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:

MIS SITIOS Google YouTube GMail

Nos abre la dirección destino en la misma ventana en al que estemos navegando apenas seleccionemos la opcion elegida. Notar el nombre del formulario (formulario 1) y el nombre de la lista (destinos) que debe coincidir con los puestos en location.href. Si hubiera varias listas (varios formularios) en la misma pagina sera necesario que cada formulario tenga un nombre único.

Es posible controlar el formato de la lista select con diversos modificadores

<form name="formulario1" method="post" action=""> <label>MIS SITIOS</label> <select name="destinos" onchange="location.href=formulario1.destinos.value;"> <option value="http://google.es">Google</option> <option value="http://youtube.com">YouTube</option> <option value="http://gmail.com">GMail</option> </select> </form>

• Enlace con botón. Método onclick

Para conseguir más control sobre el proceso, vamos a hacer que el enlace se abra después de pulsar un botón, con el método ONCLICK, lo cual aprovecharemos para que la nueva pagina se abra en otra ventana de tamaño configurable (popup).
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").

» Selecciona « Google Yahoo Hotmail

<form name="formulario2" target="_blank"> <select name="sitios"> <option>» Selecciona «</option> <option value="http://www.google.com">Google</option> <option value="http://www.yahoo.com">Yahoo</option> <option value="www.hotmail.com">Hotmail</option> </select> <input type="button" value="Ir" onclick="window.open(formulario2.sitios.value, this.target, 'resizable=1 ,left=80pt,top=80pt,width=1100px,height=800px'); return false;" target="popup"> </form>

Esto nos abre el enlace escogido en una ventana popup en la que hemos configurado tanto su posición como tamaño. Nótese que el nombre del formulario y de la lista son diferentes a los del primer ejemplo y que coinciden con los valores puestos en window.open. Ademas, hemos configurado la posición de la ventana popup (top, left) y su tamaño (width, height)

Otro ejemplo

Tipos de centrales eléctricas » Escoge « Térmica carbón Térmica nuclear Ciclo combinado Gasificación Biomasa Residuos sólidos urbanos Termosolar Fotovoltaica Eólica Hidroeléctrica H. de bombeo

Fuente: UNESA

<form name="formulario3" target="_blank"> <label>Tipos de centrales eléctricas</label> <select name="centrales"> <option>» Escoge «</option> <option value="https://dl.dropboxusercontent.com/s/rdpu4g8a6ead7hh/UNESA%20termica%20%281%29.swf?dl=0">Térmica carbón</option> <option value="https://dl.dropboxusercontent.com/s/vfu8ym1zw3zmbg0/UNESA%20nuclear.swf?dl=0">Térmica nuclear</option> <option value="https://dl.dropboxusercontent.com/s/mnybo9u9n4iofno/UNESA%20ciclocombinado.swf?dl=0">Ciclo combinado</option> <option value="https://dl.dropboxusercontent.com/s/trgcf5t5ygbzk5y/UNESA%20gasificacion.swf?dl=0">Gasificación</option> <option value="https://dl.dropboxusercontent.com/s/ccy3ujn7wivbchx/UNESA%20biomasa.swf?dl=0">Biomasa</option> <option value="https://dl.dropboxusercontent.com/s/uox1f4ood0cmgft/UNESA%20incineradora.swf?dl=0">Residuos sólidos urbanos</option> <option value="https://dl.dropboxusercontent.com/s/oowfds5c6bjff8y/UNESA%20termosolar.swf?dl=0">Termosolar</option> <option value="https://dl.dropboxusercontent.com/s/ngboy4j6cq849gu/UNESA%20fotovoltaica.swf?dl=0">Fotovoltaica</option> <option value="https://dl.dropboxusercontent.com/s/agj3y1794gflqmr/UNESA%20eolica.swf?dl=0">Eólica</option> <option value="https://dl.dropboxusercontent.com/s/oufyordbws0lrh6/UNESA%20hidroelectrica.swf?dl=0">Hidroeléctrica</option> <option value="https://dl.dropboxusercontent.com/s/jx0trwhokg24xri/UNESA%20bombeo.swf?dl=0">H. de bombeo</option> </select> <input onclick="window.open(formulario3.centrales.value, this.target, 'resizable=1 ,left=80pt,top=80pt,width=1100px,height=800px'); return false;" target="popup" type="button" value="Ver" /> </form>

Aviso: Este último ejemplo muestra distintas animaciones flash. Es probable que en muchas circunstancias falle debido a las limitaciones en el uso de flash en los navegadores, pero el código funciona correctamente (2/4/19), pudiendo servir para enlazar otro tipo de documentos: gif animados, fotos, pdf...

Fuentes:
lawebera
Oloblogger
Mediacollege