How can I make the image inside the button fit better and higher quality?
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" style="height:16px;width:16px;"> </BUTTON>
Im using the image https://www.iconfinder.com/icons/174935/copy_icon .
Here is how it looks like with the code above.
I made a http://jsfiddle.net/e58s7jpy/ but don't show image here.
I wish i could post a image but need 10 reputation ;(.
you need to save the image with btter quality by enhancing the pixels in the path which you refer.
Hope this helps. If happy, vote the answer.
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
you can also slightly enhance by Background modification and padding.
Related
I am building a website and I'd like to add a link to a facebook page.
Designer has sent me a round image to represent the facebook link. Actually, the image is a rectangle, but the painting is round.
What I want is the pointer to change to the "link hand" only when over the round area of the image.
I could partially achieve that with this:
.imgFacebook {
border-radius:50%;
height:50px;
}
However the result I'm getting is: it is working for the image's top-side. In the top side, when I move the mouse outside the round, pointer gets back to an arrow.
The bottom side is still considering the image as a square image and changing the pointer outside the round design to a "hand", representing a link.
I have tried to set the border radius individually for each corner (top-left/right and bottom left/right), with no success.
So, does anyone knows how can I get a round area in my image as a link?
Thanks in advance
After some searches using different keywords, I was able to find a "how to" in this link.
http://jsfiddle.net/6UYTL/2/
I just had to add the image inside the div. As for the image I have used some style to make it display round as well.
<a href="http://www.wherelionsroam.co.uk" target="_blank">
<div id="a">
<asp:Image ID="imgLinkFacebook" runat="server" CssClass="imgFacebook"/>
</div>
</a>
.imgFacebook {
border-radius:50%;
height:50px;
}
Thanks anyway.
how to install it when you walk across the image change the mouse cursor to be my heart this picture while I was in the picture ?
thank youenter image description here
as i understand, you want when you hover over the image, the default cursor to change to a heart.
so use this , and instead of the stackoverflow favicon.ico use your heart image
img {
cursor:url(http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico), auto;
}
<img src="http://placehold.it/350x150">
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
Hi i was going through a website where they used a very unique (according to me) background. they are mixing a color with an image and using it as background. the image is like
Then they are mixing some yellow color in it & it become like this
When i went through the code they were using something like this
background: #f6b93c url(bg1.png);
but it did not work for me!
Please help me out?
That is nothing but a short hand syntax
background: #f6b93c url(bg1.png);
So the above code simply means
background-color: #f6b93c;
background-image: url(bg1.png);
For more info on background short hand syntax
Demo
a png image with transparency and bg color will do the trick,
Otherwise if it is a jpeg,
the color will fill the rest of the part(for eg:in a div), the image wont cover.
what was happening with this background: #f6b93c url(bg1.png);
fill the color #f6b93c then on the top of that place the image, so it was a %0%(for eg.) transparent image, this will end up with a mixer of both
with latest CSS3 technology, it is possible to create texured background. Check this out: http://lea.verou.me/css3patterns/#
but it still limited on so many aspect. And browser support is also not so ready.
your best bet is using small texture image and make repeat to that background. you could get some nice ready to use texture image here:
http://subtlepatterns.com
The image bg1.png does not seem to be in baseurl. You should try relative url. eg. if you have image inside 'images' folder, "images/bg1.png" should work.
Is it possible to create a somewhat irregular shaped button.
My button has the following css which makes it a simple rectangle.
.btnclass {
width:100;
height:40;
}
but it want to make look more like this:
______________________
| ___________|
| |___________
|______________________|
Any clever ideas to accomplish this with CSS?
I don't think you can, your better off using an image that's shaped as you want
Not really without a bunch of CSS hackery, your best bet is to use images.
If your attempting to do so for form buttons look at using the following
<input type="image" src="image_path.png" alt="image description" />
Go with an image button. <input type="image" ... /> or <button><img src="" /></button> If not, the suggestions below aren't optimal but that's because an image is probably the most optimal solution.
Setting a background-image with the desired shape. I think this is the most pure solution so go for this.
background-image: url(whole-image.png);
Setting a background color and a small background-image located at the top right corner. The solution is something similar to the "rounded-corner-hack" out there.
background: #<button-color> url(small-image.png) top right no-repeat;