April 16, 201016 yr hello everyone. i have designed a navigation button, but i don't know how i would implement this to my site. this is how my normal button would look like. and this is how my selected and hovered would look like. how do i save this for web? do i need to save for web them one-by-one. i have 5 navigation buttons (home, about, portfolio, blogs and contact). do i need to save for web a normal home button, normal about button../? and then do the same with the selected button?
April 16, 201016 yr The first thing I would do is to join each normal image to its hover image like http://www.wickham43.net/images/menuhomecombined.gif (which has three images, an extra one for the visited state) which is called a sprite and stops the images giving a short flash as one image changes to the other. Then use the code in the following link, set the "li a" style height to half the combined image, then change the position of the image on hover so that the other half shows. http://www.wickham43.net/visitedbutton.php Item 2 uses the sprite, (item one doesn't and will flash).
April 16, 201016 yr The best way to do this would be to save them as a jpg & have them all lined up as a CSS sprite...I'd suggest having the normal state buttons along the top, then the corresponding hover buttons on the bottom row. I won't go into explaining how to make a CSS sprite work here as it has been done 100's of times before on the net....see: Css Sprite How To search 'css sprite' for loads more tutorials In your case, the normal state buttons will want to be aligned to the top, then the hover state aligned to the bottom. For each button across eg home, about, contact - you will need to change the left/right positioning by using multiples of the button width. For example, if your buttons are 125px wide, the horizontal positioning would be: home...0px about...-125px contact...-250px Hopefully you can make progress from that.
April 16, 201016 yr Author The first thing I would do is to join each normal image to its hover image like http://www.wickham43.net/images/menuhomecombined.gif (which has three images, an extra one for the visited state) which is called a sprite and stops the images giving a short flash as one image changes to the other. Then use the code in the following link, set the "li a" style height to half the combined image, then change the position of the image on hover so that the other half shows. http://www.wickham43.net/visitedbutton.php Item 2 uses the sprite, (item one doesn't and will flash). thanks for the link. i will try that. i think i got the idea. well sort of..
April 16, 201016 yr Author The best way to do this would be to save them as a jpg & have them all lined up as a CSS sprite...I'd suggest having the normal state buttons along the top, then the corresponding hover buttons on the bottom row. I won't go into explaining how to make a CSS sprite work here as it has been done 100's of times before on the net....see: Css Sprite How To search 'css sprite' for loads more tutorials In your case, the normal state buttons will want to be aligned to the top, then the hover state aligned to the bottom. For each button across eg home, about, contact - you will need to change the left/right positioning by using multiples of the button width. For example, if your buttons are 125px wide, the horizontal positioning would be: home...0px about...-125px contact...-250px Hopefully you can make progress from that. i got the idea but i cannot see my image.
April 16, 201016 yr Can you see the background image in the normal link state? If not, perhaps the path is wrong. My method used a vertical combined image so the hover state "li a" style is repositioned vertically whereas craftygeek's method assumes horizontal combined image which is different to my method.
April 16, 201016 yr Author i set it up like this i can notice that it was there but i just cant see it. it's like something is occupying the space but there is none.
Create an account or sign in to comment