Hiding Border On HTML Button - html

I'm having a little trouble with a button I'm making as part of a SharePoint site. It currently appears like this http://imgur.com/n9M6ffX
I would like to edit my code so the grey border does not appear around the blue image but I've had no luck getting anything to work. My current code is pretty simple and can be found below:
<button onclick="HideShow()" type="button">
<img src="Training%20Libraries.png" style="width: 117px; height: 33px;"/>
</button>

Use
border: none;
for the button

Related

How to Link another page, at a certain point HTML

So I want the button to link to page 2 at a certain height, like Wikipedia
I've tried linking it but it doesn't seem to do anything
<div class="button1">
<button><a id="#areas.html#location1"></a>Button1</button></div>
CSS
.button1 {
position: absolute;
top: 28%;
left: 22.2%;
}
Page 2
This is what you need.
Just use a button with link to another page then div or a and give it name="location1" to go direct to that section of the page.
Button to another page
<button onclick="location.href='areas.html#location1'" type="button">Button1</button>
If your area.html file
<div name="location1">
content
</div>
Okay after some trial and error and using the comments I think I fixed it allowing it to use the tag (also removed the hyperlink underline and color)
Credit for helping goes to Raptor & AlwaysHelping
This is linking button
<button> Button words</button>
This is the target div
<div id="locationlink1"></div>
And the CSS for color changing the hyperlink color to black
a
{
color: #000000;
}

How to make a png file a button in html

I'm not a programmer by trade, but I'm trying to turn a PNG file into a button in html but im having trouble getting the button to be flush with the png in a way that doesn't look bad. I've googled many solutions so far but either i don't have the understanding to implement the fixes or my problems isn't what i think it is.
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px "><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center"
alt="Submit">
</button>
</a>
This is what the current code produces.
You could add the following CSS to the code:
button {
padding: 0;
}
img {
width: 100%;
height: 100%
}
This fits the png within the button and removes the button padding (buttons have padding unless you remove it). You could also add this to your inline html:
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px; padding: 0"><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center; width: 100%; height: 100%"
alt="Submit">
</button>
</a>
Side note.. you shouldn't wrap buttons in a tags. this is bad for seo, accessibility, and many other things.. Just wrapping your image in an a tag and styling accordingly will do what you're looking for whilst being compliant. A button isn't needed unless you're trying to submit a form of some sort -- and even in that case, don't wrap the button in an a tag
Use a class on your button and style it from within the style sheet using background.
<input type="button" class="button" ...>
then in your style sheet
.button
{
background: url(path/to/img.png) no-repeat ...;
cursor: pointer;
....
}
It is just always a good idea to separate your markup from your styles. I would also suggest that whatever the button actually does (unless it is just a link to something else), use javascript for that.

How to change the Text on the image?

Below is the image, where I have text on the image. I am wondering on how the text on the Image can be changed. Actually someone else wrote the code and I am not getting. Please Help me out Friends.
And this is the code which is working on this.
<div class="TabsV">
<div id="Tab0" class="TabV Selected" style="height: 86px;">
<a style="background-position: -8px -12px; padding-bottom: 70px;" href="javascript: SelectTab(0)"></a>
</div>
<div id="Tab1" class="TabV" style="height: 116px;">
<a style="background-position: -40px 0px; padding-bottom: 100px;" href="javascript: SelectTab(1)"></a>
</div>
<div class="TabVEmpty" style="height: 50px;"></div>
</div>
It looks like the text is part of the image.
So you need to edit the actual images and change the text there.
If you look at the stylesheet used in that page you will find something similar to
.TabV a{
/*in here you will see the url of the image being used
background:...
or background-image: url('..');
*/
}
It looks like the image itself contains text and it is applied via the TabV class - notice how the background-position coordinates changes between one tab and the other.
If you look in your CSS file, you should see something like:
.TabV
{
background-image: url(...)
}
What you need to do, therefore, is to manipulate the existing image used as background and add the text you want to that image. Then you need to modify the background-position of the corresponding anchor element. One way to do that with jQuery is:
$('#Tab0').attr("background-position","-16px 20px;"); //-16px and 20px are just an example
Where #Tab0 is the css selector for the first tab. #Tab1 would be the css selector for the second tab... "#<something>" maps to id="<something>" in the html markup.
The technique itself is called CSS sprites. You can read more about this technique here.
You can not! You must edit those image files in an image editor. The text from the tabs isn't coded in the html code.

