Devyn Posted March 16, 2006 Share Posted March 16, 2006 Okay, this is my prob. I am making a website and the CSS isn't working. What I want to do is when you hover over the image it gets a border at the bottom. The origonal link and the hover part would be images. If it is easier, then the hover doesn't need to be an image. The CSS code needs to be able to work with PHP. The website is fairly large and is in need of the php.... Is there a way to do this? Or should I try something else.... if so any recomandations?SignedDevyn Link to comment Share on other sites More sharing options...
scott100 Posted March 17, 2006 Share Posted March 17, 2006 This will do what you want, make the image the background of the anchor tag and then you have access to psuedo ie hover, use the hover to border-bottom: solid 1px black <html><head><style type="text/css">a:link {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed }a:visited {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed }a:hover {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed;border-bottom:1px solid black }a:active {background:url('http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif') no-repeat fixed;border-bottom:1px solid black }</style></head><body><a href="#" target="_blank" style="height:100px;width:130px"></a></body></html> Link to comment Share on other sites More sharing options...
Devyn Posted March 17, 2006 Author Share Posted March 17, 2006 Will I have to do this to every seperate button? The code implies this, but I want to make double sure. And thanks for the help! You have saved me from many hours of cursing at the computer! Link to comment Share on other sites More sharing options...
Brendon Branigin Posted March 17, 2006 Share Posted March 17, 2006 no you need to apply a id like #navigation to the links and then changea:link to #navigation a:linka:visited to #navigation a:visitedso on and so onthe html will look like this<a href="#" target="_blank" style="height:100px;width:130px" id="navigation"></a> Link to comment Share on other sites More sharing options...
scott100 Posted March 17, 2006 Share Posted March 17, 2006 Will I have to do this to every seperate button?<{POST_SNAPBACK}> Affraid so, if you want to use different images then yesI managed to do it a differently way with javascript that requires less code, but you posted in the css section i gave you the css code.If you want a look at the javascript one i'll post it for you Glad to have saved you wasted hours hehe Link to comment Share on other sites More sharing options...
Devyn Posted March 18, 2006 Author Share Posted March 18, 2006 If you want a look at the javascript one i'll post it for you <{POST_SNAPBACK}> I don't really like java, so the css is just fine. All I have to do is change the image names and links, so its all good. Link to comment Share on other sites More sharing options...
scott100 Posted March 18, 2006 Share Posted March 18, 2006 Java and JavaScript are 2 seperate languages, JavaScript isn't that bad.I've attached the code anyway so you can see what it looks like. <img style="border-bottom:1px solid white" src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif" onmouseover="this.style.borderBottom='1px solid black'" onmouseout="this.style.borderBottom='1px solid white'" /> As you will notice it doesnt take as many lines as css 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