Byron Posted December 17, 2009 Share Posted December 17, 2009 All right guys I need a little bit of help please.... At the moment I have hit a stumbling block....What I am trying to do is to create a navigation bar (which I have done) and then add images to it, home, contact us, affiliates, about us, etc.... Which I have done... The problem that I am having:When you move the mouse over the image, I would like it to change to anothe image, then when you click on that image, I would like it to stay another image...I know that it has got something to do with hover etc.. But I am stumped.. I need this to be explain in detail :)I am using php, and css for the website Link to comment Share on other sites More sharing options...
roundcorners Posted December 17, 2009 Share Posted December 17, 2009 with css, you can assign the :hover pseudo-class to the element that contains the image.Add the images with backgound-image: property to the anchor <a> in the navigation.Below the initial a {background-image:image etc...;} CSS rule, add a:hover {background-image:different image etc...;}.You'll need to play around with background-position and padding to get the image to display correctly, and once you have the hang of it, look up Sprites!To get the image to stay changed when you click on it, essentially showing the user that the page has been selected ( The current page is this...) sort of thing you can use CSS, JavaScript or PHP (and probably a myriad of other languages).With CSS you need to target the specific anchor and define its properties. Each page has an id attached to the body element, and each anchor element in the navigation has an id (or both the body and the anchor have the same class name).CSS:body#home #nav li a#homeLink {background-image:pathtoimage...;}Do the above for each page and nav link.PHP:Get something is unique to the page, like the file name or the directory name assign it to a variable, and test the variable value against a string, if they match, echo class="selected" and define your .selected properties in your style sheet. Link to comment Share on other sites More sharing options...
ProblemHelpPlease Posted December 17, 2009 Share Posted December 17, 2009 Depending on the image you are using you can acheive a similar result with css sprites Link to comment Share on other sites More sharing options...
thescientist Posted December 17, 2009 Share Posted December 17, 2009 roundcorners suggested that. Link to comment Share on other sites More sharing options...
Byron Posted December 18, 2009 Author Share Posted December 18, 2009 Alright RoundercornersCan I get some more help from your good self please??Can you send an email to Byron_Wells@blueyonder.co.uk Link to comment Share on other sites More sharing options...
roundcorners Posted December 18, 2009 Share Posted December 18, 2009 what is you would like help with exactly Byron? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.