Como eu faço para a imagem mudar...

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 07:41 pm

como q eu faço pra imagem do Inicio, Portal, Calendário e etc mudar qdo o mouse passa em cima ? se der pra fazeh isso


Última edição por loberto em 10/11/10, 08:43 pm, editado 1 vez(es)
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 07:47 pm

Tenta esse codigo.
Código:

<a href="pagina.html" onmouseover="document.NOME.src='IMG2.gif'" onmouseout="document.NOME.src='IMG1.gif'"><img src="IMG1.gif" name="NOME" Border="0"></a>
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 07:51 pm

onde eu coloco esse código? eu coloco esse código e oq +? onde é q eu ponho a imagem q vai aparece qdo o mouse passa em cima?
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 07:55 pm

Me mande logo o que você quer colocar no codigo que eu ja decho ele pronto
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 07:56 pm

como assim colocar no código ?
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 07:58 pm

Eu ja faço o codigo, apenas me mande imagem, e as outras coisas

Vou fazer outro codigo basta me dar a url da imagem.
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 08:07 pm

dessa
vai pra
essa
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 08:08 pm

Você pode usar em uma pagina personalizada e pode entrar em painel de controle->modulos->portal & widgets->Gestão dos widgets do fórum-> Criar um widget personalizado

onde tem desça o scroll até achar "fonte do widget" e coloque seu codigo

Olhe na imagem abaixo:

[URL=http://img138.imageshack.us/i/testetc.png/]

Código:
<script language="javascript">
<!--
function aumenta(obj){
    obj.height=obj.height*2;
 obj.width=obj.width*2;
}

function diminui(obj){
 obj.height=obj.height/2;
 obj.width=obj.width/2;
}
//-->
</script>

<center>
<p><img src="URL_DA_IMAGEM" width="258" height="145" alt="muryllodantas.blogspot.com" onmouseover="aumenta(this)" onmouseout="diminui(this)" />
</p></center>
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 08:10 pm

Descupa mas eu achei que foce para aumentar, eu vou pesquisar o codigo.

ok?
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 08:14 pm

Achei tenta esse.

Código:
<a href="URL DA PAGINA"target="_blank" onMouseOver="document.images['myimage'].src='URL DA PRIMEIRA IMAGEM';" onMouseOut="document.images['myimage'].src='URL DA SEGUNDA IMAGEM';"></a>
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 08:18 pm

a url da pagina é o site do meu fórum ou otra coisa ?
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 08:20 pm

num é o portal que você quer
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 08:21 pm

essa é a imagem q vai ta lá no cabeçalho do fórum
onde fica escrito portal
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por muryllodantas em 09/11/10, 08:27 pm

Por favor essa parte é com os atmeiros.

Pessa ajuda a eles, eles iram fazer o botão, é que pra isso tem que fazer uma animação e o codigo não vai funcionar.

Att, Muryllo
avatar

muryllodantas
Usuário destaque

Masculino
Inscrito dia : 31/10/2010
Mensagens : 760
Pontos Ativos : 1013

Ver perfil do usuário http://rendersdesigner.forumeiro.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por Talissa Andr. em 09/11/10, 10:12 pm

Olá loberto,

Primeiramente remova a imagem do painel de controle, somente usará a imagem por meio de códigos CSS! Para remover aceda à:
Painel de controle Seta Visualização Seta Imagens e cores Seta Gestão da Imagens Seta Avançado.
Ai remova a imagem referente ao portal e salve.
Agora aceda á:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilos CSS.
e cole o seguinte codigo e salve.
Código:
#i_icon_mini_portal {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal10.png);
padding: 256px 104px;
}

classe:hover {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal11.png);
padding: 256px 104px;
}
-
Resolve?

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 10:16 pm

n funciono esse código, a imagem apareceu um monte de vezes uma em cima da outra
e oq q é atmeiros ?

respostas vão ser lidas amanhã
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por Talissa Andr. em 09/11/10, 10:25 pm

