PDA

View Full Version : Linking With Buttons and MouseOver Effect


Diamax
11-14-2002, 05:31 PM
Hello guys!!

I made this button that I want to use it and link to some other website, but I cannot get it to work. here is the code for it:
=======================================================
<FORM>
<input type="submit" value="Go Here" style="BACKGROUND-COLOR: black; onClick="parent.location='http://www.google.com'">
COLOR: WHITE; FONT-FAMILY: arial; FONT-SIZE: medium;
HEIGHT: 28px; WIDTH: 95px"
onmouseover="this.value='OK', this.style.background='black';"
onmouseout="this.value='Go Here',this.style.background='black';"
</FORM>
=======================================================
As it stands right now it's useless.


However if I take the linking code part out at least the button shows up corectly and the MouseOver Effect works, but of course it doesn't link to any website, so it looks like this:
=======================================================
<FORM>
<input type="submit" value="Go Here" style="BACKGROUND-COLOR: black;
COLOR: white; FONT-FAMILY: arial; FONT-SIZE: medium;
HEIGHT: 28px; WIDTH: 95px"
onmouseover="this.value='OK', this.style.background='black';"
onmouseout="this.value='Go Here',this.style.background='black';"
</FORM>
=======================================================

Can you guys PLEASE help me make this button work and link to any site I want and have the MouseOver Effect at the same time, and keep the look of the button??

THANK YOU VERY MUCH!!!

giz
11-14-2002, 05:52 PM
At the very least the line :

onClick="parent.location='http://www.google.com'">

should be the last one before :

</form>

not dumped in the middle of the style code.

Diamax
11-14-2002, 07:51 PM
Hello Giz! and Thank You for the reply!

I added that in the place you said, but still it doesn't link to the site... now it looks like this:

=======================================================
<FORM>
<input type="submit" value="Go Here" style="BACKGROUND-COLOR: black;
COLOR: white; FONT-FAMILY: arial; FONT-SIZE: medium;
HEIGHT: 28px; WIDTH: 95px"
onmouseover="this.value='OK', this.style.background='black';"
onmouseout="this.value='Go Here',this.style.background='black';"
onClick="parent.location='http://www.google.com'">
</FORM>
=======================================================

I don't know what I'm doing wrong here...
Anymore suggestions?!

giz
11-14-2002, 08:18 PM
onClick="parent.location='http://www.google.com'">

I believe should be:

onClick="parent.location('http://www.google.com/');">

Jon Hanlon
11-14-2002, 09:29 PM
Two questions:
1) Why have type="submit" ?
2) Where is the parent?

If you say type="submit" (and don't cancel the onclick() event), then the browser attempts to submit the form (duh!)
which means that it's going to over-ride your onclick().

Unless you're using frames then you really shouldn't be using the parent object. Use self or window.


<FORM>
<input type="button" value="Go Here" style="BACKGROUND-COLOR: black;
COLOR: white; FONT-FAMILY: arial; FONT-SIZE: medium;
HEIGHT: 28px; WIDTH: 95px"
onmouseover="this.value='OK', this.style.background='black';"
onmouseout="this.value='Go Here',this.style.background='black';"
onclick="self.location='http://www.google.com'">
</FORM>

Diamax
11-14-2002, 10:09 PM
Thank You guys!!

Yes Jon your modifications to the code did exactly what I was trying to accomplish. THANK YOU!
Well originally I was using button instead of submit, but I was trying and trying everything and at one point I change that to submit.
I'm not an expert, so that's why I was asking for help.

Thanx A Lot Guys!! Works Now!!