cambio de bordes en imagen que es un link

SICK-BOY · #1 (**permalink**) 02/06/2006, 02:36

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!

PatomaS · #2 (**permalink**) 02/06/2006, 08:25

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

Calisco · #3 (**permalink**) 02/06/2006, 09:56

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.

SICK-BOY · #4 (**permalink**) 02/06/2006, 17:17

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

K3NNY · #5 (**permalink**) 02/06/2006, 21:05

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.

SICK-BOY · #6 (**permalink**) 02/06/2006, 22:20

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

K3NNY · #7 (**permalink**) 03/06/2006, 00:31

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!

SICK-BOY · #8 (**permalink**) 04/06/2006, 00:36

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;
}

webosiris · #9 (**permalink**) 04/06/2006, 01:11

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;}

SICK-BOY · #10 (**permalink**) 04/06/2006, 21:56

mmm nop, sigue igual con el codigo ke me dices .... mmm ke late es siempre com IE! jejeje

saludos

K3NNY · #11 (**permalink**) 04/06/2006, 22:53

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;
}