me want hand in firefox ? it only works in IE ?Keep the CSS specification "handy." (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/ui.html#propdef-cursor">http://www.w3.org/TR/CSS2/ui.html#propdef-cursor</a><!-- m -->) 
cursor: pointer;thx
Welcome.And when cursor
ointer; doesn't work (i.e., it displays the same as cursor:default in Firefox ... then what?But it does work in Firefox. If it didn't, you'd just put the code that one browser understands first (IE's code) and then follow it with code for the browser that understands both (Firefox).Perhaps you misunderstand what I said. I said, it doesn't matter whether I specify cursor:default or cursorointer or cursor:move -- all of them display the same mouse cursor shape (an arrow) in Firefox. I specify the following CSS class on an IMG tag and the mouse cursor shape doesn't change in Firefox.
.coins{
cursor: move;
height: 70px;
width: 70px;
}In fact, I just installed Firefox 1.0.7 and I get the same result. So... What is the solution?And generally, when you hover non-styled link, does the cursor change to a hand?They all work in Firefox for me, so it must be your install. I don't know how that could happen, but I'm running 1.0.7 and all of them work fine (on any element). Maybe try uninstalling and reinstalling instead of just upgrading, unless you did just install but not upgrade...Could be a corrupt profile. I would try just deleting that 1st, and creating a new one.But it does work in Firefox. If it didn't, you'd just put the code that one browser understands first (IE's code) and then follow it with code for the browser that understands both (Firefox).Actually it's t'other way around. IE5 doesn't understand cursorointer; so it will use the default cursor, if you do it the other way round:.coins{
cursorointer;
cursor:hand;
}IE5 will play nicely, IE6 understands both and the other browsers will go with the last sensible value (which would be pointer).A piece of my CSS:
.coins{
cursor: move;
height: 70px;
width: 70px;
}
Is there an error in how I am creating the IMG object?
function placeCoins(idx, cnt) {
if (--cnt < 1) {
if (--idx < 0) return;
cnt = availablecoins[current_level][idx]
if (cnt == 0) {
window.setTimeout("placeCoins("+idx+",0)", 0);
return;
}
}
var x = Math.round(Math.random() * (purseWidth - coinPad - 1) + purseLeft);
var y = Math.round(Math.random() * (purseHeight - coinPad - 1) + purseTop);
var img = document.createElement("IMG");
img.setAttribute("className", "coins", 0);
img.setAttribute("src", coinimages[idx], 0);
img.setAttribute("alt", coinnames[idx], 0);
img.setAttribute("title", coinnames[idx], 0);
if (img.style.setAttribute) {
img.style.setAttribute("position", "absolute", 0);
img.style.setAttribute("left", x+"px", 0);
img.style.setAttribute("top", y+"px", 0);
img.style.setAttribute("z-index", "2", 0);
} else {
var txt = coinhtml.replace(/%3%/, x).replace(/%4%/, y);
img.setAttribute("style", txt, 0);
}
img = purse.appendChild(img);
if (window.Event) {
img.onmousedown = function(event) { return setDrag(this, event); };
img.onmousemove = function(event) { return resetMove(event); };
img.onmouseup = function(event) { return endDrag(event); };
} else {
img.onmousedown = function() { return setDrag(this, event); };
img.onmousemove = function() { return resetMove(event); };
img.onmouseup = function() { return endDrag(event); };
}
window.setTimeout("placeCoins("+idx+","+cnt+")", 100);
}Can I have a look at the whole code, some things are still unclear, like what for example is purse?Could be a corrupt profile. I would try just deleting that 1st, and creating a new one.
Meaning?Can I have a look at the whole code, some things are still unclear, like what for example is purse?
This is a game with five levels -- all played on the same web page. Each succeeding level is given a different starting number and variety of coins (from copper pennies to gold dollars). From your "purse" of coins, you drag-n-drop the coins on images of items for which you must guess the price.
As the coins are dropped on the item images, their value is automatically totalled and displayed below the item's picture. After pricing each displayed item, the password to the next game level is the total number of cents remaining in the "purse".
From an HTML perspective, and since these coin images are absolutely positioned, the "purse" is a table cell that merely serves as parent to these IMG child nodes. This makes it easy to clear all coins from the document between game levels:
purse = document.getElementById("dPurse");
purse.innerHTML = "";Can I have a look at the whole codeIs it so hard to provide a link or upload an example? (I'd prefer an uploaded example.)Since all I'm trying to figure out is why the mouse cursor shape won't change, I don't see that anything more than what I've posted is truly needed. Do you? The only other thing I can see referenced from that function which you might want to know about is the following:
var coinhtml = "position:absolute; left:%3%px; top:%4%px; z-index:2;";
Let me know if you think anything else is truly needed for figuring out a problem with the mouse cursor shape. Thanks.The whole code would have been nice, because then I wouldn't have had to read and understand your code, then create some HTML to go with it, work out how to call your function and make up some test arguements, then remove or replace any other unnecessary code (mainly variables like coinPad and coinnames), all just to tell you that it's class, not className:img.setAttribute("class", "coins", 0);Or even simpler:img.className = "coins";Why do you use setAttribute for everything anyway?... it's class, not className...
I wish somebody would make up their mind. I read the following on the MSDN site concerning the setAttribute() method:
When setting the CLASS attribute using this method, set the sName to be "className", which is the corresponding Dynamic HTML (DHTML) property.
Why do you use setAttribute for everything anyway?
Normally, I don't -- but, then again, I'm normally not forced to use the createElement() method either. innerHTML is my mainstay. In this case, I wanted the coin placement to be animated. You know, each coin appears separately. innerHTML is not really suited to that kind of work.
At any rate... Thanks for correcting MSDN. ;-)Well, here's the rest of the story...
I had tried it in Firefox before I made my previous post. Then I went and tried it in IE. It failed. So, MSDN is correct for IE. The problem is that it doesn't work that way in Firefox. So, I went with the following code and that works in both browsers.
var img = document.createElement("IMG");
img.className = "coins";
img.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/coinimages">http://www.webdeveloper.com/forum/archi ... coinimages</a><!-- m -->[idx];
img.alt = coinnames[idx];
img.title = coinnames[idx];
img.style.position = "absolute";
img.style.left = x+"px";
img.style.top = y+"px";
img.style.zIndex = "2";
img = purse.appendChild(img);
Thanks, again.
cursor: pointer;thx
Welcome.And when cursorointer; doesn't work (i.e., it displays the same as cursor:default in Firefox ... then what?But it does work in Firefox. If it didn't, you'd just put the code that one browser understands first (IE's code) and then follow it with code for the browser that understands both (Firefox).Perhaps you misunderstand what I said. I said, it doesn't matter whether I specify cursor:default or cursorointer or cursor:move -- all of them display the same mouse cursor shape (an arrow) in Firefox. I specify the following CSS class on an IMG tag and the mouse cursor shape doesn't change in Firefox..coins{
cursor: move;
height: 70px;
width: 70px;
}In fact, I just installed Firefox 1.0.7 and I get the same result. So... What is the solution?And generally, when you hover non-styled link, does the cursor change to a hand?They all work in Firefox for me, so it must be your install. I don't know how that could happen, but I'm running 1.0.7 and all of them work fine (on any element). Maybe try uninstalling and reinstalling instead of just upgrading, unless you did just install but not upgrade...Could be a corrupt profile. I would try just deleting that 1st, and creating a new one.But it does work in Firefox. If it didn't, you'd just put the code that one browser understands first (IE's code) and then follow it with code for the browser that understands both (Firefox).Actually it's t'other way around. IE5 doesn't understand cursor
ointer; so it will use the default cursor, if you do it the other way round:.coins{cursor
ointer;cursor:hand;
}IE5 will play nicely, IE6 understands both and the other browsers will go with the last sensible value (which would be pointer).A piece of my CSS:
.coins{
cursor: move;
height: 70px;
width: 70px;
}
Is there an error in how I am creating the IMG object?
function placeCoins(idx, cnt) {
if (--cnt < 1) {
if (--idx < 0) return;
cnt = availablecoins[current_level][idx]
if (cnt == 0) {
window.setTimeout("placeCoins("+idx+",0)", 0);
return;
}
}
var x = Math.round(Math.random() * (purseWidth - coinPad - 1) + purseLeft);
var y = Math.round(Math.random() * (purseHeight - coinPad - 1) + purseTop);
var img = document.createElement("IMG");
img.setAttribute("className", "coins", 0);
img.setAttribute("src", coinimages[idx], 0);
img.setAttribute("alt", coinnames[idx], 0);
img.setAttribute("title", coinnames[idx], 0);
if (img.style.setAttribute) {
img.style.setAttribute("position", "absolute", 0);
img.style.setAttribute("left", x+"px", 0);
img.style.setAttribute("top", y+"px", 0);
img.style.setAttribute("z-index", "2", 0);
} else {
var txt = coinhtml.replace(/%3%/, x).replace(/%4%/, y);
img.setAttribute("style", txt, 0);
}
img = purse.appendChild(img);
if (window.Event) {
img.onmousedown = function(event) { return setDrag(this, event); };
img.onmousemove = function(event) { return resetMove(event); };
img.onmouseup = function(event) { return endDrag(event); };
} else {
img.onmousedown = function() { return setDrag(this, event); };
img.onmousemove = function() { return resetMove(event); };
img.onmouseup = function() { return endDrag(event); };
}
window.setTimeout("placeCoins("+idx+","+cnt+")", 100);
}Can I have a look at the whole code, some things are still unclear, like what for example is purse?Could be a corrupt profile. I would try just deleting that 1st, and creating a new one.
Meaning?Can I have a look at the whole code, some things are still unclear, like what for example is purse?
This is a game with five levels -- all played on the same web page. Each succeeding level is given a different starting number and variety of coins (from copper pennies to gold dollars). From your "purse" of coins, you drag-n-drop the coins on images of items for which you must guess the price.
As the coins are dropped on the item images, their value is automatically totalled and displayed below the item's picture. After pricing each displayed item, the password to the next game level is the total number of cents remaining in the "purse".
From an HTML perspective, and since these coin images are absolutely positioned, the "purse" is a table cell that merely serves as parent to these IMG child nodes. This makes it easy to clear all coins from the document between game levels:
purse = document.getElementById("dPurse");
purse.innerHTML = "";Can I have a look at the whole codeIs it so hard to provide a link or upload an example? (I'd prefer an uploaded example.)Since all I'm trying to figure out is why the mouse cursor shape won't change, I don't see that anything more than what I've posted is truly needed. Do you? The only other thing I can see referenced from that function which you might want to know about is the following:
var coinhtml = "position:absolute; left:%3%px; top:%4%px; z-index:2;";
Let me know if you think anything else is truly needed for figuring out a problem with the mouse cursor shape. Thanks.The whole code would have been nice, because then I wouldn't have had to read and understand your code, then create some HTML to go with it, work out how to call your function and make up some test arguements, then remove or replace any other unnecessary code (mainly variables like coinPad and coinnames), all just to tell you that it's class, not className:img.setAttribute("class", "coins", 0);Or even simpler:img.className = "coins";Why do you use setAttribute for everything anyway?... it's class, not className...
I wish somebody would make up their mind. I read the following on the MSDN site concerning the setAttribute() method:
When setting the CLASS attribute using this method, set the sName to be "className", which is the corresponding Dynamic HTML (DHTML) property.
Why do you use setAttribute for everything anyway?
Normally, I don't -- but, then again, I'm normally not forced to use the createElement() method either. innerHTML is my mainstay. In this case, I wanted the coin placement to be animated. You know, each coin appears separately. innerHTML is not really suited to that kind of work.
At any rate... Thanks for correcting MSDN. ;-)Well, here's the rest of the story...
I had tried it in Firefox before I made my previous post. Then I went and tried it in IE. It failed. So, MSDN is correct for IE. The problem is that it doesn't work that way in Firefox. So, I went with the following code and that works in both browsers.
var img = document.createElement("IMG");
img.className = "coins";
img.src = <!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/archive/index.php/coinimages">http://www.webdeveloper.com/forum/archi ... coinimages</a><!-- m -->[idx];
img.alt = coinnames[idx];
img.title = coinnames[idx];
img.style.position = "absolute";
img.style.left = x+"px";
img.style.top = y+"px";
img.style.zIndex = "2";
img = purse.appendChild(img);
Thanks, again.