Desculpe o erro.
Tente agora (apague o primeiro codigo)
Código:
#i_icon_mini_portal {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal10.png);
padding: 80px 120px;
background-repeat: no-repeat;
}

classe:hover {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal11.png);
padding: 80px 120px;
background-repeat: no-repeat;
}

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 09/11/10, 10:27 pm

agr ta do jeito normal, q nem antes, qdo passsa o mouse n acontece nd
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por Talissa Andr. em 09/11/10, 10:33 pm

Encontrei o erro no codigo! Feliz (e espero que seja o ultimo.)
Tente agora (apague o primeiro codigo)
Código:
#i_icon_mini_portal {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal10.png);
padding: 80px 120px;
background-repeat: no-repeat;
}

#i_icon_mini_portal:hover {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal11.png);
padding: 80px 120px;
background-repeat: no-repeat;
}
-
______@EDIT-_____
O correcto é ArtMeiros.
Os ArtMeiros, são pessoas que ajudam os usuários aqui do FdF na questão de Design do Fórum,
para poder fazer um pedido precisa ter no mínimo 30 mensagens, (sendo assim considerado um Membro do Fórum FdF.

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 10/11/10, 12:45 pm

=D =D =D =D =D
funcionoh, vlw talissa andr.
mto obrigado msm
=D
e se eu estou certo, pra muda a imagem só é muda o link nessa parte
Código:
#i_icon_mini_portal {
background-image: url(LINK DA IMAGEM);
padding: 80px 120px;
background-repeat: no-repeat;
}

#i_icon_mini_portal:hover {
background-image: url(LINK DA IMAGEM);
padding: 80px 120px;
background-repeat: no-repeat;
}
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 10/11/10, 12:47 pm

e se eu quiser tb colocar uma imagem disso no inicio, calendario, FAQ e etc, como eu faço, eu só mudo a parte do "#i_icon_mini_portal" e coloca "#i_icon_mini_calendario" ? pq eu qria coloca nos outros tb
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por Talissa Andr. em 10/11/10, 07:04 pm

Olá,
claro você pode fazer em todos.
você terá que fazer um código deste para cada botão,
caso você queira me passe todas as imagens normais e clicadas,
que eu faço todos os codigos para você! Feliz

Talissa Andr.
Usuário destaque

Feminino
Inscrito dia : 28/10/2010
Mensagens : 834
Pontos Ativos : 1130

Ver perfil do usuário

Resolvido Re: Como eu faço para a imagem mudar...

Mensagem por loberto em 10/11/10, 08:42 pm

eu ja cusigui fazeh tds, tds msm
vo coloca aki pra quem quiseh
Fórum :
Spoiler:
Código:
#i_icon_mini_index {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_index:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Portal :
Spoiler:
Código:
#i_icon_mini_portal {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_portal:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

FAQ :
Spoiler:
Código:
#i_icon_mini_faq {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_faq:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Buscar :
Spoiler:
Código:
#i_icon_mini_search {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_search:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Grupos :
Spoiler:
Código:
#i_icon_mini_groups {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_groups:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Registrar :
Spoiler:
Código:
#i_icon_mini_register {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_register:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Login :
Spoiler:
Código:
#i_icon_mini_login {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_login:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Editar Perfil :
Spoiler:
Código:
#i_icon_mini_profile {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_profile:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Mensagens Privadas :
Spoiler:
Código:
#i_icon_mini_message {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_message:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Calendário :
Spoiler:
Código:
#i_icon_mini_calendar {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_calendar:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Sair :
Spoiler:
Código:
#i_icon_mini_logout {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_logout:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

Nova Mensagem Privada :
Spoiler:
Código:
#i_icon_mini_new_message {
background-image: url(LINK DA IMAGEM SEM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_new_message:hover {
background-image: url(LINK DA IMAGEM COM O MOUSE EM CIMA);
padding: 30px 80px;
background-repeat: no-repeat;
}


tomara q sirva pra alguma coisa Muito feliz
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum