Los enlaces también están dentro del modelo DOM de una página. Es por ello que mediante lenguaje Javascript podremos modificar sus atributos: el contendio, el target asignado, así como la URL a la que enlazan.
Mediante este ejemplo vamos a componer un formulario que nos permita crearnos nuestro enlace personalizado. De tal manera que elijamos el texto del enlace, la URL a la cual va a acceder, si se abrirá en una nueva ventana, en un frame o en la misma,… es decir, rellenaremos datos para poder modificar todos los valores de los atributos del enlace.
Lo primero será crear nuestro formulario:
Como cosa particular vemos que las opciones del destino del enlace se las presentamos mediante un combo. Las opciones son:
- _blank, para abrir una nueva ventana.
- _self, para abrirlo en la misma ventana.
- _parent, abre en la ventana padre.
- _top, abre eliminando todos los frames que pueda haber en la ventana.
Cuando se envíe el formulario obtenemos todos los valores para pasárselos a un método lenguaje Javascript que llamaremos modificar:
Además tendremos un enlace con valores por defecto dentro de nuestra página. Este será el enlace que vayamos modificando.
Google
Ahora pasamos a codificar el método lenguaje Javascript. Lo primero que tenemos que hacer es acceder al enlace. Para ello nos apoyamos en el método getElementByID, al cual le pasamos el ID que le hayamos dado al enlace de nuestra página.
Los atributos que podemos modificar del elemento son los siguientes:
- innerHTML, nos permite modificar el texto del enlace.
- href, modifica la URL de destino del enlace.
- target, representa el destino del enlace.
El código nos quedaría de la siguiente forma:
function modificar(url,texto,destino){
document.getElementById("mienlace").innerHTML = texto;
document.getElementById("mienlace").href = url;
document.getElementById("mienlace").target = destino;
}
