Ir para conteúdo

POWERED BY:

Arquivado

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

wilsoncrescencio

[Resolvido] Texto aparece quando o mause está em cima

Recommended Posts

Bom dia...

No site que estou desenvolendo eu gostaria que ao passar o mouse em qualquer botão, link ou imagem aparecesse uma pequena descrição em formato de caixa de texto ou balão de fala (como o de hitória em quadrinhos) informando o cliente para onde ele irá ao clicar no botão ou selecionar a imagem ou link.

Tem como fazer isso no DW?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caro wilson,

Tem como sim,é feito usando css e JS.

 

Exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
	<!--
		.classe1 { color: #0000ff;
		border:1px solid #000000;
		}
		.classe2 { display: none; }
	-->
</style>
<script>	
	function mudaVisibilidade(res)
	 {
			 class = document.getElementById(res);
		 if(class.className == 'classe1') { class.className = 'classe2'; } else { class.className = 'classe1'; }
	 }
</script>
</head>
<body>
	<span id="res" class='classe2'>Visivel!</span>
	<br /><input type="button" value="enviar" onMouseOver="java script:mudaVisibilidade('res');" onMouseOut="java script:mudaVisibilidade('res');">
</body>
</html>

Acho mais interessante usar apenas o onMouseOver,mas coloquei os 2 para que testasse e entendesse a funcionalidade.

 

Ps:se quiser algo mais sofisticado,buscar sobre alguma js framework (recomendo jQuery).

Espero que tenha entendido!

Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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