Enlace en el Encabezado
Con frecuencia nos podemos encontrar con páginas web con un encabezado que muestra una imagen por medio de la propiedad background de CSS asociado a un elemento del layout.
Si deseamos que la imagen de fondo sea un enlace a la página inicio de la web debemos añadir el siguiente código en la etiqueta del encabezado de la plantilla inicio:
<div id=”header” onClick=’window.location.href=”http://www.dominio.com”‘>
y en la hoja de estilo debemos añadir la siguientes reglas en la declaración del estilo header:
cursor: pointer;
cursor: hand;
Otra propuesta más accesible de Leo:
<h1 id="encabezado"><a href="/">Nombre del sitio</a></h1>
Y en el CSS:
h1#encabezado {
background: url(’img/logo.jpg’) no-repeat;
text-indent: -9999px;
}h1#encabezado a {
display: block;
width: 100px;
height: 100px;
}
Stan nos recomienda que leamos un artículo suyo titulado Personaliza el titulo de tu sitio con javascript en el que se recogieron muchas recomendaciones.
11.24.2005 a las 2:26 am
La versión más accesible sería algo como:
<h1 id="encabezado"><a href="/">Nombre del sitio</a></h1>Y en el CSS:
#header h1 {background: url('img/logo.jpg') no-repeat;
text-indent: -9999px;
}
#header h1 a {
display: block;
width: 100px;
height: 100px;
}
Reemplazando las medidas del enlace por las que correspondan al tamaño de la imágen, claro
11.24.2005 a las 2:32 am
Gracias por la información, Leo.
11.24.2005 a las 6:47 am
Dias atras escribi un post similar y me llegaron algunas recomendaciones muy buenas, que te recomiendo revises.
http://www.stanmx.com/318.html
saludos.
11.24.2005 a las 12:31 pm
Muchas gracias por el enlace, Stan.
Un post muy interesante.
11.24.2005 a las 9:51 pm
Creo que mezclé los códigos al copiar y pegar… en el CSS habría que reemplazar
#header h1por#encabezado… perdón :S11.24.2005 a las 10:29 pm
Corrección aplicada, Leo.
Muchas gracias.