[Resolvido] mudar de cor / figura ao passar o mouse

[marvi 0]

Olá pessoal,

 

Nas minhas tentativas obtive um script que muda a figura do botão quando passa o mouse em cima... agora como faço para manter a figura mudada ao clicar?

 

Tenho esse código que muda de figura:

 

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="img/apresentacao.jpg"
}
function mouseOut()
{
document.b1.src ="img/apresentação_vm.jpg"
}
</script>

link

<a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver()"
onMouseOut="mouseOut()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a>

Ele muda a figura mas não fixa com a figura mudada ao clicar... o que devo fazer aí?

 

Obrigado!

[William Bruno 1501]

já tentou fazer a mesma coisa, mas no evento:

onClick?

[marvi 0]

Não resolve... quando clica ele muda a figura mas volta a figura original...

 

Pois ao passar o mouse ele muda a cor e ao tirar o mouse ele volta a cor ou a figura original...Mas, ao clicar deveria mudar a cor ou figura novamente e fixar essa...

[William Bruno 1501]

Cria uma variável global para guardar o estado do click.

<script type="text/javascript">
var click = 0;
function mouseOver() {
	document.b1.src ="excluir.gif"
}
function mouseClick() {
	document.b1.src ="pt.jpg"
	click = 1;
}
function mouseOut() {
	if(click==0)
		document.b1.src ="alterar.gif"
}

</script>
<a href="java script:selTab('tabEndereco')" onMouseOver="mouseOver()" onMouseOut="mouseOut()" onClick="mouseClick()">
	<img border="0" src="alterar.gif" name="b1"></a>

Seria mais fácil fazer isso com CSS não?

Controlaria o hover pelo css, e o click pelo JS..

[marvi 0]

Ótimo, resolvido!

 

Obrigado mesmo!

[marvi 0]

Surgiu outra questão que não vi na hora...

 

Veja o exemplo:

Correto, cliquei e ficou vermelho:

 

Agora incorreto por dois motivos: primeiro porque o que já estava em vermelho "apresentação" deveria voltar a ficar azul, segundo porque o botão "imagens" ficou vermelho sem eu clicar, só porque passei o mouse nele para ver se ele muda a cor e volta... sendo assim mudou, mas não voltou a cor original que é a figura azul...

 

 

E agora?

 

<script type="text/javascript">
var click = 0;
function mouseOver() {
	document.b1.src ="img/apresentacao.jpg"
}
function mouseClick() {
	document.b1.src ="img/apresentacao.jpg"
	click = 1;
}
function mouseOut() {
	if(click==0)
		document.b1.src ="img/apresentação_vm.jpg"
}

</script>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1">
  <tr>
	<td id="colEndereco" width="14%" height="1" >
	
	
<a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver()"
onMouseOut="mouseOut()" onClick="mouseClick()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a></td>

	<td width="14%" height="1">
	
	
   <a href="java script:selTab('tabEndereco')"  onMouseOver="mouseOver1()"
onMouseOut="mouseOut1()" onClick="mouseClick1()"> <img border="0" src="img/imagens.jpg" name="b2"></a>
	
	
	
	</td>
	
	<td width="14%" height="1"><img border="0" src="img/plantas.jpg"></td>
	
	<td width="14%" height="1"><img border="0" src="img/ilustracoes.jpg"></td>
	
	<td width="14%" height="1"><img border="0" src="img/videos.jpg"></td>
	
	<td width="15%" height="1"><img border="0" src="img/localizacao.jpg"></td>
	
	<td width="15%" height="1"><img border="0" src="img/precos.jpg"></td>
	
  </tr>
</table>

[marvi 0]

Pessoal, estava tendando essa condição

 

if(imagens2[numero]=="img/apresentacao.jpg"){
   for (i=0;i<clique.length;i++) {
			// Zera o array para salvar o novo valor que foi clicado
			clique[i] = false
		 }   
}

Mas não está ok... o que deve ser? Quero que ao clicar um botão 1, por exemplo, o 1 fique vermelho, se eu clicar o botão 2 o botão 2 fica vermelho e o 1 volta ficar azul...

 

Se quiser, segue todo o codigo que ainda não está bom:

<script type="text/javascript">
var clique = new Array(false, false, false, false, false, false, false)

var imagens = new Array("img/apresentacao_vm.jpg", "img/imagens.jpg", "img/plantas.jpg",
"img/ilustracoes.jpg", "img/videos.jpg", "img/imagens_vm.jpg", "apresentacao7.jpg")

var imagens2 = new Array("img/apresentacao.jpg", "img/imagens_vm.jpg", "img/plantas_az.jpg", "img/ilustracoes_az.jpg",
"img/videos_az.jpg", "6.jpg", "7.jpg")

function mouseOver(id) {
		numero = eval(id.replace("imagem", "")-1)
		x = document.getElementById(id)
		x.src = imagens2[numero]
}

function mouseClick(id) {
		numero = eval(id.replace("imagem", "")-1)
		x = document.getElementById(id)
		//Muda a imagem para a que foi definida no array "imagem2"
		x.src = imagens2[numero]
		//Muda o valor do array "clique" para verdadeiro
		clique[numero] = true
		
   
if(imagens2[numero]=="img/apresentacao.jpg"){
   for (i=0;i<clique.length;i++) {
			// Zera o array para salvar o novo valor que foi clicado
			clique[i] = false
		 }   
}
  
 
}
function mouseOut(id) 

{
		
		numero = eval(id.replace("imagem", "")-1)
		if (clique[numero]==false) {
			x = document.getElementById(id)
			//Muda a imagem para a definida no array "imagens"
			x.src = imagens[numero]
		}
		  
}

</script>


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1">
  <tr>
	<td  width="14%" height="1" >
	
	
<a href="java script:selTab('tab')"   onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')">
				<img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"></a></td>

[marvi 0]

Para ver o problema na prática vejam esse link: http://www.ideiabiz.com/s.htm e veja o codigo fonte

[William Bruno 1501]

Dei uma mudada na lógica da coisa..

http://www.cenasordidas.hbe.com.br/exemplos/abas/abas.html

 

Deixa o hover e o normal pro CSS resolver... e apenas o click pro Javascript.

[marvi 0]

beleza, já resolvido! Obrigado!