Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rfteixeira

Aplicar CSS na borda de imagens

Por , em Javascript

Recommended Posts

rfteixeira    0

rfteixeira
Postado

Na nossa Intranet tenho um módulo que é um banco de fotografias da Obra.Nas miniaturas, que têm links para abrir as fotos em tamanho natural, gostaria de aplicar o efeito de link ativo, link visitado e hover sobre a cor da borda das miniaturas. Preferencialmente, não gostaria de usar o recurso do rollover em javascript, trocando imagens com bordas de cores diferentes.Gostaria de saber se se pode trocar a cor das bordas via CSS e inclusive estando essas condições em um arquivo css externo, padrão para todas as minhas páginas que possuem miniaturas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

thiagocs    0

thiagocs
Postado 
<HTML><HEAD><TITLE> New Document </TITLE><STYLE>a.thumbs:link{	border: 3px solid Black;}a.thumbs:hover{	border: 3px solid Black;}a.thumbs:active{	border: 3px solid Black;}a.thumbs:visited{	border: 3px solid Green;}</STYLE></HEAD><BODY><A HREF="img2.jpg" CLASS="thumbs"><img border="0" src="img.jpg"></A></BODY></HTML>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

Ola, 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
a img { border:5px solid #f00;
}
a:visited img { border:5px solid #666;
}
a:hover img { border:5px solid #0f0;
}
a:active img { border:5px solid #00f;
}
</style>
</head>
<body>
<p><a href="#">
<img src="imagem.jpg" width="10" height="10">
</a> 
</p>
</body>
</html>

Mais links AQUI

Compartilhar este post

Link para o post
Compartilhar em outros sites

d.eleete    0

d.eleete
Postado

crie dois estilos

 

<style type="text/css"><!--.normal{border-style: solid;border-width: 1px;border-color: blue;}.hover{border-style: solid;border-width: 1px;border-color: red;}--></style>

Agora aplique-os na imagem (existem varias formas):

 

<img src="avatar.gif" class="normal" Onmouseover="className='hover'" onMouseOut="className='normal'">

Compartilhar este post

Link para o post
Compartilhar em outros sites

rfteixeira    0

rfteixeira
Postado

Agradeço muito aos colegas ACLourenço, Maujor e ThiagoCS, pela atenção. Valeu! Mas não consegui fazer o código deles funcionar. Posso ter feito besteira. Mas o código do d.ellete funcionou na hora. Se eu descobrir porque prometo postar de novo para explicar para os interessados.Meu caro d.ellete,Funcionou, mas eu não gostaria de ter que inserir essa linha do onMouseover e onMouseout dentro de cada linha de imagem. Gostaria de ter isso no arquivo CSS externo que já tenho, definindo todas as características de layout que vigoram nas páginas. Pode me ajudar em mais esta?

Compartilhar este post

Link para o post
Compartilhar em outros sites

alicacwb    0

alicacwb
Postado

crie dois estilos

 

<style type="text/css"><!--.normal{border-style: solid;border-width: 1px;border-color: blue;}.hover{border-style: solid;border-width: 1px;border-color: red;}--></style>
Agora aplique-os na imagem (existem varias formas):

 

<img src="avatar.gif" class="normal" Onmouseover="className='hover'" onMouseOut="className='normal'">
simples assim....

 

<style type="text/css"><!--img {border-style: solid;border-width: 1px;border-color: blue;}img:hover {border-style: solid;border-width: 1px;border-color: red;}--></style>
Com este código, você não precisa usar nem o class nas imagens, pq você ñ criou uma classe, mas sim redefiniu uma tag html. (sem ponto na frente, você redefine tags. Com o ponto (.) você cria classes.)

 

 

Alica CWB ---> agora na versão lilás !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito