PDA

View Full Version : CSS Rollover Buttons


joni21uk
07-24-2007, 08:36 AM
Can anyone give me a really simple step by step guide to creating CSS rollover buttons, I want to create a box of colour with text inside that changes colour when rolled over. I have tried various online tutorials but just cant get my head around it.
Please Help if anyone can

Jittor
07-24-2007, 04:19 PM
So you want the text to change the color that the mouse rolls over?
Is that correct?

joni21uk
07-24-2007, 04:41 PM
sorry, no, i want the box to change colour
Thanks

5h4k42u1u
07-24-2007, 04:41 PM
Do you want to use purely css? css and javascript? or, just make life easier, one of dreamweaver's behaviors?

joni21uk
07-24-2007, 05:52 PM
whichever is easiest and would reduce load times

davidj
07-24-2007, 06:49 PM
just make life easier, one of dreamweaver's behaviors?

oh how i disagree with that statement

5h4k42u1u
07-24-2007, 07:27 PM
oh how i disagree with that statement

LOL, touche my friend. I should say "when the behaviours work". But if you keep it simple enough, it should work fine. so without further ado;

If you plan in using images as the buttons, u first have to prepare the two images, an image for what the button will look like normally, and an image to show what the button will be like when the user hovers their mouse over the image. Some may consider this obvious, but i don't want to assume anything

U then design your page, as normal, be it in design mode, code mode, whatever, as if you have no inclination to use rollovers for now. And when you're designing your page, be sure to give your image link an ID, using the id property.
Once you have you page done, this is where you think to yourself "hey, rollovers would look really nice";

1) Select the first image link that you plan to place the rollover effect. Make sure that its the <a> tag selected and not the <img> tag by looking at the status bar.

2) Go over to the Tag panel group and click on the Behaviours panel. You see the little plus sign? when you click that a menu should drop down. Those are a list of possible behaviours that you can place on the image. Just as a note, you'll notice that some of them are grayed out, thats because those behaviours don't apply to the object selected (in this case the image).

3) Select "Swap Image" from the options in the drop downs, and a dialog box should open up. You should see a list where you can select the image that u have selected and below that a text box which indicates the image you want to switch it to. So go ahead and scroll down the list for the name that you had given the image way back when you were designing your page.
Once you selected the image's name, click on browse and search for the image that you want to switch it with. Once you found the image, click ok to bring you back to the "Swap Image" dialog box.

Again, as a note, just make sure that the "preload images" and "restore images onmouseout" are checked off. Preload images makes sure there is no lagg as the browser is requesting the images when the user moves their mouse over your image. The second checkbox automatically creates the action of returning the image to the original when the user moves their mouse away from

Click ok again to get past the "Swap Image" dialog box.
3) And you're all done! Notice the behaviour is now listed in the panel. I strongly suggest that once u're comfortable enuff, to play around with it.


Well, that was a quick and dirty of how to add the rollover effect to an image link. I know its not really using CSS, I'll put up how to create a rollover changing the properties of HTML using behaviours in a little bit.

5h4k42u1u
07-24-2007, 07:50 PM
umm, just to make sure, you want to change the CSS properties when the mouse hovers over a certain part of your page right? not just a customizing the link style?

davidj
07-25-2007, 06:59 AM
nice walk through 5H

respect

joni21uk
07-25-2007, 08:12 AM
LOL, touche my friend. I should say "when the behaviours work". But if you keep it simple enough, it should work fine. so without further ado;

If you plan in using images as the buttons, u first have to prepare the two images, an image for what the button will look like normally, and an image to show what the button will be like when the user hovers their mouse over the image. Some may consider this obvious, but i don't want to assume anything

U then design your page, as normal, be it in design mode, code mode, whatever, as if you have no inclination to use rollovers for now. And when you're designing your page, be sure to give your image link an ID, using the id property.
Once you have you page done, this is where you think to yourself "hey, rollovers would look really nice";

1) Select the first image link that you plan to place the rollover effect. Make sure that its the <a> tag selected and not the <img> tag by looking at the status bar.

2) Go over to the Tag panel group and click on the Behaviours panel. You see the little plus sign? when you click that a menu should drop down. Those are a list of possible behaviours that you can place on the image. Just as a note, you'll notice that some of them are grayed out, thats because those behaviours don't apply to the object selected (in this case the image).

3) Select "Swap Image" from the options in the drop downs, and a dialog box should open up. You should see a list where you can select the image that u have selected and below that a text box which indicates the image you want to switch it to. So go ahead and scroll down the list for the name that you had given the image way back when you were designing your page.
Once you selected the image's name, click on browse and search for the image that you want to switch it with. Once you found the image, click ok to bring you back to the "Swap Image" dialog box.

Again, as a note, just make sure that the "preload images" and "restore images onmouseout" are checked off. Preload images makes sure there is no lagg as the browser is requesting the images when the user moves their mouse over your image. The second checkbox automatically creates the action of returning the image to the original when the user moves their mouse away from

Click ok again to get past the "Swap Image" dialog box.
3) And you're all done! Notice the behaviour is now listed in the panel. I strongly suggest that once u're comfortable enuff, to play around with it.


Well, that was a quick and dirty of how to add the rollover effect to an image link. I know its not really using CSS, I'll put up how to create a rollover changing the properties of HTML using behaviours in a little bit.

Thank You, thats really useful!!
Will using that method mean that the buttons load quicker than using the create rollover button method from the menu??

d a v e
07-25-2007, 10:35 AM
or then this is easier, quick to download (v small amount of css), easily changeable... http://css.maxdesign.com.au/listamatic/

5h4k42u1u
07-25-2007, 02:16 PM
or then this is easier, quick to download (v small amount of css), easily changeable... http://css.maxdesign.com.au/listamatic/


Thats a REALLY good site, thx!