Imagens de bordas com as mesmas ações e cores dos links

[Hank (Jean) 0]

Gostaria de deixar algumas imagens com link e bordas com as mesmas ações dos meus links normais, como faço isso? Eis aqui o meu CSS (gostaria de alterar somente a .text):

 

* {}body {background: url(fundo.gif) #171717;}.text {	font-size: 11px;	font-style: normal;	font-weight: normal;	font-family: Verdana, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #B1B1B1;}.text a:link, .text a:active, .text a:visited {	font-size: 11px;	font-style: none;	font-weight: normal;	font-family: Verdana, Arial, Helvetica, sans-serif;	text-decoration: none;	color: #E1E1E1;}.text a:hover {	color: #00CCFF;}.copyright {	font-family: Verdana, Arial, sans-serif, Tahoma;	font-size: 10px;	font-style: normal;	line-height: normal;	color: #666666;	font-variant: normal;	text-transform: none;	font-weight: normal;}a:link {	font-family: Verdana, Arial, sans-serif, Tahoma;	color: #838383;	text-decoration: none;}a:visited {	font-family: Verdana, Arial, sans-serif, Tahoma;	color: #838383;	text-decoration: none;}a:active {	font-family: Verdana, Arial, sans-serif, Tahoma;	color: #838383;	text-decoration: none;}.local {	font-family: Geneva, Arial, Helvetica, sans-serif;	font-size: 12px;	color: #E1E1E1;}

 

Desde já, muito obrigado!

[Paulo de Tarso F. M. 24]

Hã? Sua dúvida ainda deixou dúvidas... <_< Exemplifique melhor o que deseja, meu caro...

[Hank (Jean) 0]

Eu gostaria de colocar uma borda de 1px em certas imagem, dae quando o rapaz passa o mouse por cima dela, acontecer o mesmo efeito que no link que muda de cor ao passar o mouse.

 

Exemplo (passe o cursor nas imagens): http://jogos.uol.com.br/galerias/playstati...piderman3t.jhtm

 

Enfim, o meu efeito de link já muda de cor e etc quando passa o mouse e tal, mas queria o mesmo efeito nas imagens bordadas do site em geral. É isso. ;)

[Paulo de Tarso F. M. 24]

Bom, o princípio é o mesmo:

 

HTML:

<a href="#" id="imagem"><img src="#" alt="#" /></a>

CSS:

a#imagem img {	border: 1px solid #f00;}a#imagem:hover img {	border: 1px solid #00f;}

Observe que você formata o link, e não a imagem propriamente dita... O detalhe é que você declara a seqüência: a#imagem img... Ou seja, a tag img que estará "dentro" do link de id imagem receberá as formatações... E o mesmo caso é no :hover: Quando o mouse estiver sobre a img que está dentro do link de id imagem ele receberá a formatação da borda especificada...

 

Ok? Espero que seja isso... Qualquer coisa, é só postar! Abraço!

[Guilherme Rambo 4]

Esta técnica da imagem é ótima http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

[Hank (Jean) 0]

