23 mayo 2007

Enlace "arriba" o "top" = marca


Navegando por la red nos encontramos con bastante frecuencia páginas en las que hay enlaces del tipo "arriba" cuando hemos llegado al final de la página y que nos dirigen a la parte superior de la misma; otras veces son enlaces para ir a una parte concreta del contenido de un artículo, por ejemplo. ¿Cómo se consigue eso? Técnicamente se le denomina marca. Es bastante sencillo y podemos utilizarlo siempre que queramos, dentro de nuestros posts o entradas, o en la propia plantilla. Si queréis comprobar el efecto, dirigiros al final de mi página y hace click sobre el letrero móvil que hay con el título del blog, os dirigirá arriba del blog.


Para conseguir este "efecto" tenemos que crear el enlace que nos dirige al lugar deseado y la marca (dirección) a donde debe dirigirse el enlace. Lo haremos en 2 pasos:

  1. Buscamos el sitio exacto donde queremos que el enlace nos diriga, en el caso de mi página es el letrero de bienvenida al blog. Ahí debemos crear la marca, con el siguiente código:



    <a name="XXX">XXXX</a>



    Aquí he creado yo una marca, con este código. Si os dirigís al final de esta entrada y hacéis click en "Arriba", comprobaréis que sube hasta ahí.

  2. Nos iremos al sitio exacto donde queramos poner el enlace (en los ejemplos que os he puesto aqí, el final del blog, o el final de la entrada) e incluiremos un código de enlace con el símbolo # delante del nombre de la marca, así:



    <a href="#nombre de la marca">XXX</a>;


El nombre que escribáis en la marca, por ejemplo, arriba (name="arriba") será el mismo que escribáis en el enlace (href="#arriba"). Lo que escribáis entre las etiquetas <a ...> XXX </a> será aquello que se vea en la página, ya sea una sola palabra o, como ocurre en mi blog, una imagen. En el segundo caso pondremos el código de la imagen (img src...) entredichas etiquetas, que en el caso concreto de la marca sería éste:




<a name="arriba"><img src="direccion URL"></a>



A su vez dicha imagen puede ser un enlace, la marca no interfiere en él. Quedaría así:



<a name="arriba"><a href="direccion URL"><img src="direccion URL"></a></a>




En cuanto al enlace a esa marca, también podemos utilizar una imagen (una flecha hacia arriba, por ejemplo), pero nunca un enlace desde dicha imagen (la referencia "#arrriba" es un enlace en sí misma). Para incluir una imagen:



<a href="#arriba"><img src="direccion URL"></a>




Autorretrato, Van Gogh


Haz click aquí para subir arriba



Añadido de última hora: no repitáis el nombre de una marca dentro del mismo blog(con añadirle un número es suficiente para cambiarlo),ya que el enlace nos dirigirá al primero que aparezca en la página (aquí, por ejemplo, dirigía a la parte superior de la página y no al lugar indicado de esta misma entrada).

2 comentarios:

Ariadna dijo...

Que util nena!!!! En cuanto termine los examenes ponre una imagen con subir arriba :). Siempre me parecio util, pero nos abia como hacerlo :).

A ver si me sale, porque yo y el codigo html ese no nos llevamos muy bien....

¿Como estas? Besitos.

jdm dijo...

Thanks!!! Por compartir como se hace!!!