Posterous Theming Image hover box

Within posterous when you hover on an image it displays a box enabling the user to download or view the full size image. Here is the example of how this should work.
I am trying to find out why this does not work in the theme I created Here. Any and all help would be greatly appreciated.
I took a quick look at your code. The span that's supposed to show up; 1 has no id associated with it and two is not showing when you hover over the image. Make sure your javsacript is correct. I think it is most likely being referenced wrong.
<span id="" class="show">
<div id="-dl3" style="font-size: 14px; position: absolute; right: 10px; bottom: 0px;">
<div id="-dl2" class="posterousGalleryLink" style="font-size: 14px; display: none;">Download this gallery (ZIP, null KB)</div>
</span>
something like this
http://jsfiddle.net/amkrtchyan/jCcnC/

Embed image in a <button> element

I'm trying to display a png image on a <button> element in HTML.
The button is the same size as the image, and the image is shown but for some reason not in the center - so it's impossible to see it all.
In other words it seems like the top right corner of the image is located at the center of the button and not at the top right corner of the button.
This is the HTML code:
<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>
Update:
What actually happens, I think, is a margin problem. I get a two pixel margin, so the background image is going out of the button. The button and the image are the same size, which is only 20px, so it's very noticable... I tried margin:0, padding:0, but it didn't help...
You could use input type image.
<input type="image" src="http://example.com/path/to/image.png" />
It works as a button and can have the event handlers attached to it.
Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.
<button style="background: url(myimage.png)" ... />
If the image is a piece of semantic data (like a profile picture, for example), then use an <img> element inside your <button> and use CSS to resize the <img>. If the image is just a way to make a button visually pleasing, use CSS background-image to style the <button> (and don't use an <img>).
Demo: http://jsfiddle.net/ThinkingStiff/V5Xqr/
HTML:
<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>
CSS:
button {
display: inline-block;
height: 134px;
padding: 0;
margin: 0;
vertical-align: top;
width: 104px;
}
#close-image img {
display: block;
height: 130px;
width: 100px;
}
#close-CSS {
background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
background-size: 100px 130px;
height: 134px;
width: 104px;
}
Output:
The simplest way to put an image into a button:
<button onclick="myFunction()"><img src="your image path here.png"></button>
This will automatically resize the button to the size of the image.
try this
<input type="button" style="background-image:url('your_url')"/>
Why don't you use an image with an onclick attribute?
For example:
<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
Add new folder with name of Images in your project. Put some images into Images folder. Then it will work fine.
<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
The topic is 'Embed image in a button element', and the question using plain HTML. I do this using the span tag in the same way that glyphicons are used in bootstrap. My image is 16 x 16px and can be any format.
Here's the plain HTML that answers the question:
<button type="button"><span><img src="images/xxx.png" /></span> Click Me</button>
Try like this format and use "width" attribute to manage the image size, it is simple. JavaScript can be implemented in element too.
<button><img src=""></button>
General Answer:
<button style="background: url('icons/close.png'); background-size:cover"></button>
Since currently selected answer has some issues, posting this answer to save people trouble.
Make sure to give your button the width/height necessary to see your image as well as possible adding a "background-position" attribute to make your image show up as intended.
REACT VERSION:
<button style={{backgroundImage: "url('icons/close.png')"}}></button>
To use Image as button create a button download button image and than open it in paint and note down the top left and right bottom coordinates
`<Img src =" button.jpg" usemap=" #button" >.
<map name = " # button " >.
<area shape ="rect" coords = " Top- left , bottom right "
href = " page you want to open by button" > `
You can use multiple< area> tag to create different button from just one image .
Note : There is one issue with this method that if you try to change the height and width of the image the pixels shift and your button won't work
For that change the button image size externally by photoshop or any other photo editor
That's it you have created your button without java script and with few lines of code
Buttons don't directly support images. Moreover the way you're doing is for links ()
Images are added over buttons using the BACKGROUND-IMAGE property in style
you can also specify the repeats and other properties using tag
For example: a basic image added to a button would have this code:
<button style="background-image:url(myImage.png)">
Peace