Cómo hipervínculo de una etiqueta dinámica Ancla en CSS

Los hipervínculos de una página Web pueden no ser relevantes para todos los usuarios en todo momento. Usted no tiene que actualizar el código HTML cada vez que usted necesita para agregar o quitar las etiquetas de anclaje que definen sus vínculos. Usted puede hacer que aparecen y desaparecen según sea necesario el uso de CSS. Hojas de estilo en cascada no sólo le permiten establecer las propiedades de visibilidad de los hipervínculos, pero habilita para mover vínculos a nuevas ubicaciones en una página también.

Instrucciones

1

Abra una página Web documento HTML y localizar la sección del cuerpo del documento. Pega el siguiente código HTML en cualquier lugar dentro de esa sección:

<a href="Insert" rel="nofollow" http target="_blank">: //www.nasa.gov&quot;> Insertar enlace aquí </a>
<a href="Insert" rel="nofollow" http target="_blank">: //www.nasa.gov&quot;> Insertar enlace aquí </a>
</ Div>

<Input type = valor "botón" = "Mostrar dinámico hipervínculos" onclick = "return manageLinks ('dynamicLinks1', '200', '100', 'show')" />
<Input type = valor "botón" = "Ocultar dinámico hipervínculos" onclick = "return manageLinks ('dynamicLinks1', '200', '100', 'ocultar')" />

Este código crea un contenedor div que contiene dos etiquetas de anclaje. Los vínculos que crean estos tags punto a la página web de la NASA. Cambiar las direcciones URL en estas etiquetas de anclaje a otros valores, si quieres. El div referencia a una clase CSS llamado "oculto". Esa clase guarda las etiquetas de anclaje ocultos hasta que usted necesita para mostrarlos. El primer botón debajo de la div llama a una función JavaScript cuando se hace clic. Evento onclick del botón Eso pasa id del div a esa función junto con el X deseado y pantalla coordenada ubicaciones para las etiquetas de anclaje. El evento de botón también pasa la palabra "show" como parámetro. Este parámetro indica a la función para mostrar los vínculos dinámicos en la ubicación especificada. El segundo botón llama a la misma función y pasa la palabra "esconder" a la función. Este botón oculta los vínculos.

2

<Div id = clase "dynamicLinks1" = "hidden">

Desplazarse a la parte superior del documento y localizar su sección de cabeza. Pegue el código que se muestra a continuación en el interior de esa sección:

<Style type = "text / css">
.hidden {display: none;}
</ Style>

Esta clase oculta los vínculos dinámicos en el contenedor div.

3

Agregue la siguiente función de JavaScript debajo del código que aparece en el paso anterior:

manageLinks función (divContainer, xLocation, yLocation, actionToTake) {

var divObject = document.getElementById (divContainer);

si (actionToTake == "show") {

divObject.style.position = "absoluta";
divObject.style.left = xLocation;
divObject.style.top = yLocation;
divObject.style.display = "bloque";
}

else {
divObject.style.display = "none";
}
}

Este código obtiene una referencia a la div se le pasa y conjuntos de atributos de su posición de "absoluta". Un valor de "absoluto" le permite mover el div a diferentes lugares de la página Web. Las dos declaraciones después de que la declaración establecen superior izquierda y del contenedor atribuye a los valores pasados ​​por los clics de botón. Las propiedades que quedan y superior representan la distancia en píxeles que un objeto reside desde la esquina superior izquierda de una página Web. Las declaraciones "divObject.style.display" establecer valor de visualización del contenedor al "bloque" o "div" dependiendo del valor pasado a la función. El contenedor aparece cuando el valor de la pantalla es "bloque". Desaparece cuando el valor es "ninguno".

4

Guarde el documento e iniciar el explorador Web. Abra la página y ver los dos botones que aparecen. Haga clic en "Mostrar dinámico Links." Los enlaces aparecerán en las coordenadas de pantalla especificadas en el código. Haga clic en "Hide dinámico Enlaces" para hacer que desaparezcan.

Consejos y advertencias

  • Cuando los hyperinks son visibles, los visitantes del sitio pueden hacer clic en ellos y vaya a otros sitios web como lo hacen normalmente con enlaces regulares. Agregue tantos hipervínculos a su gusto al contenedor div. Se ampliará a medida que agrega más enlaces.