|
HTML - Making A Link Out Of A <button> Tag
Hello,
I posted this on another forum, but didn't get a conclusive response... Is it possible to make an HTML <button> act as a link without using Javascript's onClick handler, or indeed any Javascript at all? I was thinking something like: <a href="some link"><button>GO!</button></a> would work, but it doesn't seem to. Thanks, Similar TutorialsHey all, apologies if this is in the wrong spot. I'm looking for a way to make a button/link that when clicked will bookmark my site. i.e. "Click HERE to bookmark this page." I've been tromping around google for an hour and have turned up nada. Any help would be greatly appreciated. Thanks so much. Hi, I made a div into a link by making the "a" tag into a block element. Now that I did that, I added text and images to the div, and now the link only works around the text, but fine over the image. How do I get the link to work over the entire div? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Website</title>
<style type="text/css">
.bbodytext {
margin:0;
position:absolute;
left:90px;
top:40px;
font-family:Arial;
font-size:9pt;
color:#7B7B7B;
width:212px;
height:43px;
}
.bheadtext {
width:200px;
height:20px;
left:90px;
position:absolute;
top:17px;
font-family:Arial;
font-weight:bold;
font-size:10pt;
color:#404040;
margin:0;
}
.link {
display:block;
top:0;
left:0;
width:333px;
height:100px;
position:absolute;
}
#bright {
top:0;
left:666px;
position:absolute;
background-color:#FFFFFF;
width:299px;
height:66px;
padding:17px;
}
#bright:hover {
background-color:#ECEFEF;
}
#bcenter {
top:0;
position:absolute;
background-color:#FFFFFF;
left:333px;
width:298px;
height:66px;
border-right:1px solid #DBDEDE;
padding:17px;
}
#bcenter:hover {
background-color:#ECEFEF;
}
#bleft {
top:0;
left:0;
position:absolute;
background-color:#FFFFFF;
width:298px;
height:66px;
border-right:1px solid #DBDEDE;
padding:17px;
}
#bleft:hover {
background-color:#ECEFEF;
}
#bottom {
height:100px;
width:999px;
position:relative;
box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-webkit-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-o-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-ms-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
-moz-box-shadow:rgb(168, 171, 171) 0px 2px 5px;
top:128px;
}
#wrapper {
height:635px;
width:999px;
top:0;
position:absolute;
left:50%;
margin-left:-499.5px;
}
body {
background-color:#DEE1E1;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="wrapper" >
<div id="bottom" >
<div id="bleft" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
<div id="bcenter" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
<div id="bright" >
<a class="link" href="http://www.google.com" ></a>
<img src="images/icon.png" alt="" >
<p class="bheadtext" >Lorem Ipsum Dolor</p>
<p class="bbodytext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec dapibus odio.</p>
</div>
</div>
</div>
</body>
</html>
http://alexc.awardspace.com/index.htm I made a div box into a link and in IE it works fine, only the outlined div is clickable. However in FF not only is the outlined div clickable, but the whole top part is. Its weird and I don't know whats wrong with it. Heres the code: html <body> <div id="main"> <a href="index.htm"><div id="logo"></div></a> </div> </body> </html> CSS body { background:url(images/cork.png); margin:0; padding:0; } #main { width:950px; height:750px; background:url(images/bg.jpg); margin:0px auto; } #logo { width:480px; height:90px; margin-left:45px; cursor:pointer; border:1px solid #000000; } I am having a bit of a problem. I need to replace a submit button with an image (addtocart.gif). It sounds easy enough, but for some reason when I change the coding, my link does not pop-up in a new window, as it currently does. I need the image to open up my shopping cart preview page. Any help would be greatly appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var mywindow;
var features='width=530,height=500,left=200,top=200,scrollbars=yes';
window.onload=function() {
document.forms[0].target='mypopup';
document.forms[0][3].onclick=function() {
makePopup();
}
}
function makePopup() {
if(mywindow) {
mywindow.close();
}
mywindow=window.open('','mypopup',features);
mywindow.focus();
}
</script>
</head>
<body>
<form method="post" action="http://ww11.aitsafe.com/cf/add.cfm">
<div>
<input type="hidden" name="userid" value="D745330"/>
<input type="hidden" name="price" value="19.95"/>
<select name="product">
<option value="Red shirt w/ logo (XS)">X-Small</option>
<option value="Green shirt w/ logo (S)">Small</option>
<option value="Blue shirt w/ logo (M)">Medium</option>
<option value="Red shirt w/ logo (L)">Large</option>
<option value="Green shirt w/ logo (XL)">X-Large</option>
<option value="Blue shirt w/ logo (XXL)">XX-Large</option>
</select>
<p>
<input type="submit" name="post" class="submit" value="submit"/>
</div>
</form>
</body>
</html>
Im having an issue in some browsers with making a whole cell in a table a link. I have simplified my code to that below for ease of troubleshooting here. Using the code below, and assuming you have two image files named AlphaThumb.jpg (approx 80x100 px) and Alpha.jpg (A larger version of AlphaThumb.jpg) in a folder with the html and css files I achieve the desired result in IE7, IE8 & in Lunascape6 (Ver 6.3.4). However Firefox (Ver 3.6.13), Safari (Ver 5.0.3) & Opera (Ver 11.00) all have the same issue, in that the link doesn't work. If anyone has any ideas I'd be grateful for some input. Regards, Stoney ------------- The Html code ------------- <html> <link rel="stylesheet" type="text/css" href="Stylesheet1.css" /> <body> <table border="1" class="aggregatestable"> <tr> <a href="Alpha.jpg" target=_blank> <td class="productalpha"> </td> </a> <td class="productname">Alpha</td> <td>Some random text about our product Alpha.</td> </tr> </table> </body> </html> ------------ The css code ------------ td.productname { width: 100px; height: 80px; } td.productalpha { background-image: url(AlphaThumb.jpg); background-repeat: no-repeat; background-position: center; width: 100px; height: 80px; cursor: pointer; } Hi, I am working on adding non java-script buttons on my website using CSS style sheets. I used a technique given at http://builder.com.com/5100-6371-5323375-2.html. I modified the colors a little but it is basically using technique 2 at this link. Everything works well with the exception of one issue. In Internet Explorer, when I press a link and then use the back button on the browser to return to the previous page, the link for the previous page is still selected and the button appears to still be "pressed". You can see this by going to http://www.apexmoves.com with internet explorer, clicking one of the buttons on the left side of the site, and then using the browser's back button. You will see that the link that was clicked is still selected and this button appears to be stuck in the down position. If you click anywhere else on the screen, the button is released. This is because the link for the pressed button is has the status of active. Does anyone have any ideas on how to solve this. Is that a way to make the status of this link "visited"? Any Ideas would be greatly appreciated. Thanks Brad Hi im not sure if this can be done i have created some buttons to use as links and once i put the a href code in a box appears around the button can i remove this and how plz you can see example of what i mean on my website i have made Home and Contact clickable but i want to remove the box thats around the button if possible http://dreamteam0708.co.uk/ for info: im coding my own html in notepad, not using any programs or anything and my hosting doesnt support php etc Hi, I'm working on a simple website in which I'm required to use two types of forms input on a webpage. I have decided to make a simple quiz which will be designed as follows; -------------------------------------------------------- Q1: The largest mammal on land is: (radio button choices) Q2: Please tick the two correct answers: (tick boxes, four available... only two correct) ---------------------------------------------------------- (BUTTON: Please click here for the answers) ... answers should appear once the above button is pressed... Answers: Q1: B Q2: A * C Is this possible in HTML? Sounds quite straight-forward but I'm no expert so forgive me.. Ps: Is it possible to design a radio button which, depending on the choice, the related-text will appear underneath on the same page? So if they select 'A' then paragraph 'A' will show, if they select 'C' then paragraph 'C' will appear (with the rest hiding)... Thanks! I want a link on the button. Means in my site I have a button Register and I want a link on the Button. How it could be possible. Thanks in advance Hi guys, I have a drop down box via the <select> tag and then a submit button next to it. I want it so that if the drop-down shows "page 1" or something and then you hit "submit" it links to page 1. Same for "page 2" etc.. Is this possible, and how can I do it please! Thank you for any replies posted! Hey, i want to have a button which when pressed notifies me, it is to tell me if a link is broken. I dont want it to open a new page though. Thanks in advance. Hello i need help getting a button to work in my website. It will be a link to another page. I have this html. I have three images.They are gifs. I also have three more in .png. I can make just about any kind of file. When i made the files i used transparency and interlaced. I'll attach images. I want one to appear when to mouse goes over it and one to appear when it's clicked. The attached ones are .png's. thanks Hello there, This is my first post and I'm no pro at web developement, so I would appreciate any help that you guys can offer! Basically I have made a pretty cool button in Flash, and it works fine -- I have inserted in into my Dreamweaver document fine, but I can't seem to figure out how to make this a link -- I want to make it that when people click the button, they are taken to another page of my site, so I just want to add a link to the SWF object I've inserted. Please could anyone shed some light on this for me please? How do I add a link? I know it can be done as you see Flash buttons that are links all over the internet (mainly ads!) -- so how do I do it (*using Dreamweaver)? Thanks in advance! Mike Can someone tell me why the "View Cart/Checkout" button on this page works in Mozilla but not IE7? http://www.usautomated.com/catalog/catalog.asp Thanks! I'm trying to have an input event also hyperlink to a page! Right now- this is what is happening: -Visitor hovers over an input-button image, this image changes -A second image on a different part of the page also changes when the visitor hovers what I want it to also do: -Visitor can click the button, and then go to a new page. Here is my code: HTML Code: <a href="http://google.com"><input id="A" type=image onmouseover="swap(this , srcA2 , srcXA)" onmouseout="swap(this , srcA , srcX)" value=" "></a> As you can see, I'm using both onmouseover & onmouseout tags. Right now, I'm also using a basic <a href=""></a> hyperlink in order to allow the visitor to click & go to a new page. This works in firefox just fine- but IE does not recognize the input button as a link. Are there any ways to solve this? I'm thinking I should use an OnClick event, but I don't know how to do this! Help would be greatly appreciated! Hi all, I would like to ask for your help here. How can I first have a few radio buttons on my page and when the user select one of those, a text box with a submit button will appear. The text box is for the user to key in some kind of code/password so that it will prompt the user to a url according to the code/password. Example: Code: YAH URL: www.yahoo.com Code: GOO URL: www.google.com And if the user keys the wrong code it will prompt a message box asking them to try again. If the user key the code wrongly for 3 times it will prompt to another url. Ive also attach an example of how it should look like. I would appreciate for your help. Thanks a lot! Hi anyone who could help ! In the following code by clicking on the right bottom corner of the image, a link to the destination site occurs. <img src="images/4ticket.jpg" border="0" usemap="#Map" width="203" height="90"> <map name="Map"> <area href="www.destination/play.php" shape="rect" coords="72, 56, 185, 77"> </map Now I would like to replace the link with a form submit button, as I need the value of the submit button (Play FREE!) to be posted to the destination site. Thanks for any help or hint Hi guys, As a person with VERY little HTML knowledge I getting very frustrated with a situation "I'm sure its a simple fix" that I hope you can help me with - there are 2 issues:- 1 - when you click on the Orange button on my website in IE the link doesnt work "it works when you right click - open link in a new tab" 2 - when you click on the Orange button on my website in Firefox - 2 tabs open instead of 1?? Any help would be very much appreciated - the link is http://www.twessential.com/newhome.html. If any files are need please let me know Many thanks hi guys! great day. i'm having problems getting the code for the submit button linked to my checkboxes. our professor wanted that every option or choice that we check on the check box, by clicking the submit button, the pop window should display "you have chosen (your choice/s that you have checked)" this is the code that my professor gave us. (just copy paste the code and open it) <!Doctype html public *-'W3C// DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content ="text/html; charset = ISO-8859" http-equiv="content-type"> <meta keywords = "begin javascript"> <script type="text/javascript"> function outputVariableValues() { var yourName= document.myform.name.value; window.alert ("Hello: "+ yourName); window.alert ("Your Comment: "+ document.myform.comments.value); window.alert ("Thanks for rating us: " + document.myform.rating.value); } </script> <script type="text/javascript"> document.write("www.Ricmer.Mylene"); window.alert ("Welcome to heaven on earth") </script> <title>Web Form01</title> </head> <body> <center><h1>Nikki Nikko Webpage</h1></center> <form name="myform" method="" action=""> <p><label>Name:<input type ="text" value = "jasmine" name="name" size="25"></label> <p><label>Comments:<br><textarea name = "comments" rows = "4" cols ="36">Enter your comments here. </textarea></label></p> <p><label>Rate our Website</label> <select name = "rating"> <option selected ="selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option>\ <option>3</option> <option>2</option> <option>1</option> <option>Awful</option> <input type = "button" name="submit" Value="Submit" onclick="outputVariableValues()"> <input type ="reset" value ="Reset" name="Reset"> </form> </body> </html> we're going to pass this activity tonight at 9pm. it's 4:12pm now..-_- this is our first time in html coding so i'm very sorry guys..and thanks in advance! I need an way to upload a file by clicking a link instead of button(<input type="file" name="somename"/>). This feature has been newly added to GMail, to attached a file we need to click a link. Any ideas or code of how this can be done are needed. Thanks |
|||||||