/    Sign up×
Community /Pin to ProfileBookmark

create link for a button?

Copy linkTweet thisAlerts:
Apr 11.2010

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….?

to post a comment
HTML

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@EinsteinsEyesApr 12.2010 — <a href="HOMEPAGE"> <img src="IMAGELOCATION"/> </a>

replace HOMEPAGE and IMAGELOCATION with the appropriate text.
Copy linkTweet thisAlerts:
@globegeniusApr 12.2010 — An easy way of doing it. Go to Google gadgets and type in [B]html / java script editor[/B] 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.
Copy linkTweet thisAlerts:
@sinsofpleasureauthorApr 12.2010 — 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!!!
Copy linkTweet thisAlerts:
@digitalwebApr 14.2010 — <a href="home.htm"><img src="button.jpg"></a>

This code help you to give link to return page button.
Copy linkTweet thisAlerts:
@sinsofpleasureauthorApr 14.2010 — thanks to everyone thats helped..All sorted. ?
Copy linkTweet thisAlerts:
@mjjttJan 27.2012 — 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?
Copy linkTweet thisAlerts:
@rtretheweyJan 27.2012 — First off, use:
<i>
</i>&lt;form method="get" action="example.htm"&gt;

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.
Copy linkTweet thisAlerts:
@Major_PayneJan 27.2012 — All the code shown is well and good except for those using uppercase where you may be coding to XHTML. ? 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/csslibrary/category/C1/

CSS Library Vertical CSS Menus: http://www.dynamicdrive.com/style/csslibrary/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/programming/css_style2/index.html

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links

http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-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-down-menu-jquery-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/04/01/the-right-way-to-make-a-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>[/CODE]

You can change the "p" tags to div tags and style as needed.
Copy linkTweet thisAlerts:
@mjjttJan 27.2012 — 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
Copy linkTweet thisAlerts:
@rtretheweyJan 28.2012 — 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:
<i>
</i>&lt;div class="widget widget_links"&gt;
&lt;h2&gt;1. Talk About Computers&lt;/h2&gt;
&lt;br&gt;
&lt;div style="text-align:right;"&gt;
&lt;form method="get" action="one.html"&gt;
&lt;input type="submit" value="Computers"&gt;
&lt;/form&gt;
&lt;br&gt;&lt;br&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@mjjttJan 28.2012 — 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
Copy linkTweet thisAlerts:
@mjjttJan 28.2012 — 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
×

Success!

Help @sinsofpleasure spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...