I would like to change the hotspot of a mouse pointer, which we've changed the icon using a .cur file, to be in the bottom right of the image, rather then the top left.
Pretty much like an inverted arrow cursor, the designers/boss have come up with a nice design which almost requires this.
Is it possible to change the hotspot of a mouse cursor on a web page?
I have not tested it, got it from developer.mozilla.org:
Support for the CSS3 syntax for cursor values got added in Gecko 1.8beta3; it therefore works in Firefox 1.5. It allows specifying the coordinates of the cursor's hotspot, which will be clamped to the boundaries of the cursor image. If none are specified, the coordinates of the hotspot are read from the file itself (for CUR and XBM files) or are set to the top left corner of the image. An example of the CSS3 syntax is:
cursor: url(foo.png) 4 12, auto;
Link to CCS3 cursor
It's not possible, and I'm glad - I think you'd only frustrate your users with this.
Edit: I was wrong - I didn't think this was possible - I still don't think you should do it though.
You can't. And as most people here I'd tell you to not do it even if you could...
However, I could imagine something like this for very specific cases like the page of some artist, or for a game cursor, or a sort of 3D-like map with the cursor pointing down. Now if you really need a special cursor for a media oriented site, as opposed to an information site, I'd hide the cursor, with a blank cursor file and use some Javascript to attach a floating image over the cursor so it "looks like" the hot spot is someplace else.
Of course your sites usability and compatibility will go way down, but the solution above is if you really need to take the creative liberty, and your users are open minded to this sort of stuff.
Related
How do I create a global overlay of all tags?
Pressing a shortcut should make all tags appear in seperate boxes in one screen. It should look something like this:
How can I make something like this? How can I seperate tags in boxes?
My collision module or the bling module has something close enough. Getting the exact layout you ask for is non-trivial because AwesomeWM is not a compositing window manager. This means it cannot really take screenshots (let alone live-views) of invisible clients/windows. Usually, the only "safe" thing is to display the outline and client icon.
If you really, really want this, you need:
A compositing manager such as picom
Either these patches or use gears.surface(client.content) to take a screenshot
Lot of code to properly render a wibox with the right screenshots. You can read the bling or collision code to know how to get the size and position.
I have a page where the entire area is covered by a link. I have implemented a custom cursor with a 60x60 px PNG image when the user hovers over the link (so anywhere on the page, the cursor should appear as a white X).
My issue is this: When the cursor (or rather, the edge of the image shown by the cursor) touches the edge of the page, the cursor reverts to the "pointer" state which I assigned as a fallback. Here's the CSS I used:
cursor: url('https://i.ibb.co/pRX8Fxg/close.png') 30 30, pointer;
In the jsfiddle I made of the issue, this only seems to happen with the top and left sides, and not the bottom and right sides (which is very confusing since that invalidates my theory that it was due to the edge of the browser). In my page however this happens with all four sides.
The issue is nonexistent with Firefox, and with Edge when I use a .cur file.
I've tried: using a .cur file instead, changing the position of the hotspot, trying to figure out what jsfiddle's page does differently.
Any help would be much appreciated.
Keep your cursor smaller or equal to 32x32 DIP.
Custom cursors with widths or heights greater than 32 DIP will be
removed if they intersect native UX (i.e. are not fully contained in
the visual viewport).
Large cursors are being used abusively on the web, to confuse users
(see https://crbug.com/880863). Specifically, large custom cursors can
be used to cover important (sometimes security related) browser native
UX with an arbitrary image to mislead users into thinking they are
clicking outside the content area.
Source: https://www.chromestatus.com/feature/5825971391299584
I wonder if its possible to use the browsers cursor as an image.
So for example that I could use somewhere on the page the resize image of the cursor.
I tried to find some answer to this, all I could find is how to use an image as a cursor.
And interesting enough,
Microsoft uses images to show the cursors:
https://msdn.microsoft.com/en-us/library/aa358795.aspx
Mozilla also uses images:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Which makes sense, since one might have complete different set of cursors (maybe even a broken set - not having all variants) defined in the Operating System. And so it wouldn't show what they actually wanted to show. So my hopes are still up that there is some way.
I suppose what I want is not possible, but I thought lets ask.
Maybe its very simple and I am really overlooking something I hope.
It is simply not possible to use the image which is used by the browser.
Hi I want to create an application has this sort of function:
http://looklet.com/create
In this application when you click the button (or some tilelist) on the right the model on the left update accordingly. I wonder how they achieve this. Originally i think it's some sort of image-only pop-up window but then pop-up window seems to update the entire view.
Then I think it might be only change view state, but then I still confused how it can be done using view state.
Flex expert please give me some hint !
Looks like transparent images drawn on Canvas. Each piece must have predefined offset and draw order.
Probably just images placed on one or more Canvas, with the z-order controlled for depth.
The body stays the same, so shirts probably have their own placement properties, as do skirts, underwear, hosiery, etc. as well as backgrounds, faces, etc.
Facebook Connect uses JS/CSS overlays/popups for user interaction. I have sites with Flash elements, and no matter how I set the z-indices, the Flash always seems to go to the top.
I have a similar and likely related problem with a div with display:fixed at the top of the screen, where it gets covered by the Flash when you start scrolling.
How can I make sure the Flash element layers properly?
If you just need your flash to fall behind other object then you should use wmode=opaque. This will correct the z-index.
wmode=transparent will also correct the z-index but it also makes your stage transparent so whenever you have nothing on the stage or gaps between objects your html will show through underneath. This in turn causes more system strain.
Ergo if you just need the z-index correcting use wmode=opaque
Generally, I've needed to set the wmode=transparent property on the Flash object and/or embed string.
http://www.communitymx.com/content/article.cfm?cid=e5141