poner imagen con a:hover

gazaposa · #1 (**permalink**) 01/12/2009, 02:20

no se si esto va en esta seccion, si no es asi pido disculpas.
Tengo unos links, y quiero que al ponerse encima aparezca una imagen a cada lado del link, seria:
<imagen>link<imagen>
como lo puedo hacer?
muchas gracias

pzin · #2 (**permalink**) 01/12/2009, 02:26

Puedes añadir una imagen de fondo en el elemento A.

a:hover {
background-image: url(ruta/imagen.jpg);
}

gazaposa · #3 (**permalink**) 01/12/2009, 02:33

ya,pero yo lo que quiero es poner una imgen a cada lado del link.
gracias de todas formas

pzin · #4 (**permalink**) 01/12/2009, 02:43

Entonces tendrías que poner algún elemento dentro del enlace, ya que cada elemento solo se le puede añadir una imagen de fondo.

Código html:

Ver original<a class="enlace" href="#"><span>enlace</span></a>

Código css:

Ver originala.enlace:hover { background-image: url(imagen.jpg) }
a.enlace:hover span { background-image: url(imagen2.jpg) }

Luego tendrás que alinear una imagen a la derecha y otra a la izquierda.

tistklehoff · #5 (**permalink**) 01/12/2009, 02:45

Cita:

Iniciado por Bonez

Puedes añadir una imagen de fondo en el elemento A.

a:hover {
background-image: url(ruta/imagen.jpg);
}

Hola.

Que te lo confirme alguen que sepa más, pero para poner 2 imágenes, necesitarás 2 sitios donde colocarlas. Uno es el <a> como te ha dicho Bonez.

Para poner la otra, puedes poner un span dentro del <a> así:

<a><span></span></a>

y asociarle la otra imágen a un lado.

Tendrás que espaciar el contenido dentro del <a> si no quieres que te quede sobre las imágenes.

Espero que te sirva.

Un saludo.

Edit: Vaya! se me adelantó Bonez, lo siento...

gazaposa · #6 (**permalink**) 01/12/2009, 03:09

bonez, ya he probado pero no me sale. te pongo el codigo:

<style type="text/css">

