I have a default button. So now how do I make it a button image? So when you click on the button the normal thing happens. What I just want is an Image on the button. Thanks.
You may try this:
<INPUT TYPE="image" SRC="image location" ALT="SUBMIT">
Try putting an image instead of a button and handle its onclick event.
You can use an image as a button by specifying the src property:
<input type="image" name="submit" value="submit" src="images/button.gif" />
you could try:
<button style="display:block; background: url(/path/to/image.png) no-repeat center;">
Push me!
</button>
you can use javascript with some logic.
create one button with style attribute style="display:block"
also create required image just next to button with style="display:none"
onclick of button call javascript function.
function disphide()
{
btn.style.display='none';
img.style.display='block';
}
This should work
Related
Could I have something like <INPUT TYPE="SUBMIT" NAME=submit VALUE=Submit>, but instead of being a submit button, it could be an image? Is there something like href?
The simplest way is to use an image as a submit button employing the HTML form tag.
<input type="image" src="IMAGE.GIF" alt="Submit button">
However, you can also use Javascript for more robustness
<a href="javascript:document.your_form_name.submit()">
<img src="IMAGE.gif" alt="Submit this form" name="sub_but" />
</a>
HTML already got it:
<input type="image" src="myimage.png" />
Clicking it is exactly like clicking a submit button, instead of value you define src and the coordinates of the click are also sent to the server.
Official documentation.
Edit - while the form submission itself is the same, there is one difference between <input type="submit" /> and <input type="image" /> which is the value sent to the server for the clicked button. With ordinary submit button, the value of the button is sent alongside its name and can be then used to know if the form has been submitted, for example. In case of image input, each browser behaves differently, some send the value some send coordinates but you can't rely on this anymore. So, if you depend on the submitted button value in the server side code using image button is not good idea.
<input type="image" src="image.png" /> does exactly what you ask. You can't rely on the name attribute for it though (for example if your server-side code checks for it as a reference for the form being submitted), because the browser sends name.x and name.y for the coordinates clicked.
That aside, the image input type is essentially the same as a submit button for most purposes.
You can use image in place of showing default submit button.
form input[type=submit] {
background : url("submit.png") no-repeat center center;
width : 115px; /* As per requirement */
height :52px; /* As per requirement */
border : none;
color : transparent;
}
Please note that type="image" support is lacking in some browsers so above mentioned styling is a safe way.
You can do like this, in 'scr' you can put your image link; it would be like image button.
<input type="image" src="images/submit.jpg" value="Submit" alt="Submit">
I have buttons on a page that look like:
<p>
<a href="view.php">
<input type="button" name="view" value="View Database" />
</a>
</p>
IE does not support these buttons or multiple buttons I am not sure which one. Does anyone know how to fix this to work with IE?
Embedding a button within an <a> tag is not normally done, and really doesn't make any sense. If you want your link to look like a button, then just use the <input> tag with some script on the onclick event, or use css to make your link look button-ish (start by using display:block or display:inline-block);
You can't put an input into the tag, instead, you can create a form, and change your button to a submit one. Then you can choose the target url in the form, like this:
<form action="view.php">
<input type="submit" name="view" value="View Database" />
</form>
I would recommend this over using javascript, because buttons are not designed for navigating a site. If you want to submit information, which is what they are used for, you won't be able to do it so cleanly using javascript.
What exactly are you trying to achieve? If you want a custom button to redirect to view.php, you can use onclick:
<input type="button" name="view" value="View Database" onclick="window.location.href='view.php';" />
or something similar.
<input type="button"
onclick="javascript:document.location='view.php';"
value="View Database"/>
Try with this ugly monster:
<input type="button" name="view" value="View Database" onclick="javascript:window.location='view.php'"/>
i am using following code to set an image as submit button
*<input type="submit" src="submit1.jpg" alt="submit Button"onMouseOver="this.src='submit1.jpg'">*
but i actually did not know at which place in whole code to put this line of code because i put it after but it is not working
at which place i put this code there appear "submit query" but i want it to submit query at buuto i also use
input type="image"
actually i want to ask from which place i start this code "from which line?"
Change type from input to image and add value as submit:
<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">
This is complete HTML document:
<form name="someform" action="http://www.google.com">
<input type="image" width="100" value="submit" src="image1.png" alt="submit Button" onMouseOut="this.src='image1.png'" onMouseOver="this.src='image2.png'">
</form>
Note that "onmouseout" event is used to bring the button to previous form when mouse is not over
Besides <input type="button" value="Click me" />, <input type="submit" value="Click me" />, <a>Click me</a>, is there another way that can make "Click me" clickable?
With Javascript and CSS, you can make almost everything click-able.
<img src="photo-thumbnail.jpg" onclick="popup_image('photo.jpg');" style="cursor:pointer;" alt="" />
Setting cursor:pointer will make an element look clickable.
But again, that will only work if Javascript is enabled.
You can use Javascript:
<span onclick="...">Eat me</a>
This of course only provides the reaction to the click, if you want to make it look clickable also you have to add some styling.
By clickable do you mean something other than that it causes JavaScript onClick events to fire? Any DOM component should do that. If you want to change the cursor to indicate that something will happen when text is clicked, you can do that with CSS.
Hey guys I want a form to be submitted but it just won't work in IE. Altough in mozilla and other browsers it is working. The code:
<input type="image" name="zoeken" src="knop_go.jpg" value="zoek" alt="zoek" />
What's the solution for this problem ?
It does work — it just doesn't send the value, just the co-ordinates.
If you are testing to see if that button each clicked, look to see if an x or y co-ordinate is set (as well as testing for the value).
A possible workaround would be a regular button with a css style for the image:
<form action="blah.aspx" method="post">
<input type="submit" class="button" name="zoeken" value="zoek" />
</form>
And in css:
.button {
border: 0px;
background: url("./knop_go.jpg");
width: 100x;
height: 60px;
}
You could try this inside a form tag (in fact, this will work):
<button type="submit">
<img src="btnaceptar.jpg"/>
</button>
OK, update, it works IF I press the button, but if I press enter, it still doesn't work...
fixed it by checking if another field isset, now it works...
But I saw if you don't press the submit button, he doesn't send a value.