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">
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 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.
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.
I'm trying to create a simple rollover with an image to show a tip or info box/bubble.
I have a div wrapper holding the image src, and css to style/position the wrapper and child.
I just can't figure out how to make the img src interactive.
Here's the html:
<div class="wrapper">
<img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200">
</div>
I want to create a rollover with the image "wheat3.png" to show and info box at the side.
Here's the test link as well:
http://hatfielddesign.com/witbier_test/
Thanks.
Viewing the source code of the test link you've shown, seems like they uses Stellar.js to implement this effect. Take a read at the docs, they may help you ;)
I have a ASP:Menü in vertical style.
The MainItem is only 1 Button, deisgned by a Image (no text, pure image).
The ChildItems are normal Text.
Here is a very high zoomed screenshot: http://s2.imgimg.de/uploads/UnbenanntesBild661673a8png.png
Now, beacuse of the image, the childItems look very... strange, because the ChilItems begin, where the button is not there (very hard to explain, sorry).
I want to have the child menü begins at the pixel the button beginns after the white seperator in the image.
So, I want to move the whole childItems 2-4px to the right, how I can do this?
You need to add a left rule to the style of the sub-item, similar to the following:
.subitem
{
...
left: 1px;
...
}
You will need to figure out the exact spacing for yourself, as you have not included the actually styling for me to test with.