JAVASCRIPT-IE-CSS-Dynamically update the mouse pointer shape

Recently wrote a picture of the page, in the pop-up layer to display a large image, on the left and right side of the large image can be clicked.

When you move the mouse over a large map, move to the left to display a left arrow, and move to the right to display a right arrow.

When the large image is displayed for the first time, if the mouse position is on a large map, the initialization displays a left or right arrow.

About the mouse moving on the large map, the dynamic update of the mouse pointer, this is no problem, using Img.onmousemove = function () {img.classname= ...} Can take care of it.

The problem I encountered was when I first displayed a large image on IE, initializing the mouse pointer shape, and here is a stylesheet (CSS):

12	.cursor_left {cursor: url(/images/left.cur), pointer}.cursor_right {cursor: url(/images/right.cur), pointer}

In the Img.onload event, I initialized the mouse pointer shape and set the Img.classname = "..." directly on the Chrome,firefox browser to display the custom mouse pointer shape correctly. However, the arrows cannot be displayed on the IE (6,8) browser.

After several hours of constant testing, finally found on ie, using img.style.cursor = "url (...)"; is effective.

Well, JavaScript code, for IE browser:

12345

img.style.cursor = "url(/images/left.cur)";img.className = "cursor_left"; //如果同时指定的了 img.style.cursor 和 img.className, img.style.cursor 的优化级高于 img.className, 所以这里必须加上这么一句img.style.cursor = "";

Here we need to pay attention to, finally add a sentence: Img.style.cursor = ""; Otherwise, setting img.classname in the subsequent Img.onmousemove event will be invalid. My guess is the priority issue.

2014-05-30

Javascript-ie-css-Dynamically update the mouse pointer shape