Can you have an image instead of text for a button? - google-maps

Hi I have a button on my webpage that creates a link popup for copying. Is it possible to use an image instead of text on the button? I would like to use the "Link" image (image of chains) that you can see on the main Google Maps webpage or something similar. Thank you.
<input type="button" value="Email Link" onclick="showLink()"/>

<input type="image" src="myimage.jpg" onclick="showLink()" />

Related

Changing an input button to an image (alt text not showing) HTML

I'm trying to swap out all my default submit buttons to image submit buttons. However, when I do this it still functions fine but there seems to be not text over the image like the value="Login" on the default button so my I was trying alt="Login" but it simply wasn't appearing. Anyone know why this is?
<form method="post" action="index.php">
<div id="userNameLoginDiv">
<p>Username:</p>
<input type="text" name="username" size="12">
</div>
<div id="userPasswordLoginDiv">
<p>Password:</p>
<input type="password" name="password" size="12">
</div>
<div id="loginBtnDiv">
<input type="image" src="IMAGES/button.png" alt="Login">
</div>
</form>
Because image inputs are server side image maps. They are designed to let the user pick a point on the image and send its coordinates to the server. The image itself is the information to be shown to the user, not some text.
The alt text is only shown if the image cannot be (e.g. if the URL to it is a 404 error or if the visitor makes use of screen reader software).
If you want a background image on a submit button, then use a submit button and set the background-image CSS property. (You may also want to set border, padding, et al).

dont Refresh page when click on html button

I have an ASP.NET web forms project.
In a Mastre page I have an input:button and input:text . when click on input:button ,page refreshed.
how can i solved it, I do not refresh a page because its not runat server contolr.
my html code in master page:
<li class="menusearch">
<input type="text" placeholder="جستجو..." class="txtsearch" />
</li>
<li>
<input type="image" src="/statics/images/search.png" class="btnsearch" />
</li>
W3C says that input type="image" defines a submit button with an image. Perhaps you should change that to button type="button" and then put an image element inside it. Ex:
<button type="button" class="btnsearch">
<img src="/statics/images/search.png" />
</button>
Then the button won't have a submit behavior, and it'll have an image inside of it. Alternatively, you could use CSS to set a background image on your button. See HTML / CSS How to add image icon to input type=“button”?

Creating a input link button

hello all a quick question..
i am building a static html page, and would like to like one page to another using a button, now using a link is the easier option but i would like the effect of a button without any javascript going off..
so i would like to use a input button but it to link to a html page like an tag can href.
i was thinking along the lines of this example but without the js..
<form>
<input type="button" value="Read more" class="button" onclick="window.location.href='testimonials.html'">
</form>
this doesnt work but i am looking for this functionality?? is it possible?
Just submit the form to the URL.
<form action="testimonials.html">
<input type="submit" value="Read more">
</form>
… but buttons are supposed to do stuff. Links go places. Don't send people mixed messages, use a link.
you've misspelled "onclick" :)
EDIT: if you want to avoid javascript, you can create a button-like link with CSS:
Read More
Try this code:
<form>
<input type="button" value="Read more" class="button" onlick="window.location='testimonials.html'">
</form>

Set the href of the submit input type

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">

Upload image by directly entering a image URL?

I have used a input file code to upload image to my wallpaper site..
<input type="file" name="img" id="img" />
Is there anyway to select a image without selecting image file..like entering URL to text box?
<input name="img" type="text" id="img" value="http://www.somesite.com/image.my.jpg" size="40" />
I tried its not working...please help me! Anyway to enter image url to text box except select browse button and selecting image file? help me i tries in different ways...
You will need to add support for this on 'somesite.com'. This is not something you can solve with HTML, it needs to be solved on the server-side.