Jump to content
xisto Community
mama_soap

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

By mama_soap, in General Discussion

Recommended Posts

mama_soap    0

mama_soap
Posted

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:

 

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):

 

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:

 

Posted Image

 

Posted Image

 

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

 

Save these pictures, we'll be needing them soon :D

 

2.The javascript

 

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

 

<script language="JavaScript"> <!-- if (document.images) { 	pic1on= new Image(100,26); //Your image dimensions go in here.	pic1on.src="./test2.gif";  //enter the relevant url of the button called test2.	pic1off= new Image(100,26); //Your image dimensions go in here.	pic1off.src="./test1.gif"; //enter the relevant url of the button called test1.	pic1down=new Image(100,26); //Your image dimensions go in here.	pic1down.src="./test3.gif";//enter the relevant url of the button called test3.	image_off= new Image(256,100);//Your image dimensions go in here.	image_off.src="./graphics/base.jpg";  //enter the relevant url of the picture called base.	image1= new Image(256,100);//Your image dimensions go in here.	image1.src="./graphics/tut4.jpg"; //enter the relevant url of the picture called journal.}function lightup(imgName,picName,img) { if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src= imgOn; test=eval(img + ".src");document[picName].src= test;} } function turnoff(imgName,picName,img) { if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src= imgOff;test=eval(img + ".src");document[picName].src= test; } } function clickdown(imgName) { if (document.images) { imgDown=eval(imgName + "down.src"); document[imgName].src=imgDown; } } //--> </SCRIPT>

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:

 

<IMG SRC="./graphics/base.jpg" name="image_off"><A href="your_url" onMouseover="lightup('pic1','image_off','image1')" onMouseout="turnoff('pic1','image_off','image_off')" onMouseDown="clickdown('pic1')" onMouseUp="lightup('pic1','image_off','image1')"><IMG SRC="./test2.gif" name="pic1" border="0" alt="Some_relevant_text"></a>

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 :D Just kidding, I'll try my best to help if you run into trouble with the buttons :(

Share this post

Link to post
Share on other sites

frostbyte    0

frostbyte
Posted

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.

Share this post

Link to post
Share on other sites

mama_soap    0

mama_soap
Posted

Hello, frost,Thanks for reading the tutorial. I'm glad you liked it :DI 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 :D Thanks for the info, though, I'm sure everyone will find it useful.Regards,Neel

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept