T his mouseover effect we came across by accident, while searching for something else and got busy building a tutorial for this.
W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms with the exception of Netscape4.08 and Netscape7.0 where the following variations were observed.
1) Netscape4.08 The form buttons do not change colors on mouseover.
2) Netscape4.08 Form buttons look like just normal form buttons with no added color.
3) The buttons do work without any mouseover color effect.
4) Netscape7.0 The buttons do have the defined color but no mouseover color change.
5) You will not get any error messages.
D epending on your knowledge of HTML and java scripts, this is an easy two part copy and paste code. On section gets pasted in the <HEAD> section and the other part gets pasted into the <BODY> section of your document. Below we will show you the reconfigurations to make it work on your site with different variations.
I f you first notice when the page opens, all the buttons are the same color. This is because the initial setting in the <HEAD> section is set for the color Orchid. This is a constant that whatever color you preset will be the opening color of the buttons. Now if you would to slide your cursor over each and every button they will change to the colors that are set for each button and override the initial setting in the <HEAD> section. The reason for this is simple. We have the added the different types of effects you can use to these buttons but the reconfiguration in the <HEAD> section is for all the buttons until touched by your cursor.
Reconfiguration For The Head Section
<!--
/*change the color name below to the color you want initially applied to the button.
ie:blue*/
.initial2{font-weight:bold;background-color:lime}
//-->
Reconfigurations For The Body Section
<form onMouseover="change('yellow')" onMouseout="change('lime')">
<input type="button" value="Yahoo " class="initial2" onClick="jumpto2
('http://yahoo.com')"><br>
<input type="button" value="Geocities " class="initial2" onClick="jumpto2
('http://Geocities.com')"><br>
<input type="button" value="ABC News " class="initial2" onClick="jumpto2
('http://abcnews.com')">
</form>
Y ou can see by the above part of the script where you would reconfigure to your colors, link name and link address. Be sure for every button you add you follow the sequence and put it before the closing </form> tag. This way you will get the buttons in line and not up and down. If you want the buttons up and down instead of across just add the <br> tag after each button as shown above also.
F or each additional button you want to add just use this section of script and be SURE it is placed before the closing </form> tag.
<input type="button" value="Your Link Name " class="initial2" onClick="jumpto2
('Your Link Address Here')"><br>
N ow for the final type of effect if you want each button to be a different color on the mouseover. You make no other changes in the <HEAD> section but the initial constant color and then for each button as in the last three examples we show you need to use this part of the code for every button.
<form onMouseover="change('Your Color')" onMouseout="change('Your Color')">
<input type="button" value="Your Link Name " class="initial2" onClick="jumpto2
('Your Link Address')">
</form>
I
f you want this effect on your page just follow the below link and get the script. If you do have any problems with this feel free to contact us.
[ Get Code Here ]
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
|
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-