a.enlace:hover { background-image: (../imagenes/flecha_anterior%20.gif( }
a.enlace:hover span { background-image: (../imagenes/flecha_anterior%20.gif) }
</style>

<div id="Layer1" style="position:absolute; left:297px; top:14px; width:147px; height:28px; z-index:1"><a href="celtiberos/index.html" target="_parent" class="imagen"><span>LOS
CELTÍBEROS</span></a></div>

pzin · #7 (**permalink**) 01/12/2009, 03:56

Tienes que cambiar la clase del enlace o del código CSS. En uno pone "imagen" y en otro hace referencia a la clase "enlace". Tienes que ser iguales.

gazaposa · #8 (**permalink**) 01/12/2009, 04:19

me sigue sin funcionar:
a.enlace:hover { background-image: (../imagenes/flecha_anterior%20.gif( }
a.enlace:hover span { background-image: (../imagenes/flecha_anterior%20.gif) }
</style>

<div id="Layer1" style="position:absolute; left:297px; top:14px; width:147px; height:28px; z-index:1"><a href="celtiberos/index.html" target="_parent" class="enlace"><span>LOS
CELTÍBEROS</span></a></div>

prava · #9 (**permalink**) 01/12/2009, 10:25

Hola mercedez, como estas? primero lo que veo a lo lejos es que tienes un parentesis al revés.

Código:

background-image: (../imagenes/flecha_anterior%20.gif( }

Por otro lado la manera de formular tu propiedad background no esta del todo correcta y completa.
Yo te aconsejaría algo como esto:

Código:

a.enlace span { padding: 0 30px; }
a.enlace:hover { background: url(../imagenes/flecha_anterior.gif)) no-repeat left center; }
a.enlace:hover span { background: url(../imagenes/flecha_anterior.gif)) no-repeat right center; }

Ahí lo que hice fué aplicar posición a las imagenes de fondo del link y del span, el primero a la izquierda-centro y segundo derecha-centro. Tambien eliminé el espacio que tenías al final del nombre de la imagen y que el programa que estas usando lo sustituyó por un %20. Tendrías que cambiar el nombre de la imagen a flecha_anterior.gif sin espacio antes del punto. Por otro lado como estas imagenes se van a ubicar a la izquierda y a la derecha de link y span sin ancho (el ancho es el del contenido) para que se vean las imagenes le di un padding: 0 30px osea 30px de cada lado del span con el texto. Las imagenes de background van a situarse en ese espacio.

Fijate si ahora te funciona y cualquier cosa me decis.

Saludos,
Pablo.

gazaposa · #10 (**permalink**) 02/12/2009, 01:30

me sigue sin funcionar, te paso el codigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a:link {
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFFFCC;
font-weight: bold;
white-space: normal;
}
a:visited {
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFFFCC;
font-weight: bold;
}
a:hover{

text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFCC99;
font-weight: bold;
font-style:italic;
}
a:active{
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
font-weight: bold;
color: #FFFFCC;
}
a.enlace span { padding: 0 30px; }
a.enlace:hover { background: url(../imagenes/flecha_anterior.gif)) no-repeat left center; }
a.enlace:hover span { background: url(../imagenes/flecha_anterior.gif)) no-repeat right center; }
</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body background="../imagenes/Barra.png">

<div id="Layer1" style="position:absolute; left:297px; top:14px; width:147px; height:28px; z-index:1"><a href="celtiberos/index.html" target="_parent" class="enlace"><span>LOS
CELTÍBEROS</span></a></div>

<div id="Layer5" style="position:absolute; left:6px; top:4px; width:112px; height:61px; z-index:5">
<img src="http://www.forosdelweb.com/f53/imagenes/transparente%20copia.gif" width="121" height="56">
</div>

<div id="Layer2" style="position:absolute; left:476px; top:14px; width:206px; height:28px; z-index:2"><a href="sitios_arqueol%F3gicos/index.html" target="_parent">SITIOS
ARQUEOLÓGICOS</a></div>
<div id="Layer3" style="position:absolute; left:731px; top:14px; width:84px; height:28px; z-index:3"><a href="museos/index.html" target="_parent">MUSEOS</a></div>
<div id="Layer4" style="position:absolute; left:861px; top:14px; width:95px; height:28px; z-index:4"><a href="eventos/index.html" target="_parent">EVENTOS</a></div>

</body>
</html>

gazaposa · #11 (**permalink**) 02/12/2009, 02:17

ahora he puesto esto:

<html>
<head>
<title>XLWebmasters.com</title>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>

<body>
<IMG SRC="flecha_anterior.gif" NAME="IMG01" width="29" height="27" BORDER="0">
<A HREF="http://www.miweb.com/" onMouseOver="imgover(IMG01)" onMouseOut="imgout(IMG01)">MiWeb</A>
<br>
<IMG SRC="flecha_anterior.gif" NAME="IMG02" width="27" height="23" BORDER="0">
<A HREF="http://www.miweb.com/seccion/" onMouseOver="imgover(IMG02)" onMouseOut="imgout(IMG02)">Seccion</A>
</body>
</html>

prava · #12 (**permalink**) 02/12/2009, 06:12

Hola Mercedez, te cuento que lo que yo te pasé ya estaba probado y funcionaba en mi PC. Si no lo veías podía ser por un tema de path o de nombre de imagen pero sería bueno que nos pasaras un link a tu pagina para poder verla. Por otro lado en el ultimo post nos muestras un codigo nuevo el que realmente si bien entiendo lo que hace el javascript, este no haría lo que vos queres. Lo que vos intentas hacer con esto es lo que se ve en este link:
webexperto.com/articulos/art/36/efectos-en-imagenes-pegadas-a-un-link-de-texto/
La diferencia es que en tu ejemplo vos las dos imagenes en cuestión son la misma, osea que cuando el puntero no está sobre el link te muestra una imagen a la izquierda del mismo, y cuando situas el puntero sobre el te muestra la misma y al sacarlo la misma tambien. En efecto esto si funcionara te mostraría siempre una imagen al lado de tu link

.

Suponiendo que lo que vos querías hacer es mostrar una misma imagen a cada lado del link al situar el puntero sobre el link y que no las muestre al quitarlo no sería por ahí el camino. Tambien por lo que veo en este ejemplo citado es que cada link tiene un juego de imagenes identicas pero con nombre distinto para poder hacer referencia a ella de manera distinta en cada caso lo que es muy chancho.

Si quieres muestranos un link con el ejemplo en css y vemos que le falta en un segundo.

Saludos,
Pablo.

gazaposa · #13 (**permalink**) 02/12/2009, 06:29

buenas pablo, a ver volviendo a la primera versio, a la que tu me corregiste a esta:
a.enlace span { padding: 0 30px; }
a.enlace:hover { background: url(../imagenes/flecha_anterior.gif)) no-repeat left center; }
a.enlace:hover span { background: url(../imagenes/flecha_anterior.gif)) no-repeat right center; }

