• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 358
  • Last Modified:

onmouseout event - ajax

I have a system that show some informations when mouse over the button (the information come from txt files). By default (if mouse not over) the text appear is "conteudos para a internet", but if mouse over the button, the default text desappear and the <div> show the text corresponding of each button.
The problem is when mouse out, because not desappear the information of last button over. I want when the mouse out, appear again the default text.
I thing is possible, but I don't know how.
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->
 
AJAX CODE
<script language = "javascript">
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID); 
          XMLHttpRequestObject.open("GET", dataSource); 
 
          XMLHttpRequestObject.onreadystatechange = function() 
          { 
            if (XMLHttpRequestObject.readyState == 4 && 
              XMLHttpRequestObject.status == 200) { 
                obj.innerHTML = XMLHttpRequestObject.responseText; 
            } 
          } 
 
          XMLHttpRequestObject.send(null); 
        }
      }
</script>

Open in new window

0
Pedro Chagas
Asked:
Pedro Chagas
  • 2
  • 2
1 Solution
 
David H.H.LeeCommented:
Hi joaochagas,
You can use OnMouseOut event to reset the setting to original display text for each assigned control.
eg:
<div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')" onmouseout="resetData('conteudos para a internet','targetDiv');"/></a></div>

<script>
function resetData(strOgirinalText, strControl){
  document.getElementById(strControl).innerHTML=strOgirinalText;
}
</script>
 
0
 
hieloCommented:
from what you posted originally, try this (without changing your html markup):
<script language = "javascript">
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
 
		//make sure that you have a valid obj reference
		if(!obj)
			alert("Specified divID may not exist. Check again");
		else
		{
			if(typeof(obj.onmouseout)=="undefined")
			{
				var temp=obj.innerHTML;
				obj.onmouseout=function(){obj.innerHTML=temp;};
			}
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) { 
          	      obj.innerHTML = XMLHttpRequestObject.responseText; 
          	  } 
          	} 
 		
          	XMLHttpRequestObject.send(null); 
		}
        }
      }
</script>

Open in new window

0
 
Pedro ChagasWebmasterAuthor Commented:
where I put this code:
<script>
function resetData(strOgirinalText, strControl){
  document.getElementById(strControl).innerHTML=strOgirinalText;
}
</script>

I have to erase ajax code and replace with the new code?
0
 
hieloCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="http://pre.gloradin.com/websites.php"/>
 <script language = "javascript">
var websitesData={};
var pages='websites.txt,logotipos.txt,hosting.txt,marketing.txt,ferramentas.txt,consulting.txt';
window.onload=function(){
	pages = pages.split(",");
	getData( pages.pop() );
};
 
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID,evtSource) 
      { 
  		var key = dataSource.replace('.txt','');//remove the file extension
  		if(typeof(websitesData[key]) != "undefined" )
  		{
			var obj=document.getElementById(divID);
			if( !obj)
			{
				alert("Specified divID may not exist. Check again");
				return;
			}
			var temp=obj.innerHTML;
			evtSource.onmouseout=function(){document.getElementById(divID).innerHTML=temp;};
   			obj.innerHTML = websitesData[key];
  		return;
  		}
 
        if(XMLHttpRequestObject) 
	   {
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) {
          	      websitesData[ key ] = XMLHttpRequestObject.responseText; 
				 if( pages.length)
				 	getData( pages.pop() );
          	  } 
          	} 
          	XMLHttpRequestObject.send(null); 
        }
      }
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gloradin websites</title>
<style type="text/css" media="screen">
@import "/estilo/index.css";
</style>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style> 
</head>
 
<body>
 
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv',this)"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv',this)"/></a></div>
 
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv',this)"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv',this)"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv',this)"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv',this)"/></a></div>
</div><!--cx_botoes_sup--><div id="web_ceu_fundo"><img src="imagem/ceu.png" /></div>
<div id="texto_web_1"><a>A gloradin.com tem como principal actividade a criação de websites. Acreditamos em valores dignificantes, porque pensamos que a criação de um website é um acto sério e tem de ser visto com responsabilidade e bom senso.<br />
Apostamos essencialmente na qualidade, somos especialistas nesta área, trabalhamos com a mais alta tecnologia existente para a concepção de Páginas de Internet.<br />
Peça-nos um conselho ou apresente-nos o seu projecto, teremos todo o prazer em analisar e orçamentar. A imaginação é o limite. <strong>Veja já a seguir nesta página a nossa gama de websites.</strong></a></div><!--texto_web_1-->
<div id="web_locomotiva"><img src="imagem/locomotiva.png" /></div>
 
<div id="iniciar_locomotiva"><img src="imagem/iniciar_locomotiva.png" /></div>
<div id="texto_web_2"><a>O teu projecto está no teu pensamento, e para o tornar realidade podes contar com a nossa ajuda.<br />
Acima de tudo pensa e idealiza todos os passos do teu próximo site, na gloradin.com o limite é a nossa e a tua imaginação, por isso inventa e inova. Caso não tenhas idealizado o teu próximo site, mas já sabes aquilo que queres, nós ajudamos a criar e a inovar de tal forma, que o teu projecto se tornará no melhor site do mundo.<br />
As nossas produções acompanham e estão actualizadas com a Internet de hoje, e com um passo na Internet de amanhã.<br />
Diz-nos o que pretendes no mundo virtual, e encomenda já o teu site. A locomotiva arranca e já não pára, e quanto mais cedo apanhares este comboio melhor para ti e para o teu negócio.
</a></div><!--texto_web_2-->
<div id="web_ceu_fundo2"><img src="imagem/ceu.png" /></div>
<div id="web_simbolo_1"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_locomotiva_1"><a>criação sem limites</a></div><!--web_locomotiva_1-->
<div id="web_simbolo_2"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_locomotiva_2"><a>optimização para motores de busca</a></div><!--web_locomotiva_2-->
<div id="web_simbolo_3"><img src="imagem/websites_simbolo.png" /></div>
 
<div id="web_locomotiva_3"><a>painel de controlo</a></div><!--web_locomotiva_3-->
<div id="web_simbolo_4"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_locomotiva_4"><a>dominio gratis no primeiro ano</a></div><!--web_locomotiva_4-->
<div id="web_simbolo_5"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_locomotiva_5"><a>html, php, javascript, css, ajax, imagemagick e flash</a></div><!--web_locomotiva_5-->
<div id="web_glo_empresas"><img src="imagem/glo.jpg" /></div>
<div id="iniciar_empresas"><img src="imagem/iniciar_empresas.png" /></div>
<div id="web_ceu_fundo3"><img src="imagem/ceu.png" /></div>
<div id="texto_web_3"><a>A gloradin.com disponibiliza para a tua empresa websites a preços bastante económicos. Se pretendes que a tua empresa tenha presença na Internet a preços acessíveis, oferecemos o produto glo-empresas.<br />
Este produto tem como principal objectivo aumentar a visibilidade da tua empresa, dando-se a conhecer no espaço virtual ou no mundo global.<br />
Este site vem equipado com cinco páginas, home (pagina principal), empresa, produtos ou serviços, contactos e localização. Estas páginas são suficientes para que a tua empresa entre na Internet de uma forma completa.<br />
 
Com o nosso acompanhamento o teu site irá ficar excelentemente posicionado nos motores de busca. Este pacote vem equipado com optimização para motores de busca. Dessa forma pouco tem a preocupar-se em fazer publicidade exterior ao site, ganhando dessa forma tempo e dinheiro.<br />
O site vem equipado com painel de controlo, onde a partir do qual pode controlar toda a parte textual de todas as paginas existentes no projecto.<br /><br /><br />
Página <strong>Home</strong>  Trata-se da página principal do teu site. Podes escolher as imagens e texto a colocar, inclusive a sua disposição na página, pois o projecto tem design personalizado e livre. A partir desta página tens acesso a todas a zonas do site, e também caso seja necessário links externos (ligações externas).
Esta página é a porta de entrada do site, e contém informação relevante da tua empresa.<br /><br /><br />
Página <strong>Empresa</strong>  Esta página é constituída por varias imagens da empresa ou do teu negócio, e texto sobre a empresa ou negócio. No fundo trata-se de uma apresentação onde se expõe os factores mais fortes do teu negócio, além de poder focar o passado, o presente e o futuro da tua empresa ou negocio.<br /><br /><br />
Página <strong>Produtos</strong> ou <strong>Serviços</strong>  Estas páginas podem ser escolhidas em simultâneo, ou pode optar por uma apenas, esta escolha tem a ver com a natureza da tua empresa ou negócio.
Como os nomes indicam, estas servem para mostrar os teus produtos ou serviços, como se de uma montra se tratasse (o preço pode variar consoante os produtos ou serviços a mostrar).
Para ambos é disponibilizado o título do produto ou serviço, e texto para especificações. Pode e deve conter imagens para cada produto ou serviço.
Pode também conter texto generalista a explicar os tipos de produtos ou serviços apresentados.<br /><br /><br />
 
Página <strong>Contactos</strong>  Tal e qual como o nome indica, esta página mostra todos os seus contactos, desde os telefones ao e-mail. Tudo o que tenha a ver com a informação sobre a forma como os seus potenciais clientes o podem contactar, pode ser mostrado nesta página.
Além da informação que é disposta nesta página, esta contém um formulário onde o visitante pode contactar directamente a empresa sem ter que sair do site. Essa informação é processada e enviada directamente para o e-mail da empresa. Os campos do formulário podem ser escolhidos por si, pois cada negócio necessita de informação variada.<br /><br /><br />
Página <strong>Localização</strong>  Caso exista fora do espaço virtual, uma sede, loja, escritório ou outro local que possa ser designado como a localização da tua empresa, esta página será activada, e conterá mapa (google maps), morada e coordenadas GPS.
</a></div><!--texto_web_3-->
<div id="web_simbolo_6"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_empresas_1"><a>preço especial de 650¬</a></div>
<div id="web_simbolo_7"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_empresas_2"><a>optimização para motores de busca</a></div>
<div id="web_simbolo_8"><img src="imagem/websites_simbolo.png" /></div>
 
<div id="web_empresas_3"><a>painel de controlo</a></div>
<div id="web_simbolo_9"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_empresas_4"><a>dominio e alojamento gratis no primeiro ano</a></div>
<div id="web_simbolo_10"><img src="imagem/websites_simbolo.png" /></div>
<div id="web_empresas_5"><a>html, php, javascript, css e imagemagick</a></div>
</div><!--geral-->
</body>
</html>

Open in new window

0
 
David H.H.LeeCommented:
Hi joaochagas,
>>..I have to erase ajax code and replace with the new code?
- You can continue use your existing solution without any amendment. However, you need to add "onmouseout" event(see my previous post) if you want to reset the text to original descriptions as used. You can find out more regarding how to use onmouseout event at one of the useful article before:
http://www.w3schools.com/jsref/jsref_onmouseout.asp

However, you also can use hielo's proposed if you want to attach onmouseout event dynamically to solve your problem.  There are a lot of ways to solve the problem using onmouseout event. Both solution is pointing the directions how to solve your problem in different way.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now