I want to make buttons with image icons on WeChat mini-program. For example, play/pause, next, previous buttons in media player.
I tried as html:
<button>
<image src="../image/play.svg"></image>
</button>
But I cannot see any image on button.
How to make an image button?
For image buttons, just use <image> tag.
For example:
<image src="../image/play.svg" bindTap="play()"></image>
And set some button-like styles using WXSS.
image {
background: lightblue;
}
image:hover {
background: lightgrey;
}
Of course, your icon image should have transparent background.
I have achieved it with
<button bindtap = "mytap">
<image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"></image>
Search
</button>
You can also put inside the button only the image element
<button bindtap = "mytap">
<image src = '../../image/search-icon.png' style=" width: 35rpx;height: 35rpx;"> </image>
</button>
In javascript or typescript files put:
Page({
//...
mytap(){
console.log("clic")
}
})
For more details you can consult: Implement picture button in WeChat Mini Program
Related
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.
I am new to html.I need a delete button with animated style. I have used a gif image for animation. I want this image to be run when the user place the mouse over it. Currently, the gif image is running infinite.
How to make the image run when the user move the mouse over it. Help me with some solutions.
If you have any other transparent delete image, please provide, it can help me.
Here's the markup I tried:
<html>
<body>
<a>
<img src="https://i.postimg.cc/1RGh8PpK/delete.gif"
alt="Delete image" width="100" height="100" />
</a>
</body>
</html>
Head on over EZGIF to crop your gif and make it an appropriate size for a button:
Use your computer to take a static screenshot of the gif (you'll have to time it right):
Use HTML to hold both the static and animated image elements:
<img class='static_trash' id = 'static_btn' src='https://collaboratescience.com/stack/googs/trash_static.png' alt='Delete image' width='100' height='100' />
<img class='live_trash' id = 'live_btn' src='https://i.postimg.cc/1RGh8PpK/delete.gif' alt='Delete image' width='100' height='100' />
Use CSS to set live_trash to "display: none"
. live_trash {
"display" : "none"
}
Use JavaScript to change image source on hover:
Vanilla JavaScript:
let static_elem = document.getElementById("static_btn")
let live_elem = document.getElementById("live_btn")
static_elem.addEventListener("mouseenter", function( event ) {
event.target.style.display = "none";
live_elem.style.display = "block"
})
static_elem.addEventListener("mouseleave", function( event ) {
event.target.style.display = "block";
live_elem.style.display = "none"
})
Result:
You can play with crop sizing to get it better.
You can achieve this with JavaScript or CSS. All you need is a static frame from the gif.
JavaScript
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
const states = {
'default': "https://i.stack.imgur.com/mJHTA.png",
'hover': "https://i.stack.imgur.com/WwxRR.gif"
};
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', states.hover);
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', states.default);
});
<a>
<img src="https://i.stack.imgur.com/mJHTA.png" id="hover-img" alt="Delete image" width="100" height="100" />
</a>
CSS
Or, you can determine if the user if hovering over the element using the CSS pseudo-class :hover, but you will probably want to use a <div> or a <span> instead of a <img>.
.hoverable {
display: inline-block;
width: 100px;
height: 100px;
background: center url('https://i.stack.imgur.com/mJHTA.png') no-repeat;
background-size: contain;
}
.hoverable:hover {
background-image: url('https://i.stack.imgur.com/WwxRR.gif');
}
<a><span class="hoverable"></span></a>
JavaScript using data tags
Alternatively, you can associate the default and hover state with the element via data-* attributes.
You can utilize the mouseenter and mouseleave mouse events to alter the src of the image.
let img = document.querySelector('#hover-img');
img.addEventListener('mouseenter', function(e) {
img.setAttribute('src', e.target.getAttribute('data-hover-src'));
});
img.addEventListener('mouseleave', function(e) {
img.setAttribute('src', e.target.getAttribute('data-default-src'));
});
<a>
<img id="hover-img" alt="Delete image" width="100" height="100"
src="https://i.stack.imgur.com/mJHTA.png"
data-default-src="https://i.stack.imgur.com/mJHTA.png"
data-hover-src="https://i.stack.imgur.com/WwxRR.gif" />
</a>
a {
background-image: url("https://i.postimg.cc/1RGh8PpK/static-delete.png")
}
a:hover {
background-image: url("https://i.postimg.cc/1RGh8PpK/delete.gif")
}
I've designed a mobile video chat website UI in Sketch and used a plugin to convert the design into HTML and CSS. I need to turn what are now button images into actual buttons. Here is what the code looks like
I need to make this image with text into a button
</div>
<div class="startbutton">
<img anima-src="./img/iphone---during-chat-btn 1#2x.png" class="btn-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
<div class="start">
START
</div>
<button> click me! </button>
.button {
background-image: url ('/image/img1.jpeg') no-repeat;`enter code here`
cursor:pointer;
}
Here you can add the image background to a button which full the button background with an image.
Wrap it in a button tag. Or, make it look like a button with padding and border.
I've been trying to change the size of the image on my button.
Think of it like this: I have a button with an image on it, and it's currently way too big. I've tried scaling it down as such:
<img src = "Button.jpg" height: "50%"; width: "20%"> and this doesn't work, no matter what I put in as the height and width.
Even changing it to 20px and 50px doesn't do anything. I'd prefer not having to create a class because I don't know how to navigate button classes and I'm pretty sure there's a way just to do it like how I'm doing it now.
Also, it's not actually a button, it's part of a list.
<li><a href="https://www.google.com/" target="_blank">
(That's also another issue.)
OK NEW CODE FOR THE BUTTON WITH A CLASS:
<li><button class = "test"></button></li>
</ul>
And for my CSS:
.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}
You should apply custom height and width to the image, not to the button.
If you resize the button, the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
If you resize the image, the image WILL be resized, and the button will resize respectively to the image.
Run the following snippet for examples:
button {
padding: 5px;
background: #d95753;
border: 0;
}
.btn-size {
width: 30px;
height: 30px;
}
.img-size img {
width: 30px;
height: 30px;
}
<h1>
Initial styling:
</h1>
<button>
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
<img src="http://via.placeholder.com/350x150" />
</button>
<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
<img src="http://via.placeholder.com/350x150" />
</button>
You need to link to a css file in the header. in the css file you can then say: .class and then you can change the shit. So in the html file, you first should add a class to the button so that the css knows where you're talking about.
Your code should look something like this:
<img src="Button.jpg" height="50%" width="20%">
I think you have a wrong html syntax :)
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