CSS cursor customization - html

I'm trying to make a CSS code that changes the cursor to a picture file when the cursor is on a webpage. I've seen sites that give you a simple code to do it but they always have ads. Any codes you guys know that can do this?

Yes, simply apply the following css code to your body tag (assuming you want effect for whole page):
body {
cursor: url('URL to image');
}
Further information:
The image file must be 32x32 or smaller
Internet explorer only supports .cur files

CSS:
html{
cursor: url(URL of pictures)
}
Other Simples:
http://www.html1.freeiz.com/Your_cursor.htmlhttp://jsfiddle.net/wNKcU/5/http://jsfiddle.net/wNKcU/788/

create an HTML element with the cursor image you want and use javascript's onmousemove event to move the cursor.
window.onmousemove= function(e) {cursor.left=e.x;cursor.top=e.y;} //cursor is the HTML element

Related

Cannot successfully create custom cursor from image

Here is the hierarchy of my website.
I am trying to set paw.png as my custom cursor.
Here is my code for the custom cursor in main.css.
#body{
cursor: url('Images/paw.png'), auto;
}
I am not sure why it's not working and only the default cursor appears. It would be great if someone could help me fix this issue.
Thanks in advance!
If you intend to apply that cursor to your complete page, you should use the selector body, not #body (which is an id selector)
body{
cursor: url('Images/paw.png'), auto;
}
make sure the URL is right and that you're selecting the right element, also there are some limitations on the size of the image that you can use as a custom cursor.
In Firefox, for example, the limit is 128×128px (Firefox 3.6-3.6.6 on Windows limits this to 32x32px.) so, try to use a 32x32px image to be in the safe zone
for more information: MDN
Well assuming that you have an id="body" on the body tag, you also need to fix the url which should be relative to the .css file and not to the root.
#body{
cursor: url('../Images/paw.png'), auto;
}

SVG still receives clicks, even if pointer-events: visible/painted

Basically, I have a couple .svg images put into an <img> tag on my HTML page like that:
<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>
All of those images are overlapping with each other. They have the same size but different content.
I'm now trying to make only the content of those images clickable.
With pointer-events: visible; or pointer-events: painted; in CSS that seemed to be possible, but i can't get it work like that. The image still receives clicks at every point in it and not only on the content part.
I tried pointer-events: none; on the top image and that disabled clicks on the top image, which sounded like there was no mistake in the HTML or CSS code.
I created those .svg images in Illustrator CC with a transparent background, so normally there can't be content, and I exported it with the following options:
(sorry for this being in german)
I have no idea where the problem could be.
I've had success inlining the SVG, setting the pointer-events to none for the SVG elements, and then setting the pointer-events for the path element within the SVG to fill. Here's a CodePen example.
svg {
cursor: pointer;
pointer-events: none;
}
path {
pointer-events: fill;
}
The problem is that you're using an <img> tag. They work like rasters even when the data is SVG i.e. the individual items don't really exist, it's just a picture which you can either have as entirey clickable or not.
If you want the drawing to be interactive you'll need to use an <object> or <iframe> tag and then you can make the individual shapes clickable or not by using the pointer-events attribute.
You could also include all the svg data inline in the html file but if you did that you'd need to make sure all the id attributes were unique.
This is what worked for me
svg {
pointer-events:none;
}
svg *{
pointer-events:auto;
}
don't hesitate to add !important in case it has conflict with your current style.

Whole Page Clickable, Firefox

I have this piece of code in my style sheet to change the cursor to a pointer on one page, and it works well except on firefox, where it doesn't give you a "pointer" finger to let you know the page is clickable.
html {
cursor:pointer;
}
The thing is, the normal method of putting an onclick event in the body tag isn't working. (shown below not working)
<body onclick="window.href.location=filename">
body text
</body>
How do I get a pointer finger on the whole page instead of the normal mouse cursor in firefox?
Add a hover rule to the body element.
body:hover {
cursor:pointer;
}
You'll have to fill your whole screen with the element.
html {
cursor:pointer;
width: 100%;
height: 100%;
}
Check this JSFiddle that I put together for you.
I guess you need to fill the entire page with some element like:
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px">
</div>
and use this inside the body. There you probaly need to care about the bodies margins.
Or you append a click handler to the entire window via JavaScrip:
window.addEventListener("click", doSomething, false);
Make life easy:
CSS
#page{display:block;position:absolute;top:0;bottom:0:left:0;right:0;}

How to add Flash SWF as background of a HTML page?

I have a site and need to put swf file background of it and put other thing on it.how can i do that?
I don't understand why you could want to do that. In any case, there's no proper way of doing it through HTML only. Still, you could use the z-index CSS property, this way:
MyCSS.css
* {
z-index: 1;
}
.mySWFBackground {
z-index: 0;
}
After this, your SWF element (in the HTML) should have
class="mySWFBackground"
I have never done it before, but I imagine that there will be some weird output (like unselectable content or as such).
There seems to be a few results on google for doing this. You can't actually set an SWF as a background proper, but this guy was able to do it with a div tag: http://www.kirupa.com/forum/showthread.php?277976-Using-swf-as-CSS-background, and with javascript: http://manos.malihu.gr/flash-background-with-html-content and also using the z-index as Julian suggested.

Can you add an image to the HTML element using CSS?

I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html