Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Creating Rollovers With Buttons, Short & simple javascript tutorial that shows you how.
mama_soap
post Jun 9 2005, 09:14 PM
Post #1


Super Member
*********

Group: Members
Posts: 282
Joined: 30-May 05
From: Bangalore
Member No.: 7,686
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 smile.gif 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:

user posted image

user 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 smile.gif

2.The javascript

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

CODE


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

CODE

<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 biggrin.gif Just kidding, I'll try my best to help if you run into trouble with the buttons smile.gif

(list)

Go to the top of the page
 
+Quote Post
frostbyte
post Jun 10 2005, 12:43 AM
Post #2


Newbie
*

Group: Members
Posts: 5
Joined: 6-June 05
Member No.: 7,911
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.

(list)

Go to the top of the page
 
+Quote Post
mama_soap
post Jun 11 2005, 05:33 AM
Post #3


Super Member
*********

Group: Members
Posts: 282
Joined: 30-May 05
From: Bangalore
Member No.: 7,686
Hello, frost,

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

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 smile.gif Thanks for the info, though, I'm sure everyone will find it useful.

Regards,
Neel

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Tutorials · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Change Font Size On Taskbar Buttons(4)
  2. Php Mod Rewrite Tutorial(3)
  3. need a good and simple php-nuke tutorial(17)
  4. Msgbox(17)
  5. Creating Links In Images(17)
  6. Javascript Close Window(12)
  7. Simple Sig Tutorial(23)
  8. How To: Make A Simple Php Site(21)
  9. Adding Rows & Columns In Html Table Using Javascript(1)
  10. Simple C File Handling In Action(3)
  11. Watermark Your Image With Simple Php Script(34)
  12. What Is God?(52)
  13. Dialup Users Double Your Connection Speed(6)
  14. Evilboard (forum Software) - Multiple Categorys - Don't Work :((6)
  15. Creating Msn Account Without A Hotmail Account(3)
  1. Runescape 2 Private Server: Code/guide 1(10)
  2. Can I Make Dynamic Menu In Php(7)
  3. Simple Javascript And Password System(6)
  4. Do You Close The Javascript?(3)
  5. Flash Problem(9)
  6. Java Vs Javascript(11)
  7. Creating A Good Website, How?!(18)
  8. Simple Is Beter - The Future Of Computers?(3)
  9. A Simple Preg_replace Help Please.(1)
  10. Watch Free Movies And Tv Shows Streaming Online!(3)
  11. Adjusting Rows/cols Of Frames In Frameset Using Javascript Is Not Working In Firefox 3 Is Not Working(4)
  12. Lesser Known Useful Javascript Features(2)
  13. Creating A Fully Featured Cms(0)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th July 2008 - 08:23 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation