jaikiran Posted June 30, 2006 Share Posted June 30, 2006 Hi, I am new to javascript and just tried out a few examples provided on w3 schools javascript section. One of them was the Button Animationexample. I did a slight modification to this example. Here's what i am trying to achieve:- onMouseOver of the anchor tag, i am replacing the image with a string(using innerHTML of the anchor tag). While doing this, i maintain the image object in a global variable - onMouseOut of the anchor tag, i am trying to restore back the image by using the contents of the global variable.I am able to do the replace the image with the string in onMouseOver, however onMouseOut, i am not able to restore it back.Here's the code: <html><head><script type="text/javascript">var myvfunction mouseOver(){myv=document.getElementById("mya").innerHTML//alert("Before replacing innerHTML is: " + myv)document.getElementById("mya").innerHTML="Hi"//alert("After replacing, obj is: " + myv)}function mouseOut(){//alert("Before assigning in moveout, obj is: " + myv)document.getElementById("mya").innerHTML=myv}</script></head><body><a id="mya" href="http://www.w3schools.com" target="_blank"onmouseover="mouseOver()"onmouseout="mouseOut()"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" name="b1" width="26" height="26" /></a></body></html> I have commented out the alerts. Please uncomment them if required. Whats baffling me is that at the end of the mouseOver() method, i print the contents of the global variabl 'myv' which correctly points to the image object. But, on entering the mouseOut() method, when i print the contents of the same, the contents have surprising changed to the string 'hi'.Any idea, whats wrong here? Link to comment Share on other sites More sharing options...
scott100 Posted June 30, 2006 Share Posted June 30, 2006 By writing an innerHTML on the anchor tag you destroy the rest of it's contents - the image - so it no longer exists. To make it appear again you would have to put it back using innerHTML on the mouseout function mouseOut(){ document.getElementById("mya").innerHTML="<img src=\"b_pink.gif\" />";} Link to comment Share on other sites More sharing options...
jaikiran Posted June 30, 2006 Author Share Posted June 30, 2006 Thank you, scott100. Got your point. I have few question though:1) In the mouseOut() function, the implement that you suggest, would require the mouseOut() method to have a knowledge about which object is enclosed in the anchor tag(in this case the img object). What if i want to make the mouseOut() method generic i.e. irrespective of which object is enclosed in the anchor tag, i would like to swap it will the string 'hi' and the originally enclosed object, on every mouseout and mouseover event. Is this possible? The reason for maintaining the global variable 'myv' was to achieve this purpose.2) For a moment, lets forget about my question#1 above. One more thing that surprised me in the javascript code that i posted as part of my first post in this topic, is that if you uncomment the alert and watch the value of 'myv' variable, it is pointing to the img object just before *leaving* the mouseover() method. But, when *entering* the mouseout() method, the value of the same variable changes to 'hi'. How does this value get changed between these calls? Link to comment Share on other sites More sharing options...
scott100 Posted June 30, 2006 Share Posted June 30, 2006 1)The reason for maintaining the global variable 'myv' was to achieve this purpose.Your global variable wasn't being recognised, i tend to use a function onload to set globals (minus the var).<html><head><script type="text/javascript">function go(){myv=document.getElementById("mya").innerHTML;}function mouseOver(){document.getElementById("mya").innerHTML="Hi";}function mouseOut(){document.getElementById("mya").innerHTML=myv;}</script></head><body onload="go()"><a id="mya" href="http://www.w3schools.com" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" width="26" height="26" /></a></body></html> Link to comment Share on other sites More sharing options...
jaikiran Posted June 30, 2006 Author Share Posted June 30, 2006 Your global variable wasn't being recognised, i tend to use a function onload to set globals (minus the var).Fantastic, that works great. Thanks a lot, scott100 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now