Entrar

Bordes de imágenes (solucionado)

Jugoncan · · Solicitar retirada
Tengo un problemilla:
Cuando le pongo un borde a una imagen que tiene un enlace se me pone el borde amarillo. ¿Cuál es el código para elegir el color del borde?
Gracias, Juanma
Jugoncan · · Solicitar retirada
Gracias, me funciona perfectamente.
Otra dudilla: si la imagen tiene partes transparentes, ¿se puede hacer que lo transparente cambie de color al pasar el ratón por encima?
Pos: la imagen tiene enlace.
Gracias, Juanma
PROF3TA · · Solicitar retirada
en la hoja de estilos pones
a:hover{
background:url(direccion de la imagen)}
Jugoncan · · Solicitar retirada
Retiro lo dicho: al hacer la vista previa en un explorador no se ven los bordes de la imagen.
Jugoncan · · Solicitar retirada
Alguien sabe como hacer que se vean los bordes de otro color en una imagen con enlace?
PROF3TA · · Solicitar retirada
Jugoncan escribió:Retiro lo dicho: al hacer la vista previa en un explorador no se ven los bordes de la imagen.
jeje en uno no pero en otro si es lo que hay
Jugoncan · · Solicitar retirada
jeje :lol: , bueno, pues no se ve en ninguno.
He estado buscando en internet y parece que no hay forma de cambiar el color de borde a una imagen con enlace, yo ya me rindo :(
Yaneth · · Solicitar retirada
mmm

he hecho una pruebita asi:


[contenido no disponible]

estilo

a {}
a:link {}
a:visited {}
a:hover {border:4px solid red;}
a:active {}

y funciona perfecto

lo unico que habríamos de ver es que si tienes más enlaces no te afecte
pero tambien se puede arreglar

en ese caso pones algo asi:

a.bor {}
a.bor:link {}
a.bor:visited {}
a.bor:hover {border:4px solid red;}
a.bor:active {}

y en la imagen asi:

[contenido no disponible]

saludos
Yaneth · · Solicitar retirada
mmm

pon tus codigos completos

tal vez es una herencia de los estilos que te lo impide

o dame la url para verlo
Jugoncan · · Solicitar retirada
Una cosa curiosa:
yo tenía a {color: yellow} y el borde de la imagen me aparecía amarillo
lo cambio a black y me aparece negro.
Ahora creo a.ima {color: black} dejando la otra amarilla y no se me pone negro.
Qué es lo que hago mal?
Yaneth · · Solicitar retirada
mmm

no se

pero el

a {} es para el enlace tal cual, no para cuando el raton pasa sobre el

pero mejor dame tus codigos, yo los bajo a mi programa y los veo ahi

saludos
Jugoncan · · Solicitar retirada
El html:
<html>
<head>
<title>Tu web de inform&aacute;tica - Crear juegos</title>
<link href="../estilos.css" media="screen" rel="StyleSheet" type="text/css">
</head>
<body>

<div id="global"><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="menu1"></td>
<td class="contenido" valign="top" rowspan="6">
<div align="center">[contenido no disponible]</div>


</p> </td>
</tr>
<tr>
<td class="menu1"> </td>
</tr>
<tr>
<td class="menu1">
<div id="menule"></div> </td>
</tr>
<tr>

<td class="menu1"></td>
</tr>
<tr>
<td class="menu1"></td>
</tr>
<tr>
<td height="3400" class="menu4"></td>
</tr>
</table>
</div>
</body>
</html>

La hoja de estilos:
body {background-color: #B5B5B5; text-align: center}
p {text-align: justify}
#global {width: 800px; margin: 4px auto}
#curiba {background-image: url(imagenes/curiba.jpg); height: 20px}
#banners {background-color: #363636; color: white; height: 70px; padding: 0px 10px 2px 10px; text-align: center}
#tabla {background-color: #4F4F4F}
td.contenido {background-color: #E8E8E8; width: 650px; padding: 10px 10px 10px 10px; text-indent: 15px; text-align: justify}
td.contenido2 {background-color: #E8E8E8; width: 800px; padding: 10px 10px 10px 10px; text-align: justify}
td.menu1 {background-color: #363636; width: 150px; padding: 3px; color: white; text-align: center; height: 10px}
td.menu4 {background-color: #363636}
p.menu1p {text-align: center}
td.menu2 {padding: 2px 4px; text-align: center}
#menule {background-color: #8B7500; margin: 4px; color: white; font-size: 1.3em; text-align: center; height: 20px}
#fecha {background-color: #363636; float: left; width: 150px; color: white}
#fin {background-color: #363636; color: white; text-align: center; font-size: 0.7em}
#curaba {background-image: url(imagenes/curaba.jpg); height: 20px}
h1 {color: #FFA500; font-size: 1.8em; font-weight: bold; text-decoration: underline}
h2 {color: #FFA500; font-size: 1.2em; font-weight: bold}
h3 {color: #FFA500; font-size: 1em; font-weight: bold}

ul {margin: 0px; padding: 0px; list-style: none}

td.ge {width: 100px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.a1 {width: 140px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.a2 {width: 140px; text-align: center; padding: 3px 6px 6px 6px; background-color: #696969}
td.b1 {width: 140px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.b2 {width: 140px; text-align: center; padding: 3px 6px 6px 6px; background-color: #696969}
td.c1 {width: 140px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.c2 {width: 140px; text-align: center; padding: 3px 6px 6px 6px; background-color: #696969}
td.d1 {width: 140px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.d2 {width: 140px; text-align: center; padding: 3px 6px 6px 6px; background-color: #696969}
td.e1 {width: 140px; text-align: center; padding: 6px 6px 3px 6px; background-color: #4F4F4F}
td.e2 {width: 140px; text-align: center; padding: 3px 6px 6px 6px; background-color: #696969}

a {color: yellow}

a.menu {color: yellow; text-decoration: none; display: block}
a:link.menu {}
a:visited.menu {color: goldenrod}
a:hover.menu {color: white; text-decoration: underline; font-weight: bold; background-color: black}
a:active.menu {color: #8470FF; font-weight: bold}

a.tab {color: yellow; text-decoration: none; display: block}
a:link.tab {color: yellow}
a:visited.tab {color: goldenrod}
a:hover.tab {color: white; text-decoration: underline; font-weight: bold; background-color: black}
a:active.tab {color: #8470FF; font-weight: bold}

a.conten {color: red; text-decoration: none}
a:link.conten {}
a:visited.conten {color: red}
a:hover.conten {color: white; text-decoration: underline; background-color: black}
a:active.conten {color: orange}

a.imag {color: black}
a:link.imag {color: red}
a:visited.imag {color: red}
a:hover.imag {color: red}
a:active.imag {color: red}

A ver si sale, jeje
Jugoncan · · Solicitar retirada
Al html le he quitado las cosas secundarias que no valen, por eso hay div y tablas que quedan raros, jeje :lol:
Yaneth · · Solicitar retirada
a mi me funciona, pero con la imagen en grande (ocupa casi toda la pantalla)

supongo que el efecto que quieres es con la imagen chica que está a la derecha verdad????


saludos
Jugoncan · · Solicitar retirada
uy, verdad. Es que el código ese en concreto me lo hizo el dreamweaver. Claro, yo seleccioné la imagen y le di que fuera clase imag, jeje :lol:
Ya me funciona perfectamente, muchas gracias.
Jugoncan · · Solicitar retirada
Otra cosa, jeje :lol: :
Para aplicarlo en una imagen en concreto se pone a.imag y en el enlace class="imag"
Pero si quiero para aplicarlo en muchas imágenes y poner en el enlace id="imag", qué se ponía en la hoja de estilos?
Gracias, Juanma.
Yaneth · · Solicitar retirada
no lo recuerdo

pero supongo que debe ser asi:

#image a {}

pero no estoy segura

trataré de ver eso
Yaneth · · Solicitar retirada
pero es que esto era para los enlaces que estuvieran dentro de cierta capa

#pie a {color: red; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:red ; text-decoration:underline ; background-color: yellow }
#pie a:active {color:blue}

saludos
Yaneth · · Solicitar retirada
no, porque ahora te quedará asi:

<div id="image" align="center">[contenido no disponible]</div>

estilos

#image a {}
#image a:link {}
#image a:visited {}
#image a:hover {border:4px solid red}
#image a:active {}

saludos