Jump to content

Can Some One Please Explain How To Do This?


Byron

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...