asked on

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

David H.H.Lee

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>

hielo

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

Pedro Chagas

ASKER

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?

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

David H.H.Lee

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.