me sigue sin funcionar, la ruta de la imagen esta bien puesta, pero no me la muestra
no te puedo dar el link de mi web pq no la tengo colgada todavia.
y mi pregunta es, no puedo hacer esto mostrando y ocultado capas???? muchas gracias pablo

prava · #14 (**permalink**) 02/12/2009, 06:36

Hola Mercedez, es medio complicado sin poder ver lo que vos tenes ahí. Yo diría que postearas nuevamente lo que tenes de html y css y yo veo que podes tener mal mas allá de las paths y nombre de imagen. Si queres mandame tu mail y te puedo pasar el ejemplo funcionando.

Saludos,
Pablo.

prava · #15 (**permalink**) 02/12/2009, 06:39

Por lo que pude ver de lo que posteaste anteriormete veo que la propiedad background está mal formulada. Hay dos parentesis que cierran pero solo uno abre:

Código:

a.enlace:hover { background: url(../imagenes/flecha_anterior.gif)) no-repeat left center; }
a.enlace:hover span { background: url(../imagenes/flecha_anterior.gif)) no-repeat right center; }

Quitale uno de los dos parentesis que cierran y me decis.

Saludos,
Pablo.

gazaposa · #16 (**permalink**) 02/12/2009, 06:41

te he mandado mi direccion de correo.
este es el codigo:::

<style type="text/css">
a:link {
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFFFCC;
font-weight: bold;
white-space: normal;
}
a:visited {
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFFFCC;
font-weight: bold;
}
a:hover{

text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
color: #FFCC99;
font-weight: bold;
font-style:italic;
}
a:active{
text-decoration:none;
font-family: Garamond, "Times New Roman";
font-size: 14px;
font-weight: bold;
color: #FFFFCC;
}
a.enlace span { padding: 0 30px; }
a.enlace:hover { background: url(../imagenes/flecha_anterior.gif)) no-repeat left center; }
a.enlace:hover span { background: url(../imagenes/flecha_anterior.gif)) no-repeat right center; }
</style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body background="../imagenes/Barra.png">

<div id="Layer1" style="position:absolute; left:297px; top:14px; width:147px; height:28px; z-index:1"><a href="celtiberos/index.html" target="_parent" class="enlace">
<span>LOS CELTÍBEROS</span></a></div>

gazaposa · #17 (**permalink**) 02/12/2009, 06:44

he quitado los parentesis que me digist y ya me sale la imagen, pero como puedo colocarla doinde yo quierea???
pq antes el link me lo ponia todo en una linea, asi:
LOS CELTIBEROS
y ahora me lo pone asi:
LOS
CELTIBEROS

prava · #18 (**permalink**) 02/12/2009, 06:51

Bueno, entre los atributos que embebes en el html del id="Layer1" hay un width:147px; que deberias actualizar porque acordate que el codigo que te pasé reserva espacio para las imagenes que van a aparecer:

Código:

a.enlace span { padding: 0 30px; }

Esto hace que al ancho del span dato por la cantidad de caracteres se le adicionen 60px (30px de cada lado). Estos 60px mas los caracteres que tu tenes no entran y la ultima palabra se cae. Solo agrandando un poco el width del layer1 bastará.

P.D. Yo como no se el ancho te tus imagenes puse 30px de padding pero si son mas chicas o mas grandes tu puedes jugar con estas magnitudes de manera que quede como tu quieres.

Saludos,
Pablo.