mulletman434 Posted March 25, 2013 Share Posted March 25, 2013 <html><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100"height="100"></canvas><script> var c=document.getElementById("button");var ctx=c.getContext("2d");function myFunction(){ctx.fillStyle="#ff0000";}function myFunction2(){ctx.fillStyle="red";}</script></body></html> Pleaseeee can someone tell me what im doing wrong. all I want is a box that changes color when the mouse goes over it. 1 Link to comment Share on other sites More sharing options...
mulletman434 Posted March 25, 2013 Author Share Posted March 25, 2013 (edited) Tryit Editor<html><script>var c=document.getElementById("button");var ctx=c.getContext("2d");function myFunction(){ctx.fillStyle="#ff0000";ctx.fillRect(0,0,100,100);}function myFunction2(){ctx.fillStyle="red"; ctx.fillRect(0,0,100,100);}</script><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100" height="100"></canvas></body></html><html><script>var c=document.getElementById("button");var ctx=c.getContext("2d");function myFunction(){ctx.fillStyle="#ff0000";ctx.fillRect(0,0,100,100);}function myFunction2(){ctx.fillStyle="red";ctx.fillRect(0,0,100,100);}</script><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100" height="100"></canvas></body></html> ok heres an updated one still wont work but it should. Edited March 25, 2013 by mulletman434 Link to comment Share on other sites More sharing options...
jeffman Posted March 25, 2013 Share Posted March 25, 2013 (edited) It's almost right. Your script should come after the canvas element if you want to get a reference to the canvas element in the global namespace. (It's probably better to get your reference to the canvas INSIDE the functions. Then your script can go in the head, where it belongs.) Also, you need to use the same CASE when you call the functions. myfunction and myFunction do not name the same thing. Edited March 25, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
justsomeguy Posted March 25, 2013 Share Posted March 25, 2013 No, that second code should not work either. Here are some of the problems: Your code to get the elements on the page is running before the elements are defined. You need to get those elements in a page load handler. Your functions are defined with a capital F, but you spell them differently in the canvas handlers. Javascript is case-sensitive. You should have your Javascript code in the head section, you don't have a head section. Link to comment Share on other sites More sharing options...
mulletman434 Posted March 25, 2013 Author Share Posted March 25, 2013 <html><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="150" height="150"></canvas></body><head><script>var c=document.getElementById("button");var ctx=c.getContext("2d");function myfunction(){ctx.fillStyle="#ff0000";ctx.fillRect(0,0,100,100);}function myfunction2(){ctx.fillStyle="red"; ctx.fillRect(0,0,100,100);}</script></head></html> Ok i did this it kinda works but it doesnt update i have a feeling i have things in the wrong place Link to comment Share on other sites More sharing options...
mulletman434 Posted March 25, 2013 Author Share Posted March 25, 2013 <html><head><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100" height="100"></canvas></body><script>var c=document.getElementById("button");var ctx=c.getContext("2d");function myfunction(){ctx.fillStyle="#ff0000";ctx.fillRect(0,0,100,100);}function myfunction2(){ctx.fillStyle="#c00000";ctx.fillRect(0,0,100,100);}</script></head></html> Ok problem solved but if there is a better way of doing this can some one tell me Link to comment Share on other sites More sharing options...
justsomeguy Posted March 25, 2013 Share Posted March 25, 2013 The head goes before the body, not after it, and the body does not go inside the head. <!doctype html><html> <head> <script> var c, ctx; function init() { c = document.getElementById("button"); ctx = c.getContext("2d"); } function myfunction() { ctx.fillStyle="#ff0000"; ctx.fillRect(0,0,100,100); } function myfunction2() { ctx.fillStyle="#c00000"; ctx.fillRect(0,0,100,100); } </script> </head> <body onload="init()"> <canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100" height="100"></canvas> </body></html> Link to comment Share on other sites More sharing options...
LucasMars123 Posted April 28, 2013 Share Posted April 28, 2013 <html><body><canvas id="button" onmouseover="myfunction()" onmouseout="myfunction2()" width="100"height="100"></canvas><script> var c=document.getElementById("button");var ctx=c.getContext("2d");function myFunction(){ctx.fillStyle="#ff0000";}function myFunction2(){ctx.fillStyle="red";}</script></body></html> Pleaseeee can someone tell me what im doing wrong. all I want is a box that changes color when the mouse goes over it. How about this:- <html><head><title>Title</title></head><body><style>div{width:111;height:237;background:#003366;}div:hover{background:#4D7094;}</style><div><p> </p></div></body></html>And Then Use http://www.w3schools.com/tags/ref_colorpicker.asp To Change The Colour Link to comment Share on other sites More sharing options...
LucasMars123 Posted April 28, 2013 Share Posted April 28, 2013 (edited) -- Nevermind, I posted twice! Edited April 28, 2013 by LucasMars123 Link to comment Share on other sites More sharing options...
davej Posted May 1, 2013 Share Posted May 1, 2013 Yeah, I agree with the last post in that the stated objective in msg #1 above doesn't require a canvas and if the OP is looking for the simplest solution it may not make sense to use a canvas. 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