Linea de Codigo

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:

 
<form action="#">
<label for="enlace">URL: </label>
<input type="text" id="enlace"><br>
<label for="texto">Texto: </label>
<input type="text" id="texto"><br>
<label for="destino">Target: </label>
<select id="destino">
<option value="_blank">Nueva Ventana</option>
<option value="_self">Misma ventana</option>
<option value="_parent">Ventana Padre</option>
<option value="_top">Top</option>
</select>
 
<br>
</form>
 

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 JavaScript que llamaremos modificar:

<button onClick="modificar(getElementById('enlace').value, getElementById('texto').value, getElementById('destino').value);">Cambiar enlace</button>

Además tendremos un enlace con valores por defecto dentro de nuestra página. Este será el enlace que vayamos modificando.

<a href="http://www.google.com" target="_blank" title="Google" id="mienlace">Google</a>

Ahora pasamos a codificar el método 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;
}
 

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del código