Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Apr 2004
Posts: 573
Reputation: Dark_Omen is an unknown quantity at this point 
Solved Threads: 5
Dark_Omen Dark_Omen is offline Offline
Posting Pro

buttons in html

 
0
  #1
Feb 2nd, 2006
Hello,
how do you add a custom button to a webpage and link it to another page? ANother question is how can you make the button rollover when someone's mouse is over the button and when they click the button? Would I need javascript?
Thanks
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: buttons in html

 
0
  #2
Feb 3rd, 2006
To create a button, use the "input" tag, with the type attribute set to "button":

<input type="button" id="myButton" />

To make it perform an action, including navigating to another site, code the "onclick" attribute. The value will be a JavaScript function you've written and included elsewhere in the document (in the HEAD section, within SCRIPT tags), or will be inline JavaScript itself:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <input
  2.    type ="buttton"
  3.    id = "myButton"
  4.    onclick="self.location='destination_page.html';" />

However, might I suggest another technique entirely? Use standard hyperlinks. Using CSS, you can make them look and behave exactly like buttons, with no JavaScript.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. a:link, a:visited
  5. {
  6.   float: left;
  7.   margin: 2px 5px 2px 5px;
  8.   padding: 2px;
  9.   width: 100px;
  10.   border-top: 1px solid #cccccc;
  11.   border-bottom: 1px solid black;
  12.   border-left: 1px solid #cccccc;
  13.   border-right: 1px solid black;
  14.   background: #cccccc;
  15.   text-align: center;
  16.   text-decoration: none;
  17.   font: normal 10px Verdana;
  18.   color: black;
  19. }
  20.  
  21. a:hover
  22. {
  23.   background: #eeeeee;
  24. }
  25.  
  26. a:active
  27. {
  28.   border-bottom: 1px solid #eeeeee;
  29.   border-top: 1px solid black;
  30.   border-right: 1px solid #eeeeee;
  31.   border-left: 1px solid black;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <a href="#">Button 1</a><a href="#">Button 2</a><a href="#">Button 3</a>
  37. </body>
  38. </html>

Replace the "#" sign in the href tags, with the actual URL of the target page.

This technique will accomplish all your stated goals.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 573
Reputation: Dark_Omen is an unknown quantity at this point 
Solved Threads: 5
Dark_Omen Dark_Omen is offline Offline
Posting Pro

Re: buttons in html

 
0
  #3
Feb 3rd, 2006
What about doing it without javascript. Like i have a button that I made, how can I put that on my page, and make it go to another page. Do you use </button> tags, and if you can how would you set the image as the button?
I like the css version, very clever.
Thanks
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 239
Reputation: extofer is an unknown quantity at this point 
Solved Threads: 5
extofer's Avatar
extofer extofer is offline Offline
Posting Whiz in Training

Re: buttons in html

 
0
  #4
Feb 3rd, 2006
Buttons are made with <form> tags. in it, you specify the destinations when it's presses. As for as rollovers, yes, there are custom bottons in javascript you can use.
Gabriel Villa
software development/ IT support consultant
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: buttons in html

 
0
  #5
Feb 3rd, 2006
No, no no. Read the first part of my first reply. Buttons are made with "input" tags, and can be made to perform navigation tasks with the "onclick" attributes. Re-read the first part of my first reply.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2004
Posts: 573
Reputation: Dark_Omen is an unknown quantity at this point 
Solved Threads: 5
Dark_Omen Dark_Omen is offline Offline
Posting Pro

Re: buttons in html

 
0
  #6
Feb 3rd, 2006
I found a solution without using javascript:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <p><a href="#"><img src="some_image" width="150" height="50" border="0" id="button"/></a></p>
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

Re: buttons in html

 
0
  #7
Feb 3rd, 2006
But that isn't a button... that's an image within a hyperlink.

Yes, if you want a hyperlinked image, you simply... make a hyperlinked image. :rolleyes:
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box bug calendar cart checkbox class codes column createrange() css cursor date debugger decimal design dom download dropdown element embed enter error explorer firefox focus form frameworks getselection google gwt hiddenvalue hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 object onmouseover paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select shopping size software sql text textarea toggle unicode w3c website window windowofwords windowsxp wysiwyg
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC