petersrin Posted March 6, 2006 Share Posted March 6, 2006 Here is my background: self taught through dreamweaver, internet, and forced experience. Not very advanced, and I run into simple syntax problems that are assumed to be known by all tutorials. I do have a good bit of experience with programming and logic in general and am a quick study, because I do my research. Here is my code: <html><head><script type="text/javascript">function mouseOver(){test.style ="visibility:hidden"}function mouseOut(){test.style ="visibility:visible"}</script></head><body><a name="test" target="_blank" id="test" style="visibility:visible" onMouseOver="mouseOver()" onMouseOut="mouseOut()">Peter S.</a></body></html> Should be simple, put a mouse over text: Peter S. and the text goes away, move off and it appears. The ONLY reason for this page is to learn to call functions, yet it won't be called. I tried changing the action to a popup box, and other actions, but to no avail. Interestingly, I coppied the example code for a onMouseOver function directly from w3schools.com. Any help, obviously, would be appreciated.BTW:var PieCutter = "Syntax Understanding"IF Peter Contains PieCutter THEN "output the right stuff!"ELSE"Do what always happens to Peter anyway, throw up an error!"(Just a bit of sillyness.) Link to comment Share on other sites More sharing options...
Skemcin Posted March 6, 2006 Share Posted March 6, 2006 Well, the function is being called. One way to check this is to simply put an alert statement in there like this: <html><head><script type="text/javascript">function MouseOver(){test.visibility="hidden";// alert('MouseOver');}function MouseOut(){test.style.visibility="visible";// alert('MouseOut');}</script></head><body><div id="test" onmouseover="MouseOver()" onmouseout="MouseOut()"><a name="test" target="_blank">Peter S.</a></div></body></html> Of course, mine is commented out. But if you un comment that code and run it, you will get both alert statements.I took the mouse over/out commands out in to the div in an effort to see if the browser was just not able to appy this function to an anchor - just like you can't assign an anchor text a certain width - so maybe it cannot be turned on and off like a <div> can.But this seems to have fail since this code too doen't do what I think you want it to do Link to comment Share on other sites More sharing options...
scott100 Posted March 6, 2006 Share Posted March 6, 2006 Your idea was ok skemcin, just some minors, the id for the p and div need to be different, not both test, and you forgot to add a .style to the mouseover functionit works ok now <html><head><script type="text/javascript">function MouseOver(){test.style.visibility="hidden";// alert('MouseOver');}function MouseOut(){test.style.visibility="visible";// alert('MouseOut');}</script></head><body><div id="test" onmouseover="MouseOver()" onmouseout="MouseOut()"><a id="para" target="_blank">Peter S.</a></div></body></html> Link to comment Share on other sites More sharing options...
petersrin Posted March 7, 2006 Author Share Posted March 7, 2006 Ah! My problem was very much so in the function itself. Interestingly, if "document." is included in the visibility change, the thing stops working again. Also, a small problem occuring on Firefox and IE: as I move my mouse across the word, it flashes on and off. This is probably because every time the mouse moves it re-evaluates whether the mouse is over or out. Thanks for the help, everyone. Link to comment Share on other sites More sharing options...
scott100 Posted March 7, 2006 Share Posted March 7, 2006 The problem wasn't with your function, it was because you were trying to change the visibility of the a tag with onmouseover which i don't think it supports through a function called from itself, if you wrapped the a tag in a div it works ok.To stop the flashing you could try something different like this (which includes the use of document.)<html><head><script type="text/javascript">function MouseOver(){document.getElementById('test').style.color="white";}function MouseOut(){document.getElementById('test').style.color="black";}</script></head><body><div id="test" onmouseover="MouseOver()" onmouseout="MouseOut()"><a id="para" target="_blank">Peter S.</a></div></body></html> Link to comment Share on other sites More sharing options...
sbrownii Posted March 7, 2006 Share Posted March 7, 2006 when you mouseover the element it becomes hidden which means the mouse can't be over it, which means the mouseout event fires whichs shows the element, which the mouse is now over so the element is hidden, but then because the element is hidden the mouse isn't over it anymore so the mouseout event fires which.... and on... and on...sounds like a fun idea... Link to comment Share on other sites More sharing options...
petersrin Posted March 7, 2006 Author Share Posted March 7, 2006 [chuckle] 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