Cursor image not working in IE ! Why ?
It is possible to attach a cursor image(jpg, png etc.) using css in chrome, firefox and safari. But it doesn’t work in Internet Explorer. This is because mouse cursor is a system level component. Since IE is Microsoft’s genuine browser it supports the same cursor format as in desktop. That is a (.cur) image format. To fix why Cursor image not working in ie we need to go by procedure that includes a bit javascript and css.
First we need to create a div where we can test the change of cursor on mouseover.
|
1 2 3 |
<div id="hover-zone"></div> |
Now write some css to make it a hover zone.
|
1 2 3 4 5 6 7 8 |
#hover-zone{ width: 200px; height: 200px; background-color: #7e7e7e; border: 1px dotted black; } |
Now download your hover image in png format. Note that the image should be in dimension less than 100 x 100 otherwise the cursor won’t take the image. After you download the image, convert it to .cur format. Here is a link to convert the image to .cur format https://convertio.co/jpg-cur/.
Now you have two images, one with .cur and another one with .png format. Finally write a javascript to change the cursor image dynamically according to browser. Following javascript fixes the issue for why Cursor image not working in ie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> var isIE = /*@cc_on!@*/false || !!document.documentMode; var image = ''; if (isIE) { image = "/demo/images/red-circle.cur"; } else { image = "/demo/images/red-circle.png"; } window.onload = function() { document.getElementById('hover-zone').onmouseover = function(event) { event.target.style.cursor = "url(" + image + ") , url(" + image + "), auto"; }; }; </script> |
Below is the complete code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var isIE = /*@cc_on!@*/false || !!document.documentMode; var image = ''; if (isIE) { image = "/demo/images/red-circle.cur"; } else { image = "/demo/images/red-circle.png"; } window.onload = function() { document.getElementById('hover-zone').onmouseover = function(event) { event.target.style.cursor = "url(" + image + ") , url(" + image + "), auto"; }; }; </script> <style> #hover-zone{ width: 200px; height: 200px; background-color: #7e7e7e; border: 1px dotted black; } </style> </head> <body> <div id="hover-zone"></div> </body> </html> |
I was very pleased to find this particular web-site.I wanted to thank you for your time with this wonderful learn!! I definitely enjoying every little it and I had you book-marked to see brand-new stuff you writing.
jordan 6