Creating Rollovers With Buttons - Short & simple javascript tutorial that shows you how.

mama_soap

Jun 9 2005, 09:14 PM

Javascript in action can render some very neat visual effects, which can make your website more appealing, and sometimes even easier to navigate. Among the most common effects are the 'button' effect, and the mouseover effect. The buttons are very common, of course; if nowhere else, most of us have seen them at the end of forms (Click the 'submit' button to proceed...). The basic idea is to have a 'depressible' object, which can give you the illusion that you're 'pressing' it when you click it. The rollover effect causes something to happen when the mouse pointer points over a certain object. The object itself may change, or cause another object to change.

This is a very basic tutorial for people who are JavaScript beginners. Basically, we will try to build objects which behave like buttons, that is, they change in a special way when they're clicked, and simultaneously give in to roll over effects, meaning that they change in a certain way when a mouse pointer 'rolls over' them.

You might want to (although it is not necessary) first see how plain rollover effects are created, and how simple buttons are created.

To begin with, you will need the pictures. The basic object (our to-be button) is composed of three pictures – one corresponding to it's state when the mouse pointer is nowhere near, one for the mouseover, and one for the click. Creating these three pictures is not very complicated. For those who do not know how to go about it, read the next section, we'll do it using the GIMP. For the rest, you can just move on to section 2

For those who do not have the GIMP, and are on Linux, I strongly urge you to download it. For the rest, this should be a trifle on Photoshop or Dreamweaver.

1.Making the buttons using the GIMP

The GIMP luckily has a lot of pre-installed scripts, so it really does all the work for you. Most people usually figure out how to use them pretty much automatically; but if you don't know how to make those buttons, then read on to save time *grin*.

Goto Xtns->Script-Fu->Buttons->Round Buttons

A screen like this should show up:

user posted image

You can modify all the values to your heart's content, till you are satisfied. Clicking on OK should give you three images, that look like this (well, depending, of course, on what parameters you entered):

user posted image

The first one is the inactive button, the second is the 'mouseovered' button, and the last is the depressed button (pardon the pun). For reference, we will call these buttons test1, test2, and test3 respectively.

Next, you create the 'extra' picture that you want to change on mouseover. Normally, you would like to have one main picture and a list of buttons, and that 'main' picture changes as you mouseover individual buttons. You'll need to create all the pictures you want to use. As a sample, I'll be using these:

Again, for reference, I'll call the first image 'base' and the second one 'journal'.

Save these pictures, we'll be needing them soon

2.The javascript

This is what will have to go between your <HEAD> and </HEAD> tags:

CODE

Now, in the <BODY> section of your HTML document, you first need to insert the images. You can position them using the <div> tags, if you know CSS, this will be trivial, I'm not going into that. This is basically what you have to write:

CODE

Again, instead of 'test2.gif', you will have to enter the relevant url. You're done! Want to see what it looks like? See the demonstration!

3.Why does it work?

If you have understood how the javascript works for buttons and rollovers separately, you should see why this works in no time. The functions have been manipulated a little to incorporate extra image changes. You can modify them further so that one rollover changes more than one image – although a word of caution is in place here – the more images you have, the longer your page would take to load, so use these functions carefully.

4.Troubleshooting

Make sure the image types and urls are specified correctly.

Pay special attention to the width and the height of the image. As far as possible, try and ensure this matches the original width and height. In other words, do all the resizing using an image editor, do not leave it to your browser.

Make sure the name specified by the image tag <IMG> matches the variable name in the javascript.

If you want more pictures, just add them in the script section, call them – for convenience, pic2, pic3, and so on, and name them accordingly in the <IMG> tags that go in the <BODY> section.

For more troubleshooting, just post your questions here. I'm sure the moderators will answer them

Just kidding, I'll try my best to help if you run into trouble with the buttons

frostbyte

Jun 10 2005, 12:43 AM

Good tutorial. Very well written and informative. Another minimalistic way to do rollovers is using CSS and the a:hover attribute.
For example,

li a {
background:url(1.gif);
}

li a:hover {
background:url(2.gif);
}

Of course, with javascript you can do much more creative rollovers with more dynamic effects, like in your tutorial having the changing image separate from the button.

mama_soap

Jun 11 2005, 05:33 AM

Hello, frost,

Thanks for reading the tutorial. I'm glad you liked it

I was vaguely aware of the possibility of creating rollover effects with CSS, although I wouldn't, probably, use the feature very well, I'm still finding my feet in CSSland, I'm afraid

Thanks for the info, though, I'm sure everyone will find it useful.

Regards,
Neel

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE