bobleny Posted June 20, 2006 Share Posted June 20, 2006 Now, I have this nice little css script here. It just changes colors with a:hover. I've been trying all sorts of stuff to get it to do the same thing with an image. Why can't I just go background-image:url("blah.png"); for a:hover? That seems like it would work... Is there a way to do this CSS?I know you can with JavaScript but I want to do it with CSS. Is this possible?[code]<html><head><style type="text/css">ul.topnav{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:6em;text-decoration:none;color:blue;background-color:black;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:blue; color:black;}li {display:inline}</style></head><table align="center"><tr><td><body><ul class="topnav"><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul></td></tr></table></body></html>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/12444-why-can%E2%80%99t-i-do-this-with-images/ Share on other sites More sharing options...
wildteen88 Posted June 20, 2006 Share Posted June 20, 2006 It should change the background image when you mouseover the link with that code.Make sure the the path to blah.png is correct, or use an absulote path:[a href=\"http://www.mysite.com/blah.png\" target=\"_blank\"]http://www.mysite.com/blah.png[/a] Quote Link to comment https://forums.phpfreaks.com/topic/12444-why-can%E2%80%99t-i-do-this-with-images/#findComment-47575 Share on other sites More sharing options...
bobleny Posted June 20, 2006 Author Share Posted June 20, 2006 OK, I've redone the code with the images. The paths are correct. When you move your mouse over them, they do nothing. Am I doing something wrong?I have uploaded the file and images. It can be viewed here -> [a href=\"http://www.firemelt.net/.01page22.htm\" target=\"_blank\"]http://www.firemelt.net/.01page22.htm[/a][code]<html><head><title>CSS Rollover Test</title><style type="text/css">body{background-color:#000000;}img{border-style:none}ul.topnav{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a.guide:hover{background-image:url('guide1.2.png');}a.about:hover{background-image:url('about1.2.png');}a.flash:hover{background-image:url('flash1.2.png');}a.jokes:hover{background-image:url('joke1.2.png');}li{display:inline}</style></head><table align="center"><tr><td><body><ul class="topnav"><li><a class="guide" href="#"><img src="guide1.0.png" /></a></li><li><a class="about" href="#"><img src="about1.0.png" /></a></li><li><a class="flash" href="#"><img src="flash1.0.png" /></a></li><li><a class="joke" href="#"><img src="joke1.0.png" /></a></li></ul></td></tr></table></body></html>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/12444-why-can%E2%80%99t-i-do-this-with-images/#findComment-47769 Share on other sites More sharing options...
wildteen88 Posted June 21, 2006 Share Posted June 21, 2006 I see your problem!In your anchor tag you have an image already displayed. Now the image is overlayed ontop of you background, so your background image is not displayed as it is underneath you image.You'll be best of with javascript to swap the images over. Quote Link to comment https://forums.phpfreaks.com/topic/12444-why-can%E2%80%99t-i-do-this-with-images/#findComment-47986 Share on other sites More sharing options...
bobleny Posted June 21, 2006 Author Share Posted June 21, 2006 You don't know how much yor post helped! I got it to work. [a href=\"http://www.firemelt.net/.01page22.htm\" target=\"_blank\"]http://www.firemelt.net/.01page22.htm[/a] but if you view it in IE it looks great and in FF it is half gone? Any ideas as to how to fix this?[code]<html><head><title>CSS Rollover Test</title><style type="text/css">body{background-color:#000000;}img{border-style:none}a.guide{background-image:url('guide1.0.png');}a.joke{background-image:url('joke1.0.png');}a.guide:hover{background-image:url('guide1.2.png');}a.joke:hover{background-image:url('joke1.2.png');}</style></head><body><table align="center"><tr><td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td><td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td></tr></table><table align="left"><tr><td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td></tr><tr><td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td></tr></table></body></html>[/code] Quote Link to comment https://forums.phpfreaks.com/topic/12444-why-can%E2%80%99t-i-do-this-with-images/#findComment-48241 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.