Alternative to flash for Making Navigation Buttons

acharris

acharris

acharris

Associate
Joined
13 Aug 2004
Posts
823
Hi all, I have always used flash to make my buttons for websites when I dabble with them, but I would like to make a move away if possible and look at other methods to make buttons.

But to be honest I aint got a clue as to what else can be used to make buttons other than gif's maybe but then I dont know if they should be made as animated gifs or what.

Any advice and help would be appreciated. Thanks in advance.

Anthony
 
Flash is a bad idea for navigation, so it's good you're moving away from it.

Most people design buttons in Photoshop and use CSS or JavaScript to swap image on hover. It's best to keep any button labelling as plaintext though, to help with screen readers/accessibility etc.
 
What I tend to do is use a sprite. So for example say I want a navigation button sized 100px x 50px I will make a document in photoshop or even paint the size 100px x 100px.

Why double the height?

Well that way I make the normal button at the top and a hover one at the bottom example:
img_navsprites_hover.gif


In the CSS I write:

.navButton {
width:100px;
height:50px;
background-image: (url);
}
.navButton a:link {
background-position:top;
}
.navButton a:hover{
background-position:bottom;
}

What this is doing when the image loads its positioning the image at the top so the hover is hidden but on hover it moves image position so its now at the bottom and shows the hover. I then put the text over the top. (I usually do all this in a list)

Have a look at: http://www.w3schools.com/css/css_image_sprites.asp

Mark
 
Thanks for the help and advice. This is very useful, I am trying to get away from flash as what ive read it is probably better to move, especially with the mobile devices stopping being support by flash. I will look at the above suggestions and have a play around and see what I can do with them.

Thanks again.
 
You must log in or register to reply here.
Back
Top Bottom