www.webdeveloper.com
Results 1 to 13 of 13

Thread: create link for a button?

  1. #1
    Join Date
    Apr 2010
    Posts
    3

    create link for a button?

    Hi, im very new to html and i have a website for which id like to include a 'return home' button. I already have a button image obtained through a free website. But i need the html to make this image into a link that will return the buyer to my home page when its clicked.. Can anyone help pls....?

  2. #2
    Join Date
    Apr 2010
    Posts
    25
    <a href="HOMEPAGE"> <img src="IMAGELOCATION"/> </a>

    replace HOMEPAGE and IMAGELOCATION with the appropriate text.

  3. #3
    Join Date
    Apr 2010
    Location
    Matrix
    Posts
    3
    An easy way of doing it. Go to Google gadgets and type in html / java script editor into the search box on the page. When you find the one you want add it to your home page. You can add images to it and insert a url . After you add an image run your mouse over the pic holding your mouse down. The link chain will then highlight. Click on it and add your url. Then click the save icon. You can then open the html icon and copy the code and put it were ever you like. Its a great little tool for developing.

  4. #4
    Join Date
    Apr 2010
    Posts
    3
    I tried this (copied and pasted) and changed the wording as you said but it just came up with a picture of a broken file.!

    I read on a website the following

    How To Make the Button
    Here are the commands I used to place the button above:

    <FORM METHOD="LINK" ACTION="page1.htm">
    <INPUT TYPE="submit" VALUE="Clickable Button">
    </FORM>

    If you've already read the tutorial on forms you already know most of this. For those of you who don't, note this: The first command (the FORM command) has three parts. Here's what each part means:

    * FORM tells the computer a form item is going here.
    * METHOD tells the computer how to handle the form command. In this case, you are making a link.
    * ACTION denotes what connection you want to make. Here we made a connection to something called "page1.htm."
    Note: When using these buttons, make links using the entire URL: http://www.etc.etc.etc.

    The second command (the input command) places the button. It has two parts, and here's what they mean:

    * INPUT TYPE tells what type of input will occur (duh!). In this case you want to "submit" something. You see, the FORM command above is looking for a link. Here you are "submitting" a link. Get it?
    * VALUE is the wording that appears on the button.

    Finally, end the whole thing with this:

    </FORM>
    It's simple and it looks nice.

    Now if i change the wording n URL it works but it does not have my image for the button just the plain white style like the submit ones on here
    Thank you if any one can help me!!!

  5. #5
    Join Date
    Apr 2010
    Posts
    5
    <a href="home.htm"><img src="button.jpg"></a>
    This code help you to give link to return page button.

  6. #6
    Join Date
    Apr 2010
    Posts
    3
    thanks to everyone thats helped..All sorted.

  7. #7
    Join Date
    Jan 2012
    Posts
    4
    I have used the

    <FORM METHOD="LINK" ACTION="page1.htm">
    <INPUT TYPE="submit" VALUE="Clickable Button">
    </FORM>

    structure detailed in this thread, but having couple of problems creating multiple (4) buttons

    minor one that if I finish with </FORM>, buttons don't work (but do work if I omit)

    The buttons display ok, but

    Even tho' I change the ACTION= instruction to a different webpage, or to an external webpage, each button just goes to the destination in the first button.

    Is there more code I need to add?

  8. #8
    Join Date
    Mar 2011
    Posts
    1,109
    First off, use:
    Code:
    <form method="get" action="example.htm">
    because "LINK" is invalid. Second, you'll need separate <form>s for each button. If that's what you're doing, post all of your code so people can check it out.
    Rick Trethewey
    Rainbo Design

  9. #9
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,199
    All the code shown is well and good except for those using uppercase where you may be coding to XHTML. :P Your "Home" button should be part of the navigation menu placed on all HTML pages. No "form" tags need to be used for this. Take a look at these:

    Nav Menus (See following sites for navigation menus):

    CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/cs...y/category/C1/
    CSS Library Vertical CSS Menus: http://www.dynamicdrive.com/style/cs...y/category/C2/
    http://www.dynamicdrive.com/dynamicindex1/
    http://www.cssplay.co.uk/menus/
    How to Style an Unordered List with CSS: http://www.webreference.com/programm...le2/index.html

    How To:

    http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
    http://www.creativepro.com/article/d...vigation-links
    http://efuse.com/Design/navigation.html
    Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/
    Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

    Sexy Drop Down Menu w/ jQuery & CSS: http://www.noupe.com/tutorial/drop-d...query-css.html
    NavDock jQuery Plugin (Ver 1.5.1): http://plugins.jquery.com/project/NavDock
    Making CSS Rollover Buttons: http://www.elated.com/articles/css-rollover-buttons/

    The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/...dropdown-menu/

    If you just want the one button for "HOME", easier:

    Code:
    Image Link:
    
    <p><a href="relative path to index.html" title="HOME"><img style="width: XXpx; height: YYpx; border: 0;" src="relative path to image" alt="Text Description"></a></p>
    You can change the "p" tags to div tags and style as needed.
    Last edited by Major Payne; 01-27-2012 at 10:51 AM.

  10. #10
    Join Date
    Jan 2012
    Posts
    4
    Thanks a lot for your replies

    This is my code - want to send viewer to 3 different web sites depending on which button they click.

    But with this code all buttons lead to first option (one.html)

    I tried changing code to lower case but still same problem

    Changed LINK to GET but again no change.

    (Minor puzzle that if I change VALUE="Computers> to VALUE="Computers"> it then displays the style command from next line as text??)

    This is my code so far

    <div class="widget widget_links">
    <ul>
    <h2>1. Talk About Computers</h2>
    <br>

    <div style="text-align:right;">

    <FORM METHOD="get" ACTION="one.html">
    <INPUT TYPE="submit" VALUE="Computers>
    "style="width: 150px; height: 40px;
    font-size:20px; font-weight:bold; color:black;background-color:white;"

    <br><br>
    </li>
    </ul>
    </div>


    <br>

    <div class="widget widget_links">
    <ul>
    <h2>2. Talk About Money</h2>
    <h4>Anecdotes and Stories</h4><br>

    <div style="text-align:right;">
    <FORM METHOD="GET" ACTION="http://www.talkingeasy.com/30money.html">
    <INPUT TYPE="submit" VALUE="Money>

    "style="width: 180px; height: 40px;
    font-size:20px; font-weight:bold; color:black;background-color:white;"

    </li>
    </ul>
    </div>

    <br>

    <div class="widget widget_links">
    <ul>
    <h2>3.Books About Money</h2>
    <h4>Book Excerpts</h4><br>

    <div style="text-align:right;">
    <FORM METHOD="GET" ACTION="http://www.bitsofbooks.com/30money.html">

    <INPUT TYPE="submit" VALUE="Money>
    " style="width: 150px; height: 40px;
    font-size:20px; font-weight:bold; color:black;background-color:white;"
    </li>
    </ul>
    </div>

    Appreciate your help

  11. #11
    Join Date
    Mar 2011
    Posts
    1,109
    The immediate problem is that you aren't using the closing </form> tag for your buttons and you're misplacing some other tags. Each one should look like:
    Code:
    <div class="widget widget_links">
    <h2>1. Talk About Computers</h2>
    <br>
    <div style="text-align:right;">
    <form method="get" action="one.html">
    <input type="submit" value="Computers">
    </form>
    <br><br>
    </div>
    Rick Trethewey
    Rainbo Design

  12. #12
    Join Date
    Jan 2012
    Posts
    4
    Hi

    Yes I agree you'd expect a </form> closing and I originally coded it that way
    but when I put it in, it disables the button completely
    (When you click on it, nothing happens)

    when I take it out, back to same situation - all buttons go to one.html

  13. #13
    Join Date
    Jan 2012
    Posts
    4
    OK the problem's in the style command I used

    style="width: 150px; height: 40px;
    font-size:20px; font-weight:bold; color:black;background-color:white;"

    when I take that out and put in the closing </form> it directs where it's supposed to

    apologies, my stupidity

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles