Jump to content

onmouseover problem


donaldunca
 Share

Recommended Posts

My teacher gives code. But I change it so it can't run like the beginning. Fistly, webpage have a paragraph. When I click it, it will appear a paragraph like the first paragraph but not same color and background color. For example:my paragraph: take this linewhen I click above paragraph, it will appear a paragraph with green background color and white text. If I drag the mouse over, the paragraph will change text color and background color. This is the code:

<style>body{margin:5 10 10 70; font: normal 15pt "Times New Roman"; color:navy}div{border:solid 1px cyan; background-color:green; color: white; font: bold 20pt Arial; display:none; width: 650; padding: 10 10 10 10; text-align:center}.note{border:solid 1px cyan; background-color:navy; color: lime; font: bold 18pt Arial; display:none; width: 650; padding: 10 10 10 10;}xmp{font: bold 20pt 'Courier New'; color navy}</style><script language=javascript>function 	take(){	var 	obj=document.getElementById("nd");	var	objr=document.getElementById("fu");	objr.style.display="block";// I don't understand this line	if(document.all)	objr.innerText=obj.innerText;	else			objr.innerHTML=obj.innerHTML;}function	see(colo){	var 	obj=document.getElementById("fu");	switch(colo)	{	case 1: obj.style.backgroundColor="navy";			obj.style.color="yellow";			break;		case 2: obj.style.backgroundColor="green";			obj.style.color="white";			break;	}}</script></head><body><p id="nd" onclick="take();">Take this line</p><div id="fu" 	onclick="Explain();" omouseover="see(1);" onmouseout="see(2);"></div></body></html>

Hope you understand. Thank you!!

Link to comment
Share on other sites

I don't see anything wrong with the code.objr.style.display="block"; Will make the indicated object become visible if it was set invisible using the CSS display property.You might want to add this to your CSS:#fu {display: none; }Other things that might be preferrable to change:

  • <script language=javascript> for <script type="text/javascript">
  • <style> for <style type="text/css">
  • Create a javascript function called Explain()

Maybe you can link me to a page to see the code in action, I might be able to help more.

Link to comment
Share on other sites

If possible, start using Firefox as your development browser. I found these two simple errors just by loading your code and checking Firefox's built-in error console. The whole process took 2 minutes.xmp{font: bold 20pt 'Courier New'; color navy}/* YOU FORGOT THE COLON AFTER COLOR <div id="fu" onclick="Explain();" omouseover="see(1);" onmouseout="see(2);">/* YOU SPELLED ONMOUSEOVER WITHOUT THE NBoth these errors lead directly to the malfunction you describe. When I fixed them, the behavior improved.

Link to comment
Share on other sites

I see my mistake, so thank you very much. I still have a problem. I add Explain function like this:

........function	 Explain(){		 var  obj=document.getElementById("gt");		   obj.style.display="block";}</script></head><body><p id="nd" onclick="take();">Take this line</p><div id="fu" 	onclick="Explain();" onmouseover="see(1);" onmouseout="see(2);"><div id="gt"><p>explain</p></div></div></body></html>

But when I click, it didn't appear. I don't know why :)

Link to comment
Share on other sites

It took me a few minutes, but I got it. Notice how div "gt" is nested inside div "fu". That means that div "gt" is part of the innerHTML of "fu". But in the take() function, you destroy the innerHTML of "fu" and replace it with new content. That is, take() destroys "gt".I don't know what your assignment is, but the easiest solution is to move "gt" so it is below "fu" and not inside "fu" :<div id="fu" onclick="Explain();" onmouseover="see(1);" onmouseout="see(2);"></div><div id="gt"><p>explain</p></div>

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...