Ir para conteúdo

POWERED BY:

Arquivado

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

Annes

[Resolvido] Troca de imagem usando JS

Por , em Javascript

Recommended Posts

Annes    1

Annes
Postado

Olá! A uns dias atrás, eu precisei trocar uma imagem por outra, ao passar o mouse por cima. O William Bruno me ajudou e ficou belezinha! Deu certinho! Mas agora, eu precisava ir além... e não consegui, utilizando o mesmo código.

 

O que eu preciso fazer agora, é trocar a imagem embaixo de um texto, num link. Vou tentar explicar melhor: Ao passar o mouse por cima do link, escrito em caracteres (não pode ser texto-imagem), a imagem que está embaixo do texto muda (sendo que ela faz parte do link, juntamente com o texto). É como se fosse um botão, levando em consideração que o fundo do botão é uma imagem que muda com o hover.

 

Levando em consideração também duas situações:

Numa das páginas, as imagens de fundo serão todas iguais, só muda o texto dos botões.

Nas outras páginas, as imagens de fundo mudam de um botão para o outro, de acordo com o texto. São botões temáticos, que possuem imagens de acordo com o tema, e o texto fica sobreposto na imagem.

 

Com o código abaixo, o texto fica ao lado da imagem, ou abaixo, mas nunca sobreposto.

 

<html>
<head>
    <script type="text/javascript">
	window.onload = function(){
		var normal = '';
	        toggle_src( id('a1') );
    	        toggle_src( id('a2') );
    	        toggle_src( id('a3') );
	        toggle_src( id('a4') );
	        toggle_src( id('a5') );
	}

	function id( el ){
    	        return document.getElementById( el );
	}
	function toggle_src( el ){
	        el.onmouseover = function(){
                  normal = this.src;
                  this.src = this.lowsrc;
    	        }
        	el.onmouseout = function(){
                  this.src = normal;              
	        }
	}
    </script>
</head>

<body>
        <a href="index.html" id="divBot1"> <img src="image/1.png" width="57" height="34" border="none" id="a1" alt="Botão para a Página Inicial" lowsrc="imags/1_hover.png"/> </a>
        <a href="conteudo01.html" id="divBot2"> <img src="image/2.png" width="70" height="34" border="none" id="a2" alt="" lowsrc="../imags/2_hover.png"/> O Mundo da Matemática </a>
        <a href="conteudo02.html" id="divBot3"> <img src="image/3.png" width="276" height="34" border="none" id="a3" alt="" lowsrc="../imags/3_hover.png"/> A Matemática na História </a>
        <a href="conteudo03.html" id="divBot4"> <img src="image/4.png" width="276" height="34" border="none" id="a4" alt="" lowsrc="../imags/4_hover.png"/> Escher e os Caleidociclos </a>

</body>
</html>

Tentei usar o <br> entre a tag img e o texto... tentei colocar o texto antes da tag, tentei com o texto depois da tag, mas nada deu certo... Como devo fazer?

 

Grata, desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Augustoclaro, será que você poderia ser menos suscinto? Tipo... explicar um pouco mais... sabe, sou meio nova nesta área... não saberia fazer apenas pelo que você me explicou!

 

Grata.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

trabalhe com backgrounds

 

aqui tem um exemplo da sintaxe:

http://forum.imasters.com.br/index.php?/topic/400361-alterar-background-de-uma-table/page__view__findpost__p__1586296

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Não sabia que dava pra usar background se a imagem não é uma cor sólida. Mas, no caso do exemplo que você me passou, ele usa tabelas... No caso eu, que não uso tabelas, faço tudo no css, dá certo tbm? Ou tenho que colocar tabelas?

 

você se importaria de colocar um exemplo aqui de como ficaria?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, lógico que dá certo sem tabelas...

 

tenta fazer ^_^/>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Ok... vou tentar então... se eu tiver dúvidas, volto aqui com o código, se eu conseguir fazer de boa... volto aqui pra avisar!

 

