Develop Reference

Use cursor values used in HTML Drag and Drop API

I'd like to use the same cursor icons used in HTML Drag and Drop API (DataTransfer.dropEffect property copy and none), however, currently i'm using the jquery draggable/droppable api. Is it possible to set the cursor to these values without having to change the api i use?
Neither of the cursor icons appear to be specified anywhere in the docs https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Here is an example of what I'd like the cursor behavior to be: https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html

Welcome to the community!
Get the html element of the drag and drop component and style that component using CSS.
div[draggable] {
background-color: pointer;
}

Can i set the my own image in cursor using css or jquery or javascript

I want to change the cursor with my own image when it's hover on my specific divison
i have try below as per describe in Possible to replace cursor with my own custom image? this link
demo:hover
{
cursor:url("img/point.png");
}
but this is not working properly it's change cursor but not with my image

How do I set a thumbnails background on-hover using Javascript/JQuery?

When users hover over a small thumbnail I want that image to replace the background image.
How can I do this using Javascript/JQuery?

$('thumbnail id').hover(function(){
$(this).css('background-image','new image');
});

JQuery's hover would take care of this. Basically you want to get the image and set its hover functions to set the background image (and unset on hover out if that is your desired behavior)
$('#tumbnail_id').hover(function() {
// set the background
}, function() {
// unset the background
});
assuming your tumbnail HTML tag has an id of tumbnail_id. You can do some more clever stuff with your selectors and CSS classes if you have several thumbnails, but this is the basics of adding in your hover functionality.

jQuery - Selecting a child div background image and amending it

Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks

Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!

I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO

CSS Sprite Image Class Change

I'm using CSS sprites for a number of images on my site. I want to implement my up arrow and down arrows as sprites.
The arrows share one img tag on the website and I use javascript to swap in the proper image.
Let's say I'm changing a down arrow in the image to an up arrow. In the CSS, the down arrow is cssDownArrow and the up arrow is cssUpArrow.
The strategy I chose was to go to where I had
menuArrow.src = "/website/images/upArrow.gif";
and change it to this (cssUpArrow is the CSS class for the sprite and clear.gif is the placeholder image I"m using for the image tags where the sprites will be swapped in):
menuArrow.src = "/website/images/clear.gif";
menuArrow.class = "cssUpArrow";
However, when I do this, it doesn't show the correct image from the sprite, but keeps the one that was there before.
To some degree I understand why this is happening, but am not sure as to the best solution? Any help? Thanks!

You need to use className.
menuArrow.className = "cssUpArrow";

When using sprites for images you should have them in one image file and set the elements background to that image url, and then change the background position based on what image you want to show in the sprite.