Is it possible to replace the cursor icon apart from these:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
with my custom image that I designed in Photoshop? I know this is possible because I have seen some websites with cursor having custom image. Question is: How do I do it and whether it is standard approach? Can I be sure that it works across all browsers?
Yes, just do...
cursor: url(path/to/image.png);
jsFiddle.
Try this: cursor: url(image.png);
Look paragraph 'Property Values': http://www.w3schools.com/cssref/pr_class_cursor.asp
Yes it's. when i have finished your cursor image, just upload it on a host website (there are many on the web) then use the following css property to use it. Supposing you want to use it on images, just do :
img {
cursor: url(path to your hosted cursor image) ;
}
Related
Is there a way to make an image visible but have interactions pass-through.
For this example: We will use links as interactions on the page. I have a series of links on a page but in front of it I have an image. I want to be able to pass-through that image without interacting with it and click on the links behind it. Whether or not the links are visible that should not matter, i just want to be able to pass through the image in the front.
How would I go about achieving this?
What you are looking for is pointer-events: none; - MDN, CSS-Tricks
You might be looking for CSS 4's pointer-events CSS property. Set this property of img as none. eg:-
img {
pointer-events: none;
}
So I'm using Chrome and I really like their 'cursor: wait' style. I doubt this is possible but would it be possible to use as a background-image in a div, not on hover or where my mouse is? Or Is my only option to find the file and place it locally? The file seems like its a different file format so that would kinda complicates things.
It looks like it's using the OS animation (I get a Windows-looking spinner)
I dont know if its easily extracted from somewhere, but you can find something similar you can use however you wish from http://preloaders.net/
That's not chrome's cursor. It depends how are your mouse cursors set in windows. cursor: wait is simply telling browser which cursor should be showed when hovering over that element. Mine looks like this:
To use similar thing for background you would need a picture (can be a gif or you can animate it with CSS) and simple css.
.cursor-wait:hover {
background-image: url("image.png");
}
I'm trying to place a background image on this bootstrap site: http://rsatestamls.kaliocommerce.com/
But what happens, is that the background is behind everything. What I mean by that, is that there's some content I want to be -over- the background, but instead the background is everywhere. I'd just like for it to be on the sides and behind everything, not on top of everything.
This is what it looks like if I try using it: http://i.imgur.com/32cG2bw.jpg
This is why I'm using Bootstrap...I'm not great at design by any means. More of a Developer than a Designer.
So anyways, any ideas on how I can accomplish this? I'm looking for a similar affect to this background: gardeners.com
Just because I don't want to have a ton of whitespace.
What I've tried to do is add:
background:url("/images/art/AMLRWDBackground.jpg");
To the CSS, but that looks terrible. Any ideas? I'm not even sure where to start.
Thank you.
The way to do this would be to have all of your content in one frame with a css value of:
#frame {
background-color: #fff;
}
Once you have done this add the background to the body and it will work how you intend it to.
I have a normale jpg-photo and 2 textlink. When the user mouseover textlink 1 I would like to show a transparent png-photo on top of the jpg-photo, and when the user mouseover textlink 2, I would like to show another png-photo on top of the jpg. On mouseout the png should disappear again.
Possible? And can it be done with CSS alone or do I need javascript to?
Thanks in advanced.
Yes it is possible with JQuery, JS or CSS, depending on your requirements.
Good script to use is here:
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
You can use hover CSS selector to solve such kind of problems depending upon html layout of your page
#11:hover img {
display:inline:
Add other blocks
}
Your request can be done easily using the power of jQuery :)
I made something using jQuery and you can find it here
http://jsfiddle.net/xrmqq/
It is close to what you want to do.
I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))
Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)
Well there is pointer-events:none; but only few browsers modern browsers (and IE11) support it.
https://developer.mozilla.org/en/CSS/pointer-events
Yes, its possible
Use pointer-events: none along with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks propagate through to elements lying bellow.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example page with all the code.
No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a click event to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.
one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay.
That way the whole thing will be clickable , and the div will behave like a div