Não deu certo! Não consegui fazer, pois o código do exemplo que o William Bruno me passou utiliza um if, e eu não sei qual a parte do código serve pra mim, qual parte não serve, muito menos como fazer a parte do JS... Também não sei o que eu devo deixar do meu código original, e o que eu devo tirar!

 

Por favor, me ajudem!!! Me dêem uma luz... Se não quiserem passar o código pronto por algum motivo, pelo menos me expliquem o que devo fazer, pois realmente não sei!!! Fiquei ontem desde aquela hora até hoje, tentando entender o código do outro pra ver se eu conseguia mudar, mas não consegui! Nem saí do lugar... não cheguei a escrever nada, pq quando fui mexer no código, não entendia da onde vinha aquele "A" e aquele "M". Depois fui entender que era alguma coisa relacionada a algum botão que o cara clica.

 

Já disse uma vez antes, mas vou repetir: sou bem crua neste assunto, e só estou trabalhando com isso por que me está sendo imposto pela minha chefia! Sou professora de artes, pensa na minha dificuldade!!! Entende? Não tenho o mesmo tipo de raciocínio de quem está acostumado com esse tipo de coisa... Em compensação, me pergunte alguma coisa sobre a história da arte, ou sobre técnicas de pintura e desenho, que eu sou fera!

 

Por favor... please!!! Me ajudem!!! E perdoem minha ignorância! Sei que devo aprender, mas é muito difícil, ainda mais sob pressão, como é o caso agora... Por isso eu disse: se não quiserem passar o código pronto, eu até entendo... mas pelo menos me expliquem o que eu devo fazer... LEMBRANDO que eu sou quase analfabeta (rsrs) nisso... expliquem de uma forma facil de entender!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Merencia    0

Lucas Merencia
Postado

olá, bom não entedi certo o que você quer... pq assim normalmente por padrao, os botoes (os que vao estar em todas as paginas) deve se manter IGUAIS e no mensmo lugar em todas as paginas...

 

mas em todo caso...

eu usaria somente css

<html>
<head>
	<title>Untitled Document</title>
	<link rel="stylesheet" type="text/css" href="estilo.css"/><!--link para seu css-->
</head>

<body>
        <a href="index.html" id="bot1">Home</a><!--no seu caso pelo que intendi aki é só uma imagem no link a troca de imagens vai funcionar do mesmo jeito...-->
        <a href="conteudo01.html" id="bot2">O Mundo da Matemática </a><!--se o botao é diferente-->
        <a href="conteudo02.html" id="bot1">A Matemática na História </a><!--senao-->
        <a href="conteudo03.html" id="bot1">Escher e os Caleidociclos </a>

</body>
</html>

agora o estilo.css que usei no exemplo... mas so inclua no seu css

#bot1{
	background-image:url(image/1.jpg); /*mude para sua imagem e faça um para cada link...
	 se as imagens forem deferentees*/
	display:block; 
	height:30px;/*defina a altura EXATA da imagem*/
	width:200px;/*e a largura tmb*/
	float:left;
}
#bot1:hover{/*no hover muda a imagem*/
	background-image:url(image/a1.jpg); /*imagem para qual deve mudar*/
}
#bot2{
	background-image:url(image/1.jpg); /*mude para sua imagem e faça um para cada link...
	 se as imagens forem deferentees*/
	display:block; 
	height:30px;/*defina a altura EXATA da imagem*/
	width:300px;/*e a largura tmb*/
	float:left;
}
#bot2:hover{
	background-image:url(image/a1.jpg); /*imagem para qual deve mudar*/
}

beleza? se n era isso aviza...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annes    1

Annes
Postado

Legal, Lucas, dá certo sim!!! E é até mais simples, pois não usa código.

 

É que o projeto utiliza imagens temáticas, de acordo com o botão, entende? Eu ia inserir uma imagem aqui, pra você ver, mas o botão "Inserir Imagem" do fórum não está habilitado para mim... Na verdade, nenhum botão da edição do texto está habilitado... Os ícones aparecem, mas não linkam com nada...

Mas valeu pela ajuda...

 

Se eu tiver mais dúvidas, apareço de novo!

Obrigada!

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