Foros del Web » Creando para Internet » CSS »

cambio de bordes en imagen que es un link

Estas en el tema de cambio de bordes en imagen que es un link en el foro de CSS en Foros del Web. hola. no puedo hacer que una imagen que es un link cambie el borde color del borde cuando el cursor esta sobre dicha imagen... el ...
  #1 (permalink)  
Antiguo 02/06/2006, 03:36
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
cambio de bordes en imagen que es un link

hola.
no puedo hacer que una imagen que es un link cambie el borde color del borde cuando el cursor esta sobre dicha imagen... el problema me da en el internet explorer, en firefox si cambia perfectamente

este es el codigo ke hice

Código:
.img_link{
border:dashed;
border-width:2px;
border-color:#CC0000;
padding:2px;
}
.img_link:hover{
border:dashed;
border-width:2px;
border-color:#FFFFFF;
padding:2px;
}
se podran dar cuent que no soy muy bueno con CSS apenas empieso jeje

saludos!
  #2 (permalink)  
Antiguo 02/06/2006, 09:25
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Hola

Tu problema está en un par de detalles sobre las css, pero nada preocupante.

Primero un consejo, trata de no utilizar "_" en los nombres de las clases ya que algunas versiones de algunos navegadores no las entienden bien.

Segundo, y el motivo de tu problema, es que debes estar aplicando la clase a la imagen, pero aunque la definición de las css 2 dice que cualquier objeto puede tener estados, explorer no lo considera así, permitiendo estados como el hover solo en los vínculos.

Hice una sencilla página de ejemplo con tu código y funciona bien en ambos navegadores:

Código:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<title>Pruebilla</title>
	<style type="text/css">
		.ImgLink{
		border:dashed;
		border-width:2px;
		border-color:#CC0000;
		padding:2px;
		}
		.ImgLink:hover{
		border:dashed;
		border-width:2px;
		border-color:#FFFFFF;
		padding:2px;
		}
	</style>
</head>
<body>
<a href="pagina.htm" class="ImgLink"><img src="imagen.gif" width="100" height="50" /></a>
</body>
</html>
Felicidad
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 02/06/2006, 10:56
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 13 años, 9 meses
Puntos: 4
Simplemente para aportar un poco mas de 'optimizacion' en el codigo; que si bien no es el problema en cuestion, podria ser de utilidad.

<style type="text/css">
.ImgLink{
border:dashed;
border-width:2px;
border-color:#CC0000;
padding:2px;
}
.ImgLink:hover{
border:dashed;
border-width:2px;
border-color:#FFFFFF;
padding:2px;
}
</style>


lo podriamos optimizar asi ...

<style type="text/css">
.ImgLink{
border:2px dashed #C00;
padding:2px;
}

.ImgLink:hover{
border: 2px :dashed #FFF;
padding:2px;
}
</style>


y aun mas ...
<style type="text/css">
.ImgLink, .ImgLink:hover{
border:2px dashed #C00;
padding:2px;
}

.ImgLink:hover{border-color: #FFF;}
</style>


Yo soy medio 'enfermizo' con la optimizacion de codigo; pero la cantidad de codigo en un browser es inversamente proporcional a la velocidad; y a veces no cuesta mucho realizarla.
__________________
| Cabeza De Raton |
  #4 (permalink)  
Antiguo 02/06/2006, 18:17
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
ok muchas gracias!..... saben ahora me surge una duda, como puedo hacer para ke esta clase sea aplicada solo a las imagenes que sean un enlace

<style type="text/css">
.ImgLink{
border:dashed;
border-width:2px;
border-color:#CC0000;
padding:2px;
}
.ImgLink:hover{
border:dashed;
border-width:2px;
border-color:#FFFFFF;
padding:2px;
}
</style>

y que las que no sean enlace solo se les muestre este

.ImgLink{
border:dashed;
border-width:2px;
border-color:#CC0000;
padding:2px;
}

lo ke kiero es ke se distingan cuales son enlaces y cuales no al momento de pasar el cursor sobre ellas.. no se si me explike

gracias
  #5 (permalink)  
Antiguo 02/06/2006, 22:05
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Usando el codigo que te dio PatomaS, en el cual la clase esta aplicada al link y no a la imagen, y optimizando un poco el codigo por recomendacion de Calisco, bastaria con que pusieras...

Código:
.ImgLink{
	border: 2px dashed #CC0000;
	padding:2px;
	}

.ImgLink:hover {
	border-color: #FFFFFF;
	}
...para los links y...
Código:
img {
	border: 2px dashed #CC0000;
	padding: 2px;
	}
...para las imagenes.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #6 (permalink)  
Antiguo 02/06/2006, 23:20
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
si eso lo se, pero este es una galerias de fotos qie algunas imagenes aveces lleban enlace y aveces no..... mmmm no se soy nuevo en CSS pero algunas veces eh visto codigos algo asi (no estoy seguro de como es)

.ImgLink a img {
border: 2px dashed #CC0000;
padding: 2px;
}

lo ke kiero es ke solo las imagenes ke van dentro del .ImgLink ke sean un enlace lleben se les asigne esto

.ImgLink{
border: 2px dashed #CC0000;
padding:2px;
}

.ImgLink:hover {
border-color: #FFFFFF;
}

y a las ke no lleban enlace se les asigne este otro ke no tiene el HOVER

img {
border: 2px dashed #CC0000;
padding: 2px;
}

es un script hecho en php.

se ke se puede pero no se como hacerlo repito soy nuevo en CSS y ya e intentado mucho pero no encuentro la manera
__________________
GraficasWeb.com / Diseño y Desarrollo Web en Mexico
info @ graficasweb.com E-mail / MSN
  #7 (permalink)  
Antiguo 03/06/2006, 01:31
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
SICK, el codigo que te pase deberia funcionar. Lo que pasa es que el border del link y el de la imagen son iguales, entonces no vas a notar cambios, proba poniendole otro color o groso al css de la imagen y deberia funcionar. Si no te funciona pasanos una URL donde poder ver como esta hecho el HTML.

Suerte!
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #8 (permalink)  
Antiguo 04/06/2006, 01:36
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
mmm pues no me funciona mira, esta es la url http://www.nothingpunk.com/fotos/2.html

solo que hice unos cambios en el Codigo CSS lo camie por este otro
Código:
.mosimage {
border:solid;
border-width:1px;
border-color: #FF9900;
padding:2px;
}

.mosimage:hover {
border-color: #FFFFFF;
}
__________________
GraficasWeb.com / Diseño y Desarrollo Web en Mexico
info @ graficasweb.com E-mail / MSN

Última edición por SICK-BOY; 04/06/2006 a las 01:47
  #9 (permalink)  
Antiguo 04/06/2006, 02:11
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por SICK-BOY
mmm pues no me funciona mira
si que funciona, pero solo en navegadores que no sean IE. IE 6 no reconoce el estado hover salvo cuando es a:hover (aparentemente esto está arreglado en el IE7 beta). Probá con este código:

Código:
.mosimage a{
border:solid;
border-width:1px;
border-color: #FF9900;
padding:2px;}

.mosimage a:hover {
border-color: #FFFFFF;}
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 04/06/2006, 22:56
 
Fecha de Ingreso: octubre-2005
Mensajes: 419
Antigüedad: 12 años, 1 mes
Puntos: 0
mmm nop, sigue igual con el codigo ke me dices .... mmm ke late es siempre com IE! jejeje

saludos
__________________
GraficasWeb.com / Diseño y Desarrollo Web en Mexico
info @ graficasweb.com E-mail / MSN
  #11 (permalink)  
Antiguo 04/06/2006, 23:53
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
SICK-BOY, lo que pasa es que estas aplicandole la clase a la imagen, cuando deberias aplicarsela al link... Proba con el siguietne codigo:

Código HTML:
<a class="mosimage" href="http://www.nothingpunk.com/fotos/6.html">
<img src="http://www.nothingpunk.com/images/zoom/nothing/thumbs/nothing.jpg"> 
Código:
.mosimage img {
border: 0;
}

.mosimage {
border: 1px solid #FF9900;
padding:2px;
}

.mosimage a:hover {
border-color: #FFFFFF;
}
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
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 18:07.