Linking pages using buttons

Hyper links are used to link different pages within a site and outside a site to each other. Same thing can be achieved by using a button. We can use a button to link different pages. We will connect the url of the new page to the onclick event of the button. We can do this by using a form and a submit button but there is no point in using a form for a hyper linking of pages. So here are some examples of using buttons to link different pages.
<input type=button onClick="parent.location='index.html'" value='click here'>

Another way of linking button

<input type=button onClick="location.href='index.html'" value='click here'>

Demo of two types of buttons with code



<input type=button onClick="location.href='../'" value='click here to visit home page'>



<input type=button onClick="parent.location='http://www.plus2net.com/'" value='click here to visit home page'>
Some time from SEO angle linking using a button is not a good idea as we loose the anchored text advantage of hyper linking. Read the article on search engine friendly page design to know more on this.

Managing from a child window

We can open a child window of different height and width by using JavaScript window.open command. We can pass any variable to child window and receive data from child window to main window.

Read More on Child window control in our JavaScript section.

We can display buttons in Child window and manage the main ( parent ) window by using buttons. We can make the main window navigate to different page from the child window.

Check this demo on using buttons to manage main window.


To display above button , source is here
<input type=button onClick=window.open("button-child.php","demo","width=550,height=300,left=150,top=200,toolbar=0,status=0,"); value="Open child Window">
Source code of the buttons used in Child window is here
<input type=button onClick="opener.location='http://www.plus2net.com/'" value='Make the Main window change'>
<input type=button onClick="opener.location='http://www.plus2net.com/html_tutorial/button-linking.php'" value='Bring the button linking tutorial again'>
<input type=button onClick="location='http://www.plus2net.com/'" value='Make the current window change'>
<input type=button onClick="self.close();" value="Close this window">

Number of User Comments : 15


Google+
rozel rosauro

22-03-2012

it is very helpful to me ...thanks
N G Sundar

14-05-2012

Exactly what I wanted. Did not want to submit the form; instead wanted to go to another page.
rozel rosauro

05-06-2012

it is very helpful to me ...thanks
chavda bhavna

07-08-2012

nice understanding exampels.good.thanks.
DekeR

19-09-2012

very helpfull - just ask google, and dont need read API or something like that, THX
harini

26-12-2012

Amazing article.. thanks for the help.
sanju

07-01-2013

how i can open a folder from pc by clicking button and change photo by selecting any photo
venkat

15-03-2013

very useful ....
Vengefull

16-07-2013

Good article, very helpfull. Thank you.
anis

19-04-2014

what is the different between location and parent.location
lyn

27-05-2014

Its really helpful :,) tq so much
wiki

10-07-2014

Thanks you sooo much,,, this is what i'm looking for...
makbul

28-09-2014

i want to generate click evant on a .cs with use of html button
JohnC

09-10-2014

Thank you all. This has enabled me to get our local site running. Do you have a book available for purchase or download? Once more thank you so very much.
rasool

30-04-2015

Tnx A Lotttttt !

Best Site Ever :)

Post Comment This is for short comments only. Use the forum for more discussions.






HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2015 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer