Multiuse of Alphause: text box gteted

Sunday, April 13, 2014

text box gteted

Link To Us | Bookmark EchoEcho.Com

What's New? | Site Map

Home > Tutorials > Javascript > Advanced

Animated Buttons :

THE CODE

Before you can add an animated button to your page you need to add the button image itself.

After adding the button image to the webpage you need to add a few comments to the image tag.

After that you can add the javascript that changes the image when the mouse moves over it.

The first half of this page covers the plain HTML code for inserting an image so that javascript can refer to it.

The second half covers the javascript that changes the image when a mouseover occurs.

THE HTML CODE

A regular image that works as a link button looks somewhat like this in HTML code:

To make it possible for javascript to change the image we need to give it a name that can be used by javascript to address it.

So in our case the HTML would look like this:

name="button1"

Now the button has a name that can be used as a reference when we want javascript to replace it with another image.

We need to tell the browser that once a mouse is rolled over the image, the browser should execute a function that replaces the image.
This is done with the onMouseOver event.

In addition we also need to tell the browser that once the user rolls the mouse away from the image, another javascript should be solved in order to let the initial image of the button return.
This is done with the onMouseOut event.

The final HTML code looks like this:

onmouseOver="MouseOverRoutine('button1')" onmouseOut="MouseOutRoutine('button1')"

This is all you need to do in the HTML part of the page. The rest is done in javascript.

Note:
The mouse events are added to the tag - NOT the image tag. This is because browsers do not look for mouseover events on images. As stupid as it may sound it is nevertheless true. Therefore we can only make images animated by turning them into links. Since browsers understand mouseover events on links, they will register a mouse event on an image, if that image is a link.

THE JAVASCRIPT CODE

The following javascript should be added to the head part of your webpage.

If you want more than one button on your page, all you need to do is double each line referring to button1 and change it to button2, button3 or whatever number of buttons you might have.

<< PREVIOUS

TOP TUTORIALS

CSS

5000 MB Server space !!
60 GB Traffssic/Month !!
Php dynamic pages
Perl/cgi scripts
MySQL databases
Password protected folders
Advanced log file stats
Spam & Virus checked mail
Auto-installed scripts:
Forums, Chat, Shop,
Photo album, Livehelp etc.

Nothing beats this deal:

$7.50/month!

» Read More

DEVELOPER TIP!

FACT:
Metatags are the most widely used tool for attempts to fool search engines.
TIP:
Most search engines nowadays only use metatags to identify spammers!

Read All About It