mudar imagem após click

yuryrodrigues · Fevereiro 28, 2010

Bom dia pessoal do forum.

Estou com um problema e não consigo resolver.

Criei um menu de links com imagens no topo da minha pagina. Que quando passar o mouse muda de imagem e quando clica permanesse.Mas não funciona.Só conseguir fazer com que mude ao passar o mouse mas não permanecer.

Já tentei de varias formas e não consigo resouver se alguem puder me ajudar agradesso.

Ai vai o codigo

<html>
<head>
<title>Documento sem título</title>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" >
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="40" colspan="2" >
	<table width="50%" height="100%" border="0" cellpadding="0" cellspacing="0" >
        <tr id="menu" bgcolor="#dfdfdf" > 
		  <td >
		  <y>
		 <a href="#" id="link1" onmouseover="document.NOME1.src='cantos/matriculese3.png'" 
		 onmouseout="document.NOME1.src='matriculese.gif'" >
		 <img src="matriculese.gif" name="NOME1" Border="0" >
		 </a>
		 </y>
		  </td>
          <td >
		<y>
		 <a href="#" id="link2" onmouseover="document.NOME2.src='cantos/matriculese3.png'" 
		 onmouseout="document.NOME2.src='matriculese.gif'" >
		 <img src="matriculese.gif" name="NOME2" Border="0" >
		 </a>
		 </y>
		  </td>
          <td >
		<y>
		 <a href="#" id="link3" onmouseover="document.NOME3.src='cantos/matriculese3.png'" 
		 onmouseout="document.NOME3.src='matriculese.gif'" >
		 <img src="matriculese.gif" name="NOME3" Border="0" >
		</a>
		 </y>
		 </td>
          <td>
		  
		  <y>
		 <a href="#" id="link4"  onmouseover="document.NOME4.src='cantos/matriculese3.png'" 
		 onmouseout="document.NOME4.src='matriculese.gif'" >
		 <img src="matriculese.gif" name="NOME4" Border="0" >
		</a>
		 </y></td>
          <td >
		  
		 <y>
		 <a href="#" id="link2"  onmouseover="document.NOME5.src='cantos/matriculese3.png'" 
		 onmouseout="document.NOME5.src='matriculese.gif'" >
		 <img src="matriculese.gif" name="NOME5" Border="0" >
		 </a>
		 </y></td>
        </tr>
      </table>
	  
    </td>
  </tr>
  </table>
</body>
</html>

Quando carrega a pagina aparece assim:

Depois que passa o mouse fica assim:

Mas após click não permanece.

Se algum fera em javascript poder me ajudar agradessso. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

yuryrodrigues

William Bruno · Fevereiro 28, 2010

Melhor usar CSS puro, ou alguma linguagem dinamica como php... com JS daria muito mais trabalho

veja essas soluções: para 'link atual'

http://forum.imasters.com.br/index.php?app=core&module=search&do=quick_search&search_filter_app[forums]=1

http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1341165

Thiago Retondar · Fevereiro 28, 2010

<y>
                 <a href="#" id="link1" onmouseover="document.NOME1.src='cantos/matriculese3.png'" 
                 onmouseout="document.NOME1.src='matriculese.gif'" >
                 <img src="matriculese.gif" name="NOME1" Border="0" >
                 </a>
                 </y>

Que tag é essa? <y>? Estou tão desatualizado assim... :blink:

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

yuryrodrigues · Fevereiro 28, 2010

<y>
                 <a href="#" id="link1" onmouseover="document.NOME1.src='cantos/matriculese3.png'" 
                 onmouseout="document.NOME1.src='matriculese.gif'" >
                 <img src="matriculese.gif" name="NOME1" Border="0" >
                 </a>
                 </y>
Que tag é essa? <y>? Estou tão desatualizado assim... :blink:

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Desculpe, esta tag estava fazendo parte de um css , e acabei esquecendo de tirar ela

depois que deletei a folha de estilo. Desculpe por não ter tirado ela.

William Bruno o link que você me passou não era o que eu estava procurando.Mesmo assim agradeço por ter respondido

Acabei de conseguir criar um código que chega perto do que eu preciso mas esta dando problema. O codigo é esse:

<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript"> 
function clicou(objeto){
 
		for(i = 1; i <= 5; i++){
			var elemento = document.getElementById('link'+i);
			var elementoHover = document.getElementById('hoverLink'+i);
			elemento.className = 'normal';
			elementoHover.style.display = 'none';
		}
		
	document.getElementById(objeto).className = 'hover';
	document.getElementById(objeto).childNodes[2].style.display = 'block';	
}
 
</script> 
<style type="text/css"> 


#menu y a {
	display: block;
	position: relative;
	padding-bottom: 0px;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 0px;
	color: #fff;
	text-decoration: none;
	line-height: 20px;
	height: 40px;
	text-align: center;
   
	background-image: url("tutunormal.png");
}


#menu y a.normal {
	background-image: url("tutunormal.png");
}

#menu y a.hover {
	background-image: url("mousehover.png");
}

#menu y a:hover {
	background-image: url("mousehover.png");
}
 
/* estilo das bordas redondas, normal e hover */
#menu y a:hover img.normalCanto {
	display: none;
}

#menu y a:hover img.hoverCanto {
	display: block;
}
 
#menu y img.normalCanto,
#menu y img.hoverCanto {
	position: absolute;
	right: -2px;
	top:0px;
}

#menu y img.hoverCanto {
	display: none;
	z-index: 10;
}
 
/* definindo largura de cada item */
#menu y a#link1 {	width: 62px;	}
#menu y a#link2 {	width: 62px;	}
#menu y a#link3 {	width: 67px;	}
#menu y a#link4 {	width: 78px;	}
#menu y a#link5 {	width: 67px;	}


</style> 

</head>

<body leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" onload="tam()" >
<table width="80%" border="0" cellpadding="0" cellspacing="0">
  
  <tr id="menu" > 
			      		 
		  <td width="10%" ><br /></td>
		  <td width="11%" >
		 
		 <y> 
		<a href="#" id="link1" onclick="clicou('link1')" >Home
			<img src="cantos/lateral.png" class="normalCanto" /><img src="cantos/lateral3.png" id="hoverLink1" class="hoverCanto" /></a>
		  </y>
		
		  </td>
		  <div id="seila">
          <td width="11%" >
		  <y>
		<a href="#" id="link2" onclick="clicou('link2')">Plantas
			<img src="cantos/lateral.png" class="normalCanto" /><img src="cantos/lateral3.png" id="hoverLink2" class="hoverCanto" /></a>
	        </a>
			</div>

		  
		 </y>
		  </td>
          <td width="11%">
		  <y>
		<a href="#" id="link3" onclick="clicou('link3')">Matricule-se
			<img src="cantos/lateral.png" class="normalCanto" /><img src="cantos/lateral3.png" id="hoverLink3" class="hoverCanto" /></a>
		  
		 </y>
		  </td>
          <td width="11%" >
		  <y>
		<a href="#" id="link4" onclick="clicou('link4')">Primeira vez no site
			<img src="cantos/lateral.png" class="normalCanto" /><img src="cantos/lateral3.png" id="hoverLink4" class="hoverCanto" /></a>
		  
		 </y>
		  </td>
          <td width="28%" >
		  <y>
		<a href="#" id="link5" onclick="clicou('link5')">Cursos disponiveis
			<img src="cantos/lateral.png" class="normalCanto" /><img src="cantos/lateral3.png" id="hoverLink5" class="hoverCanto" /></a>
		  
		 </y>
		 </td>
        </tr>
      </table>
</body>
</html>

Quando clica muda a imagem.

Quando carrega a pagina:

Quando passa o mouse:

Quando clica:

O problema é que depois que a pessoa clica, e passa o mouse por cima de outro botão a imagem fica cortada no canto direito:

Se alguém poder me ajudar agradesso.

yuryrodrigues

Entrar

Arquivado

mudar imagem após click

Recommended Posts

yuryrodrigues 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

yuryrodrigues 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante