rascle Posted July 4, 2009 Share Posted July 4, 2009 Hi I want to create something that has some text(a link) and when you hover over the text the background colour changes and some text appears underneath original text. When you move the mouse off the link then the background colour goes back to normal and the text that appeared disappears. Does anyone know how i would do this or can anyone give me a link to any tutorials. Thanks Quote Link to comment Share on other sites More sharing options...
corbin Posted July 4, 2009 Share Posted July 4, 2009 http://www.google.com/search?hl=en&q=javascript+change+background+color&aq=f&oq=&aqi=g10 Quote Link to comment Share on other sites More sharing options...
rascle Posted July 5, 2009 Author Share Posted July 5, 2009 I couldnt find anything on google for when you hover over the object that the text appears, can anyone help me their? And i am using this to change the colour of the background (div): <html> <head> <script language="JavaScript"> <!-- var backColor = new Array(); backColor[0] = '#666666'; backColor[1] = '#000000'; function changeBG(whichColor){ document.all.rhys.style.backgroundColor = backColor[whichColor]; } //--> </script> </head> <body> <div id="rhys" style="background-color: #000000;"> <a href="#" onMouseOver="javascript:changeBG(0)" onmouseout="javascript:changeBG(1)">Change</a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
seventheyejosh Posted July 5, 2009 Share Posted July 5, 2009 <html> <head> <script language="JavaScript"> <!-- var backColor = new Array(); backColor[0] = '#666666'; backColor[1] = '#000000'; function changeBG(whichColor){ document.all.rhys.style.backgroundColor = backColor[whichColor]; if (whichColor==0){ document.getElementById('extra').style.display='block'; }else{ document.getElementById('extra').style.display='none'; } } //--> </script> </head> <body> <div id="rhys" style="background-color: #000000;"> <a href="#" onMouseOver="javascript:changeBG(0)" onmouseout="javascript:changeBG(1)">Change</a> <div id="extra" style="display:none;"> HIDDEN TEXT! </div> </div> </body> </html> prolly not the most elegant, but it works Quote Link to comment Share on other sites More sharing options...
rascle Posted July 5, 2009 Author Share Posted July 5, 2009 Wicked, Thanks )) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.