+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: HTML noob How to turn this button into a link? (/showthread.php?tid=5706336)
HTML noob How to turn this button into a link? - Tomodachi - Aug 29, 2017
I'm not a practiced programmer or familiar with much of HTML. Just need some quick help.
Code
<h3 style="margin-top:50px;"> <a id="share3" style="font-weight:500;"> <img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /> Click here</a></h3>How would I make the "Click here" (which is a button by the way) redirect to a link? I tried <a href=""> but it broke the code.
* - Nachfolger - Aug 29, 2017
Onclick attribute. Below is an example of how you could use it. Place the "onclick" inside the element tags for the element you want to capture the onclick from. Pretty cool thing to use when "coding" on the fly.
Code
<h3 onclick="location.href='www.google.com';"></h3>Also, please avoid using inline-styling. It's absolutely aids.
* - SIM-82498 - Aug 29, 2017
Code
<h3 style="margin-top:50px;"> <a id="share3" style="font-weight:500;">
<a href="http://www.google.com"><img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /></a></h3>* - Tomodachi - Aug 29, 2017
(Aug 29, 2017 04:54 PM)Dervie Wrote:Code<h3 style="margin-top:50px;"> <a id="share3" style="font-weight:500;">
<a href="http://www.google.com"><img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /></a></h3>
This turns it from this
https://i.imgur.com/BUX1xe2.png
to this
https://i.imgur.com/bdFtoKm.png
* - Nachfolger - Aug 29, 2017
(Aug 29, 2017 04:59 PM)Tomodachi Wrote: This turns it from thisI don't see why you're using an image inside a <a>, let alone all inside an H3. Which is for TEXT.
https://i.imgur.com/BUX1xe2.png
to this
https://i.imgur.com/bdFtoKm.png
use what I posted.
* - TyrantKingBen - Aug 29, 2017
(Aug 29, 2017 04:53 PM)Nachfolger Wrote: Onclick attribute.
Code<h3 onclick="location.href='www.google.com';"></h3>
Also, please avoid using inline-styling. It's absolutely aids.
Also, please avoid using inline-scripting. It's absolutely aids.
* - Tomodachi - Aug 29, 2017
(Aug 29, 2017 05:01 PM)Nachfolger Wrote: I don't see why you're using an image inside a <a>, let alone all inside an H3. Which is for TEXT.
use what I posted.
Sorry. I have no experience with HTML whatsoever. I'm just trying to get by on using some ripped code.
Code
<h3 style="margin-top:50px;">
<a id="share3" style="font-weight:500;">
<img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /> Click here</a></h3>
<h3 onclick="location.href='www.google.com';"></h3>I used it like this and it didn't do anything. Could you elaborate on where to put the code if it isn't too much trouble?
* - Nachfolger - Aug 29, 2017
(Aug 29, 2017 05:05 PM)Tomodachi Wrote: Sorry. I have no experience with HTML whatsoever. I'm just trying to get by on using some ripped code.I understand you're new and still learning. Not hating on you for that, but I mean use some basic common sense when coding.
Code<a id="share3" style="font-weight:500;">
<img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /> Click here</a></h3>
<h3 onclick="location.href='www.google.com';"></h3>
I used it like this and it didn't do anything. Could you elaborate on where to put the code if it isn't too much trouble?
The <h3> tag I posted was an example of what you should use. Copy and paste this into where you have your stuff.
Code
<a id="share3" style="font-weight:500;" onclick="location.href='www.google.com';">
<img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" />Click here</a></h3>When a user clicks on the element where the "onclick" is assigned, the JavaScript code is executed. "location.href" changes the browser location to google.com (in this example)
Again, the reason I said to use some common sense was because it's an example of how to use it. I know you're new to HTML, but it shouldn't even require common sense to grasp that it was an example. Feel free to ask any other questions.
Also, the reason it didn't work was because you couldn't click on the <h3> element as it had no text inside it. If you were to write something inside there and then click it, it should work. Just a btw.
* - TyrantKingBen - Aug 29, 2017
(Aug 29, 2017 05:08 PM)Nachfolger Wrote: I understand you're new and still learning. Not hating on you for that, but I mean use some basic common sense when coding.
The <h3> tag I posted was an example of what you should use. Copy and paste this into where you have your stuff.
Code<a id="share3" style="font-weight:500;" onclick="location.href='www.google.com';">
<img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" /> Click here</a></h3>
Code
<h3 id="share3" style="font-weight:500;" onclick="location.href='https://www.google.com';">
<img id="heartbeat" src="img/heart-full-red.svg" style="width:16px !important; height:16px !important; margin-right:5px; margin-bottom:-2px;" />Click here</h3>* - Riggs - Aug 29, 2017
(Aug 29, 2017 05:08 PM)Nachfolger Wrote: I understand you're new and still learning. Not hating on you for that, but I mean use some basic common sense when coding.
Give him a break, he's not a second trimester fetus. We all started somewhere.