html - tamaño - Hipervínculo de una imagen usando CSS

poner enlace a una imagen html

Question

Sé que esta es probablemente la pregunta más estúpida de la historia, sin embargo, soy un principiante total en lo que respecta a CSS; ¿Cómo hipervincula una imagen en una página web usando una imagen que proviene de CSS? Estoy tratando de establecer la imagen del título en mi sitio web enlazable a la página principal. ¡Gracias!

Editar: Para dejarlo en claro, obtengo mi imagen de CSS , el código CSS para el encabezado div es el siguiente:

#header
{
    width: 1000px;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url(images/title.png) no-repeat bottom;
    width: 1000px;
    height: 100px;
}

Quiero saber cómo hacer que este div esté hipervinculado en mi página web sin tener que convertirlo en delimitador en lugar de div.

Answer 1

Aún crea enlaces en HTML con etiquetas ''a'' (ancla) como lo hace normalmente. CSS no tiene nada que pueda especificar si algo es un enlace a alguna parte o no.

Editar Los comentarios míos y otros todavía se aplican. Para aclarar, puede usar JavaScript para hacer que un div actúe como un enlace:

<div id="header" onclick="window.location=''http://google.com'';">My Header</div>

Sin embargo, eso no es realmente bueno para la usabilidad, ya que las personas sin JavaScript habilitado no podrán hacer clic y hacer que actúe como un enlace.

Además, es posible que desee agregar un cursor: pointer; línea a su CSS para darle al encabezado div el cursor correcto del mouse para un enlace.

Answer 2

CSS es solo para presentación, no para contenido. Un enlace es contenido y debe colocarse en el HTML del sitio utilizando una etiqueta <a href=""> estándar. A continuación, puede aplicar un estilo a este enlace (o agregar una imagen al enlace) mediante CSS.

Answer 3

Eso realmente no es una cosa CSS. Aún necesita su etiqueta A para que funcione. (Pero use CSS para asegurarse de que el borde de la imagen se elimine o se diseñe según las especificaciones requeridas).

<a href="index.html"><img src="foo" class="whatever" alt="foo alt" /></a>

EDITAR: Tomando la intención original (pregunta actualizada) en cuenta, una nueva muestra de código está a continuación:

<a href="index.html"><img id="header" alt="foo alt" /></a>

Todavía estás en un mundo HTML para enlaces, como se describe en otras respuestas sobre esta pregunta.

Answer 4

HTML es la única forma de crear enlaces: define la estructura y el contenido de un sitio web.

CSS significa Hojas de Estilo en Cascada - solo afecta la apariencia de las cosas.

Aunque normalmente una etiqueta <a> es la única forma de crear un enlace, puede hacer que se haga clic en <div> con JavaScript. Yo usaría jQuery:

$("div#header").click(function() {window.location=XXXXXX;});

Answer 5

Para vincular una imagen de fondo de origen css:

#header { 
display:block;

margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;    
}    

<a id="header" href="blah.html" class="linkedImage">

La clave aquí es convertir la etiqueta de anclaje en un elemento de bloque, para que la altura y el ancho funcionen. De lo contrario, es un elemento en línea e ignorará la altura.

Answer 6

Usted controla el diseño y los estilos con CSS, no el comportamiento de su contenido.

Deberá usar algo como <a id="header" href="[your link]">Logo</a> y luego tener un bloque CSS como:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

No puede anidar un div dentro de <a> y aún tiene un código "válido". <a> es un elemento en línea que legalmente no puede contener un elemento de bloque. La única forma que no es Javascript de hacer un enlace es con el elemento <a> .

Puedes anidar tu etiqueta <a> dentro de <div> y luego poner tu imagen dentro :)

Si no quieres eso, vas a tener que usar JavaScript para hacer clic en tu <div> :

Document.getElementById("header").onclick = function() {
    window.location=''...''; 
}

Answer 7

<a href="linkto_title_page.html" class="titleLink"></a>

entonces en tu css

.titleLink {
  background-image: url(imageUrl);
}

Answer 8

Tienes que usar un elemento de anclaje, envuelto en un contenedor. En su página de inicio, su título normalmente sería un h1, pero luego en las páginas de contenido probablemente cambie a un div. También debe tener siempre texto en el elemento delimitador para las personas sin soporte de CSS y / o lectores de pantalla. La forma más fácil de ocultar eso es a través de CSS. Aquí hay dos ejemplos:

<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>

y el CSS:

#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}

Dependiendo del resto de su hoja de estilo, puede que necesite ajustarla para la h1 para que se vea igual que la div, revise los Restablecimientos CSS para encontrar posibles soluciones a esto.

Answer 9

La especificación en progreso de HTML5 permite vincular varios atributos más , div incluido. Por ejemplo:

<div href="http://.com"> .... </div>

Hasta que HTML5 sea ampliamente adoptado o aparezca algo más, la forma de crear un enlace de hipertexto es a través del elemento de anclaje.

Answer 10

Pruebe esto: use una H1 como asiento de su gráfico. Me salvó el trasero una y otra vez:

<h1 class="technique-six">
    CSS-Tricks
</h1>

h1.technique-six {
    width: 350px;
    padding: 75px 0 0 0;
    height: 0;
    background: url("images/header-image.jpg") no-repeat;
    overflow: hidden;
}

Accesible, y también sólido en los navegadores IE6 y>. También podría vincular el H1.

Answer 11

Perdón por mimar a sus divertidas damas y caballeros, es posible.

Write in your header: [link](http://"link here")

then in your css:

#header a[href="https://link here"] {
          display: inline-block;
          width: 75px;
          height: 75px;
          font-size: 0;
        }
        .side .md a[href="link here"] {
          background: url(%%picture here%%) no-repeat;
        }