Code One
03-30-2003, 06:26 PM
Introduction:
Hey guys/gals Code One here just posting up a tutorial for the newbies in here to bring a close to my question
on how to color just one letter in a button. Here along with what I have learned along the way is some codes to execute such tasks as this. I wanted to post this to help others who are just starting out in developing. I hope this tutorial can be informative to anyone who needs it and I hope it increases your knowledge and makes you think about all the possibilities made possible by Javascipt/DHTML/CSS/HTML and a creative outlook on developing.
Description:
A while back I asked this forum if anyone knew how to color just one letter within a button, I heard crickets for about a day or so and then finally someone stepped up and said it won't work, but being the stubborn son of a gun that I am I pursued to find a way. So I asked a buddy of mine who is a electronic engineer who lives in Iran his name is Anand "Ananday" and that crazy little guy told me I couldn't do it too but he gave me a sweet idea. Here it is:
Instructions:
He said I could make a table and place the table were I wanted the buttons to be. Then I should size the cells to the size I wanted and tweak out all the design specs to my liking. "After you have gotten everything to your likings," he said, "you should add some text with the colors you would like." Sweet!!!
For my example I'm going to use this:
========================================
<table border=1 cellspacing=0 cellpadding=0 width=60 height=30>
<td><a onclick="window.print()" style="cursor:hand"> <font color=red><u>P</u></font>rint </a></td>
<td><a onclick="history.go()" style="cursor:hand"> <font color=red><u>R</u></font>efresh </a></td>
</table>
========================================
See how that works? Makes just one color red and the rest default black. Almost exactly what I wanted except I wanted buttons, but unfortunatly right now that isn't possible so I have to rig a way and here's how. You have to use CSS which allows onmouseover and onmouseout functions to happen or you can do it with onmousedown, onmouseout functions, I prefer the onmousedown, onmouseout myself so lets talk about that. How do I set that up you might ask being a newbie and all, well newbie it's quite simple really just paste this code anywhere within your (body) tag:
==========================================
<table border=1 cellspacing=0 cellpadding=0 width=60 height=30>
<td bgcolor="silver" onMousedown="this.bgColor='gray'" onMouseOut="this.bgColor='silver'" >
<a onclick="window.print()" style="cursor:hand"> <font color=red><u>P</u></font>rint </a></td>
<td bgcolor="silver" onMousedown="this.bgColor='gray'" onMouseOut="this.bgColor='silver'">
<a onclick="history.go()" style="cursor:hand"> <font color=red><u>R</u></font>efresh </a></td>
</table>
==========================================
As you can see it is the same code as above but with some added code. Notice the onmousedown/onmouseout inside the TD tag. This code makes it possible for you to have a changing cell bgcolor on onmousedown. Meaning that when you click your left mouse button down over the cell the cell's bgcolor will change to the specified color in the onmousedown code. Onmouseout specifies the color the cell will change to once you have released the left mouse button. I set this color to reflect the original color of the cell, that way it will look as if it was pressed and depressed.
Notice that I used the font tag to color the first letter of each word in both cells and also underlined them. I did this because I wanted to include both ways of giving your users a visual of what key they should push. You can use either or even both it's totally up to you.
You may be asking your self why the heck would I want to tell my users that? Well you would want to tell them what button you assigned to fire a certain function wouldn't you? Not everyone is psychic like me. So it's a good idea to tell them with a visual what to push just like windows does. OK sounds good Code One but how do I do that? Don't worry newbie it's cake just paste this code anywhere in your (head) tag. :
==========================================
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var key = new Array(); // Define QuickKey pages here
key['p'] = "javascript:window.print()('p')";
key['r'] = "javascript:history.go()('r')";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
for (var i in key) if (which == i) window.location = key[i];
}
document.onkeypress = getKey;
// End -->
</script>
==========================================
See that newbie? This code allows you to assign a function to your buttons or links, or just about anything that can be classed. I used this paticular code so much I should call it a brother. I love this function especially since I develop javascript/dhtml/html programs. I use this code to set numerous functions such as a quick and easy num pad type-ability for calculators or keyboards. I use it for quick clicks with buttons and links, and the list is infinite. Basically anything you can class can be linked in this manner making it easier for your user to get around threw all the functions of your page without using there mouse.
All right there you go genius you’re done. It should work, if it doesn't then reference this tutorial over and over till it does, or if you just have a hard time learning or just can't get it then just email me. Be nice and ask polite and I will do what I can to help. ;) Good Luck!
You can contact me via email at: Kingx@insightbb.com
Final thoughts:
Well to end this tutorial I would like to say thanks to everyone who has helped me along the way and all the people who has provided me with the knowledge and patience that I needed to get as far as I have come. Big thanks to Anand V. for referencing his genius mind for this answer to my question. Much love. Big thanks to the moderators at the Webdeveloper forums and Tek tip forums you guys really know what the heck is up with developing! A shout out to my group at the King James Inc. we are almost there folks lets keep on keeping! Huge thanks to GOD and CHRIST for all the love and inspiration. Keep your heads up when you’re down, be safe, and be good.
Your friend,
Code One
-------------------------------------------------------------------------------------------------------------
Hey guys and gals if you want to you can rate this tutorial on a scale from 1 - 10 (horrible being 1, and Rad being 10), any comments are appreciated even if you say I'm a stupid loser cuz I don't care. ;)
Code One
Hey guys/gals Code One here just posting up a tutorial for the newbies in here to bring a close to my question
on how to color just one letter in a button. Here along with what I have learned along the way is some codes to execute such tasks as this. I wanted to post this to help others who are just starting out in developing. I hope this tutorial can be informative to anyone who needs it and I hope it increases your knowledge and makes you think about all the possibilities made possible by Javascipt/DHTML/CSS/HTML and a creative outlook on developing.
Description:
A while back I asked this forum if anyone knew how to color just one letter within a button, I heard crickets for about a day or so and then finally someone stepped up and said it won't work, but being the stubborn son of a gun that I am I pursued to find a way. So I asked a buddy of mine who is a electronic engineer who lives in Iran his name is Anand "Ananday" and that crazy little guy told me I couldn't do it too but he gave me a sweet idea. Here it is:
Instructions:
He said I could make a table and place the table were I wanted the buttons to be. Then I should size the cells to the size I wanted and tweak out all the design specs to my liking. "After you have gotten everything to your likings," he said, "you should add some text with the colors you would like." Sweet!!!
For my example I'm going to use this:
========================================
<table border=1 cellspacing=0 cellpadding=0 width=60 height=30>
<td><a onclick="window.print()" style="cursor:hand"> <font color=red><u>P</u></font>rint </a></td>
<td><a onclick="history.go()" style="cursor:hand"> <font color=red><u>R</u></font>efresh </a></td>
</table>
========================================
See how that works? Makes just one color red and the rest default black. Almost exactly what I wanted except I wanted buttons, but unfortunatly right now that isn't possible so I have to rig a way and here's how. You have to use CSS which allows onmouseover and onmouseout functions to happen or you can do it with onmousedown, onmouseout functions, I prefer the onmousedown, onmouseout myself so lets talk about that. How do I set that up you might ask being a newbie and all, well newbie it's quite simple really just paste this code anywhere within your (body) tag:
==========================================
<table border=1 cellspacing=0 cellpadding=0 width=60 height=30>
<td bgcolor="silver" onMousedown="this.bgColor='gray'" onMouseOut="this.bgColor='silver'" >
<a onclick="window.print()" style="cursor:hand"> <font color=red><u>P</u></font>rint </a></td>
<td bgcolor="silver" onMousedown="this.bgColor='gray'" onMouseOut="this.bgColor='silver'">
<a onclick="history.go()" style="cursor:hand"> <font color=red><u>R</u></font>efresh </a></td>
</table>
==========================================
As you can see it is the same code as above but with some added code. Notice the onmousedown/onmouseout inside the TD tag. This code makes it possible for you to have a changing cell bgcolor on onmousedown. Meaning that when you click your left mouse button down over the cell the cell's bgcolor will change to the specified color in the onmousedown code. Onmouseout specifies the color the cell will change to once you have released the left mouse button. I set this color to reflect the original color of the cell, that way it will look as if it was pressed and depressed.
Notice that I used the font tag to color the first letter of each word in both cells and also underlined them. I did this because I wanted to include both ways of giving your users a visual of what key they should push. You can use either or even both it's totally up to you.
You may be asking your self why the heck would I want to tell my users that? Well you would want to tell them what button you assigned to fire a certain function wouldn't you? Not everyone is psychic like me. So it's a good idea to tell them with a visual what to push just like windows does. OK sounds good Code One but how do I do that? Don't worry newbie it's cake just paste this code anywhere in your (head) tag. :
==========================================
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var key = new Array(); // Define QuickKey pages here
key['p'] = "javascript:window.print()('p')";
key['r'] = "javascript:history.go()('r')";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
for (var i in key) if (which == i) window.location = key[i];
}
document.onkeypress = getKey;
// End -->
</script>
==========================================
See that newbie? This code allows you to assign a function to your buttons or links, or just about anything that can be classed. I used this paticular code so much I should call it a brother. I love this function especially since I develop javascript/dhtml/html programs. I use this code to set numerous functions such as a quick and easy num pad type-ability for calculators or keyboards. I use it for quick clicks with buttons and links, and the list is infinite. Basically anything you can class can be linked in this manner making it easier for your user to get around threw all the functions of your page without using there mouse.
All right there you go genius you’re done. It should work, if it doesn't then reference this tutorial over and over till it does, or if you just have a hard time learning or just can't get it then just email me. Be nice and ask polite and I will do what I can to help. ;) Good Luck!
You can contact me via email at: Kingx@insightbb.com
Final thoughts:
Well to end this tutorial I would like to say thanks to everyone who has helped me along the way and all the people who has provided me with the knowledge and patience that I needed to get as far as I have come. Big thanks to Anand V. for referencing his genius mind for this answer to my question. Much love. Big thanks to the moderators at the Webdeveloper forums and Tek tip forums you guys really know what the heck is up with developing! A shout out to my group at the King James Inc. we are almost there folks lets keep on keeping! Huge thanks to GOD and CHRIST for all the love and inspiration. Keep your heads up when you’re down, be safe, and be good.
Your friend,
Code One
-------------------------------------------------------------------------------------------------------------
Hey guys and gals if you want to you can rate this tutorial on a scale from 1 - 10 (horrible being 1, and Rad being 10), any comments are appreciated even if you say I'm a stupid loser cuz I don't care. ;)
Code One