Member Avatar for Uechi Girl

Ok here's the deal. I made a pretty sweet custom corson in Adobe Photoshop, and after installing the right plug in, made it in the correct cursor format, .cur. Now all my website is in dreamweaver, and i need to insert the cursor there. I tried a few different ways of inserting cursors in the html but I can't figure out how to upload the cursor pic. If I do it goes in it doesnt go as an image. please help! Anything would be appreciated. Jenny~

  • 2 Contributors
  • 3 Replies
  • 216 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by peter_budo

Dani AI

Generated

Short, practical answer for : a .cur is not inserted as an image — treat it as a site asset and reference it from your stylesheet. Save the .cur into your local site folder (for example assets/cursors/), put it on the server with Dreamweaver’s Files panel (not Insert > Image), and point to it with cursor: url(...) from your CSS. Relative url() values are resolved relative to the stylesheet, so double-check the path you use. (developer.mozilla.org)

Example you can drop into your CSS (adjust the path and hotspot numbers to taste):

/* place mycursor.cur in /assets/cursors/ on the server */
.button, a { 
  cursor: url('/assets/cursors/mycursor.cur') 10 6, pointer;
}

The two numbers after the URL are the hotspot x and y (pixels from the image top-left). Always include a final keyword fallback (pointer, auto, etc.) so browsers that won’t use your custom image still show a useful cursor. Browsers also commonly limit cursor image size (Firefox/Chromium often ignore images larger than 128×128; 32×32 is the safest choice). (developer.mozilla.org)

Quick troubleshooting checklist:

  • Open the cursor file URL directly in your browser to confirm it is reachable (200 OK).
  • Check DevTools Network to confirm the server returns an appropriate content-type; if the browser prompts “Save as…”, add a MIME mapping on the server (for Apache use an AddType like image/x-icon .cur or add a mimeMap entry in IIS).
  • If the cursor still falls back over links/buttons, apply the rule to those selectors (some elements inherit/override cursor styles). (httpd.apache.org)

A few extra notes: if your Photoshop export didn’t set the hotspot, use a cursor editor (for example IcoFX) to set hotspot coordinates when you save. Animated .ani cursors and animated GIF/APNG cursors are not reliably supported across browsers (IE historically supported .ani; other browsers usually do not), so prefer a static .cur for cross-browser reliability. was right about fallbacks — just add the extra checks above and you should see it work. (icofx.ro)

Recommended Answers

All 3 Replies

Member Avatar for peter_budo

Quote from w3.org http://www.w3.org/TR/1998/REC-CSS2-19980512/ui.html#propdef-cursor

The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

P { cursor : url("mything.cur"), url("second.csr"), text; }

Don't forget upload your cursor with rest of your site.

Member Avatar for Uechi Girl

What do you mean? I only have one customized cursor... :-|

Member Avatar for peter_budo

You don't have to have 2 cursor. Example above is standart procedure ensure that if first setting doesn't aplly browser will use second one. If this fail standart settengs will be used. So 3 cursors setting in case of failure.

So simly in CSS declare on which object(DIV, P, TABLE, IMG,...) your customize cursor should take action

P { cursor : url("mycursor.cur"), pointer; }

What this mean is, first use my customize cursor for rollover on this object( P - paragraph), if this not supported use second setting as pointer/hand.

Hope this is clear ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.