Foros del Web » Creando para Internet » CSS »

poner imagen con a:hover

Estas en el tema de poner imagen con a:hover en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/12/2009, 02:20
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
poner imagen con a:hover

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
  #2 (permalink)  
Antiguo 01/12/2009, 02:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Respuesta: poner imagen con a:hover

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

a:hover {
background-image: url(ruta/imagen.jpg);
}
  #3 (permalink)  
Antiguo 01/12/2009, 02:33
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

ya,pero yo lo que quiero es poner una imgen a cada lado del link.
gracias de todas formas
  #4 (permalink)  
Antiguo 01/12/2009, 02:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Respuesta: poner imagen con a:hover

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
  1. <a class="enlace" href="#"><span>enlace</span></a>

Código css:
Ver original
  1. a.enlace:hover { background-image: url(imagen.jpg) }
  2. a.enlace:hover span { background-image: url(imagen2.jpg) }

Luego tendrás que alinear una imagen a la derecha y otra a la izquierda.
  #5 (permalink)  
Antiguo 01/12/2009, 02:45
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: poner imagen con a:hover

Cita:
Iniciado por Bonez Ver Mensaje
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...
  #6 (permalink)  
Antiguo 01/12/2009, 03:09
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

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&Iacute;BEROS</span></a></div>
  #7 (permalink)  
Antiguo 01/12/2009, 03:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.460
Antigüedad: 15 años, 4 meses
Puntos: 2097
Respuesta: poner imagen con a:hover

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.
  #8 (permalink)  
Antiguo 01/12/2009, 04:19
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

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&Iacute;BEROS</span></a></div>
  #9 (permalink)  
Antiguo 01/12/2009, 10:25
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: poner imagen con a:hover

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.
  #10 (permalink)  
Antiguo 02/12/2009, 01:30
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

me sigue sin funcionar, te paso el codigo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;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">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</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&Iacute;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&Oacute;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>
  #11 (permalink)  
Antiguo 02/12/2009, 02:17
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

ahora he puesto esto:

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

IMG01 = "flecha_anterior.gif"
IMG02 = "flecha_anterior.gif"

function imgover(imgname){
imgname.src = IMG01
}

function imgout(imgname){
imgname.src = IMG02
}

//-->
</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>
  #12 (permalink)  
Antiguo 02/12/2009, 06:12
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: poner imagen con a:hover

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.
  #13 (permalink)  
Antiguo 02/12/2009, 06:29
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

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
  #14 (permalink)  
Antiguo 02/12/2009, 06:36
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: poner imagen con a:hover

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.
  #15 (permalink)  
Antiguo 02/12/2009, 06:39
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: poner imagen con a:hover

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.
  #16 (permalink)  
Antiguo 02/12/2009, 06:41
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

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">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</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&Iacute;BEROS</span></a></div>
  #17 (permalink)  
Antiguo 02/12/2009, 06:44
 
Fecha de Ingreso: noviembre-2009
Mensajes: 209
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: poner imagen con a:hover

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
  #18 (permalink)  
Antiguo 02/12/2009, 06:51
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: poner imagen con a:hover

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:50.