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 Link to comment https://forums.phpfreaks.com/topic/164775-solved-change-background-onmouse-over/ 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 Link to comment https://forums.phpfreaks.com/topic/164775-solved-change-background-onmouse-over/#findComment-868957 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> Link to comment https://forums.phpfreaks.com/topic/164775-solved-change-background-onmouse-over/#findComment-869228 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 Link to comment https://forums.phpfreaks.com/topic/164775-solved-change-background-onmouse-over/#findComment-869244 Share on other sites More sharing options...
rascle Posted July 5, 2009 Author Share Posted July 5, 2009 Wicked, Thanks )) Link to comment https://forums.phpfreaks.com/topic/164775-solved-change-background-onmouse-over/#findComment-869304 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.