PDA

Click to See Complete Forum and Search --> : buttons

tweetie37
09-18-2003, 08:14 AM
I am looking for a code to do this:
I want a button that says for example: Contact us
and when you move your mouse over it, it changes color and when click the button, it will go to the page I wanted (contact page). I want to have 4 buttons. Do I need 4 scripts for it and how do I relate them together so it works? Can someone help me? Thanks.
96turnerri
09-18-2003, 08:19 AM
this is a fading button

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function mOver() {
for (i = 0; i < 13; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40);
}
}
function mOut() {
document.myForm.button.value = " Click Me! ";
for (i = 0; i < 12; i++) {
setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40);
}
}
</script>

</HEAD>

<BODY>

<form name=myForm>
<input type=button name=button value=" Click Me! " onMouseOver='mOver()'' onMouseDown='document.myForm.button.value="Thank You!"' onClick='window.location="http://javascript.internet.com"' onMouseOut='mOut()'>
</form>

hope this helps
Charles
09-18-2003, 08:25 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
a {display:block; margin: 1ex; text-align:center; width:5em}
span.divider {display:none}

a:link, a:visited {border:outset 4px #aaa}

a:hover {background-color:#aaa}

a:active {border:inset 4px #aaa}
-->
</style>

<div>
<a href="fee.html">Fee</a>
<span class="divider">|</span>
<a href="fie.html">Fie</a>
<span class="divider">|</span>
<a href="foe.html">Foe</a>
<span class="divider">|</span>
<a href="fum.html">Fum</a>
</div>
Khalid Ali
09-18-2003, 08:26 AM
something like this
<button onclick="window.location.href = 'http://w3c.org'">W3C</button>
might work,although,a better choice will be using CSS simmulate a button and then set that style to an anchor tag.
Charles
09-18-2003, 08:28 AM
And note that the JavaScript method posted above will give you a dead link for the 13% of users who do not use JavaScript. One could set up the button so that the navigation part worked with just HTML and the color changes used JavaScript, but why bother. The CSS method is easier and gives you better results.
tweetie37
09-18-2003, 09:51 AM
Thanks Charles for the code. How do I change colors on those buttons? I want it to be a certain color and when go over it be another one.
Also, you mentioned using CSS. No idea!! Can you give me some leads or when I can find the code for this particular project. Thanks
pyro
09-18-2003, 10:00 AM
Did you try Charles code? That is exactly what it does...

If you want to change which color it is, just change the :hover background-color:

a:hover {background-color:#aaa}

Another example of this type of layout can be seen at http://www.webdevfaqs.com/layouts/layout1.htm
96turnerri
09-18-2003, 11:14 AM
with reagards to the email you sent me im not sure how to change the color on the code i gave you, to be honest with you id go with the css option given by Charles