Ir para conteúdo

POWERED BY:

Arquivado

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

Deh_Cavalieri

Imagem responder a presença de cursor

Por , em Desenvolvimento frontend

Recommended Posts

Deh_Cavalieri    0

Deh_Cavalieri
Postado

Olá pessoas,

 

Estou pela primeira vez nessa área do fórum pois estou me aventurando na linguagem HTML.

Não possuo nenhum programa para esse fim (leia-se DreamWaver) e por isso tudo que faço é no braço

com a ajuda de amigos.

 

Fiz um pequeno layout, para uma MP aqui mesmo do fórum.

Segue o code

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Desafios de PhotoShop</title><style type="text/css">*{ font-family:Arial Narrow; padding:0; margin:0}table {margin:10px auto}.cont{padding:5px}</style></head><body><table style="border:1px #000000 solid" width="500px">	<tr>		<td><img src="http://img382.imageshack.us/img382/720/bannerpdaeronli9.jpg" /></td>	</tr>	<tr>		<td bgcolor="#dde8ea" class="cont">		<!-- conteudo começa aqui -->		<font size="5">Pessoal:</font><br /><br />			<font size="4"><b>Venham participar dos Desafios de PhotoShop!</b></font><br /><br />						Já estamos no Desafio 101 e temos <b>novas regras</b> que possibilitam maior liberdade ao artista.<br /><br />						<p align="center"><a href='http://forum.imasters.com.br/index.php?showtopic=231215&st=0#entry800291' target="_blank"><img src='http://img393.imageshack.us/img393/3784/regrasdosdesafiosbh2.th.jpg'></a><br /><br />						Além disso, o nosso Ranking, bem como nosso Hall da Fama, está atualizado!<br /><br />						<p align="center"><a href="http://forum.imasters.com.br/index.php?showtopic=190105" target="_blank"><img src='http://img220.imageshack.us/img220/9671/rankingdosdesafiospi9.th.jpg'></a> <a href="http://forum.imasters.com.br/index.php?showforum=139" target="_blank"><img src='http://img413.imageshack.us/img413/9016/halldafamauf5.th.jpg'></a></p><br />												Como todos sabem os Desafios valem <b>prêmios</b>!<br /><br />						<p align="center"><a href='http://forum.imasters.com.br/index.php?showtopic=201254' target="_blank"><img src='http://img413.imageshack.us/img413/1284/premiosfk5.th.jpg'></a></p><br />						Contamos com a presença de todos para engrandecer nosso 101º Desafio<br /><br />									Um grande abraço,<br /><br />						<!-- conteudo termina aqui -->		</td>	</tr>	<tr>		<td align="center"><img src="http://img300.imageshack.us/img300/9991/logotipoimek1.gif"/></td>	</tr></table></body></html>

Minha dúvida é:

As imagens que aparecem, eu quero que elas fiquem em preto e branco e quando o cursor ficar sobre a imagem eu quero que elas fiquem coloridas.

O que eu tenho que fazer!?

 

Obrigado pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo experimente brincar com a propriedade :hover que pode consultar sobre mais info aqui -> Maujor.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

A sugestão do hinom é valida, mas creio que não é a melhor (mal aee hinom vo explicar o porque)

 

Alem de dar um certo trabalho a mais, e dar uma poluida no código, tem o fato de ainda existirem usuários com navegadores que não suportam javascript (são poucos mas tem)...

 

E sem falar que ele da um certo delay para carregar a imagem...

 

Ou seja, se para o mouse em cima da primeira vez e ele fica um bom tempo até poder alterar para a imagem colorida pois nesse caso ele vai esperar até a imagem carregar para ai sim mostrar....

 

 

 

NA MINHA OPINIÃO a melhor coisa é utilizar o chamado CSS Sprites...

 

(Aee Inside... a propaganda agora, haahha)

 

No site do nosso amigo Guilherme John Rambo :) , tem uma video aula sobre isso

http://www.web2ponto0.com.br/video-1-css-sprites/

 

Eu não assisti, mas lembro que uma vez vi uma video aula sobre isso porem o cara ensinava de uma forma errada.

 

(Deh_Cavalieri você só vai entender o que vou falar abaixo depois que ver a video aula)

 

Eles movimentava o background usando px como valores...

 

Melhor forma é utilizar o top e o bottom, alem de ser mais simples por você num precisar ficar calculando o tamanho da metade da imagem, você pode querer alterar a altura da imagem de fundo a qualquer momento, e dessa maneira a mudança fica mais agil

 

=)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deh_Cavalieri    0

Deh_Cavalieri
Postado

valeu gente...to baixando a video aula...desculpem a ignorancia, mas ai vao mais perguntas.a tecnica do :hover tb serve para imagens?eu teria que mudar o style do meu code?!abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Claro que serve ;), agora se forem imagens dinamicas isso é outra coisa, teria que utilizar uma linguagem dinamica.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deh_Cavalieri    0

Deh_Cavalieri
Postado

Olá,Claro que serve ;), agora se forem imagens dinamicas isso é outra coisa, teria que utilizar uma linguagem dinamica.Cumps \o/

http://forum.imasters.com.br/public/style_emoticons/default/upset.gif pelo que eu tenho que trocar o "text-decoration"nao estou conseguindo chegar no resultado desejado!!! :unsure: to me sentindo muito burro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

concordo nick171mas há outra questão tb.há browsers que nao suportam o css corretamente, principalmente css 2.0Para um website com elevados numeros de acessos é bom fazr em 3 versoes,css, javascript e flashexistem scripts que detectam se o browser suporta determinada linguagem e sua respectiva versão.sobre o javascript, eventos como omouseover não são bloqueados. Quando o browser está configurado pra impedir scripts javascript, os tipos de scripts bloqueados são scripts de potencial de risco somente.de qualquer forma, cabe ao desenvolvedor escolher o que é viável.

Compartilhar este post

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

Informação importante

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

  Aceito