Ótimo! Mas tem que passar o ID=Imagem para todas as imagens bordadas?? Cara, não tem como eu fazer isso pra acontecer em qualquer imagem bordada do site? :(Veja se tem alguma solução, por favor!

[Paulo de Tarso F. M. 24]

Na verdade, o ID não está atribuído à imagem, e sim ao link (<a>)... E observe, é como eu expliquei:

Observe que você formata o link, e não a imagem propriamente dita... O detalhe é que você declara a seqüência: a#imagem img... Ou seja, a tag img que estará "dentro" do link de id imagem receberá as formatações... E o mesmo caso é no :hover: Quando o mouse estiver sobre a img que está dentro do link de id imagem ele receberá a formatação da borda especificada...

Se você retirar o ID da tag <a>, o que vai acontecer é que TODAS AS IMAGENS que forem links na sua página receberão a formatação... Isso é por causa da hierarquia... Isso você sabe, né?

 

Bom, qualquer coisa, tamo a e...

[Hank (Jean) 0]

É, mas eu adicionei em vários cantos o id="imagem", como na head junto ao css que puxa, na página junto ao "class" que puxa na tabela, em algum espaço como <id="imagem"> e nada deu certo. (tentei antes de perguntar...)

[Guilherme Rambo 4]

Não podem ter dois elementos com o mesmo ID amigo. Para isso usa-se class.[]'s

[Hank (Jean) 0]

O class já está sendo ocupado para a formatação das letras: <td width="552" valign="top" class="text">Eu não usei duas tags "id" ao mesmo tempo, só pra avisar.PS: Não da pra colocar a id tag junto ao td que mostrei acima.

[Hank (Jean) 0]

Será que poderiam me ajudar? ^^"Por favor...

[Paulo de Tarso F. M. 24]

Bom, não sei se você está entendendo direito como se usa class e id, então, melhor explicar (se você já souber, beleza, mas alguém pode precisar um dia... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif )

 

O que é id? É uma abreviação para identificação (do inglês identification), onde cada um tem uma identificação própria, é como seu RG: não existe outro! Se existir, tem algo errado... Aqui é o mesmo caso, uma id atribuída a um elemento em uma página não pode ser definida para outro qualquer...

 

E o que seria class? É uma classe, onde podemos ter vários elementos atribuídos a ela, pois esse é o objetivo: criamos uma classe de formatação, onde posso aplicá-las em vários elementos na mesma página, sem a necessidade de criar um mesmo código de formatação com nomes diferentes.

 

E um detalhe: um elemento que pertence a uma classe (que possui class="[nome]") pode ter uma id tb, ficando assim:

<img src="[caminho]" alt="[text alternativo]" class="img" id="foto1" /><img src="[caminho]" alt="[text alternativo]" class="img" id="foto2" />

Observe que as duas imagens pertencem à mesma classe (img), porém, cada uma possui uma id própria (foto1 e foto2, respectivamente)...

 

Entendeu? Se o problema não for relacionado a isto, por favor, tente detalhar mais qual é a sua dúvida...

 

Abraço!

[Hank (Jean) 0]

Não é exatamente isso que eu gostaria... mas sim que esse ID fosse atribuido á página toda, não necessitando que eu tenha de adicionar o ID em cada imagem própria.

[Paulo de Tarso F. M. 24]

Não é exatamente isso que eu gostaria... mas sim que esse ID fosse atribuido á página toda, não necessitando que eu tenha de adicionar o ID em cada imagem própria.

Mas meu caro Hank (Jean)... Não estou conseguindo entender sua dúvida exatamente... Se você não quer adicionar uma id a cada imagem, você tem q criar então uma hierarquia no seu CSS de forma que isso seja possível, sem afetar outras imagens... Só se for isso...

 

Exemplo:

 

No seu CSS, você teria:

div#conteudo img {	border: 5px solid #f00;}div#rodape img {	border: 0;}

Observe agora no HTML:

<div id="conteudo">	<img src="#" alt="#" /></div><div id="rodape">	<img src="#" alt="#" /></div>

Analisando o CSS, veja que você está formatando toda tag <img> que está dentro de uma div com id="conteudo", aplicando uma borda de 5px, sólida, de cor vermelha. Depois, você está formatando toda tag <img> que está dentro de uma div com id="rodape", retirando sua borda. Agora, no HTML, nenhuma das duas tags <img> está com uma id ou class definida. Mas mesmo assim, cada uma receberá uma formatação diferente da outra...

 

Será que era isso que você queria saber? Se não for, já não sei mais como poderia te ajudar então... Terá que se explicar melhor ainda...

 

Bom, qualquer coisa, volte a postar! Boa sorte! Abraço!

[Hank (Jean) 0]

É que se você for ver bem, aí você está me pedindo para colocar o ID em cada imagem, sendo que eu quero, digamos que na div inteira pra não perder tempo.Eu tentei colocar a ID na div anteriormente, como você explicou no último post, e não deu certo.Você tem certeza de que é assim?

[Paulo de Tarso F. M. 24]

É que se você for ver bem, aí você está me pedindo para colocar o ID em cada imagem...

Claro que não é isso amigo Hank (Jean). Observe bem que no modelo que te passei as formatações são aplicadas usando a hierarquia das tags, e não id ou class como você imagina...

 

Você tem certeza de que é assim?

Sim, tenho... Vou usar o mesmo exemplo anterior, com algumas alterações:

 

No CSS:

div#conteudo img {	border: 5px solid #f00;}div#rodape img {	border: 0;}

Normal, não alterei nada aqui...

 

Agora, no HTML:

<div id="conteudo">	<img src="#" alt="#" />	<img src="#" alt="#" />	<img src="#" alt="#" /></div><div id="rodape">	<img src="#" alt="#" />	<img src="#" alt="#" />	<img src="#" alt="#" />	<img src="#" alt="#" />	<img src="#" alt="#" /></div>

Observe aqui o seguinte: as 3 imagens da div conteudo receberão a mesma formatação: border: 5px solid #f00. E veja bem: nenhuma tag <img /> tem algum id ou class...

E na div rodape as 5 imagens receberão a mesma formatação: border: 0... Mesma coisa: nenhuma tem um id ou class...

 

Se não está dando certo, é pq tem alguma coisa errada no seu código, esteja certo disso...

 

Bom, qq coisa, posta o código da parte onde está dando problema... Abraço!

[Hank (Jean) 0]

Eu fiz, coloquei a div "galeria", mas as imagens só recebem informação da primeira linha.

 

div#galeria img {	border: 1px solid #E1E1E1;}a#galeria:hover img {	border: 1px solid #00CCFF;}

Elas não mudam mais de cor como pede o hover.

[Paulo de Tarso F. M. 24]

Mas esse seu código está errado! Observe:

 

Na primeira declaração, você tem uma div com id galeria... Já na segunda declaração, a id galeria está atribuída à tag a!!! você inverteu as coisas aqui... Ainda na primeira declaração, falta indicar a tag a, e na segunda, esqueceu de associar a id ao elemento certo... Seu código, ao que me parece, deve ficar da seguinte forma:

div#galeria a img {	border: 1px solid #E1E1E1;}div#galeria a:hover img {	border: 1px solid #00CCFF;}

Percebe a diferença?

 

Bom, espero que agora funcione... Abraço!

[Hank (Jean) 0]

Opa! É que eu não sabia como fazer direito o código no CSS...

 

Te enchi o saco mas valeu a pena! (não valeu?) huaha

 

Cara, muito obrigado ai... agora já posso adicionar o código em minhas galerias. Adios! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Guilherme Rambo 4]

Te enchi o saco mas valeu a pena!

Capaz, esse espaço aqui serve pra isso mesmo... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif[]'s