yoshida Posted July 6, 2006 Share Posted July 6, 2006 Is there a way to roll over to another div once I mouse over it, or to change the background image and text color? I'm tired of creating animated buttons so I'm looking to create a manageable template.The code should work cross-browser, so on non-compliant ones as IE6 too.Thanks in advance. Link to comment Share on other sites More sharing options...
scott100 Posted July 6, 2006 Share Posted July 6, 2006 or to change the background image and text color? I'm tired of creating animated buttons so I'm looking to create a manageable template.The code should work cross-browser, so on non-compliant ones as IE6 too.Thanks in advance.<{POST_SNAPBACK}> You would have to use pseudo for this to work, IE6 only supports hover on anchor tag so that should be used. Just change the image/text color on :link, :visited & :hover <html><head><style type="text/css">a{width:234px;height:91px;font-size: 200%;color:white;}a:link {background-image:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif')}a:visited {background-image:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif')}a:hover {background-image:url('http://www.w3schools.com/images/w3default80.jpg');color:red}</style></head><body> <a href="#">I am Text</a></body></html> Link to comment Share on other sites More sharing options...
zanfranceschi Posted July 6, 2006 Share Posted July 6, 2006 Or you can use very simple javascript. onmouseover="this.style.backgroundImage = 'url('.jpg')'; this.style.color = '#000';" onmouseout="this.style.backgroundImage = 'url('...')'; this.style.color = '#666';" Not sure if you use "url" or the image path only.http://www.irt.org/xref/style.htm good list with possibilities Link to comment Share on other sites More sharing options...
yoshida Posted July 6, 2006 Author Share Posted July 6, 2006 Javascript to me is, by concept, never simple (let alone very).But I found this thing, would it work? Link to comment Share on other sites More sharing options...
pulpfiction Posted July 6, 2006 Share Posted July 6, 2006 Tried it in IE and it seems to be working fine... But incase you have to write any text in the div, then it must be inside the <a></a> Link to comment Share on other sites More sharing options...
scott100 Posted July 6, 2006 Share Posted July 6, 2006 But I found this thing, would it work?<{POST_SNAPBACK}> Yes, but you would need an image editor that allows you to set transparency, then it's just a matter of changing the background color with css. Link to comment Share on other sites More sharing options...
yoshida Posted July 6, 2006 Author Share Posted July 6, 2006 SOLVED <html><head><style type="text/css">#deflink a { width:234px; height:91px; font-size: 200%; color:white; text-decoration:none;}#deflink a:link {background-image:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif');}#deflink a:visited {background-image:url('http://w3schools.invisionzone.com/style_images/w3sbanner.gif');}#deflink a:hover { background-image:url('http://www.w3schools.com/images/w3default80.jpg'); color:red;}</style></head><body><div id=deflink><a href="#">I am Text</a></div></body></html> Thanks Scott Link to comment Share on other sites More sharing options...
yoshida Posted July 7, 2006 Author Share Posted July 7, 2006 As a proof of concept:Try this (php version)as compared to this (html version) 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