GessWurker
asked on
onMouseOver="style.cursor='hand' for specific images?
I'd like the cursor style to switch to 'hand' onmouseover of particular images on a page,
i.e., wherever the images minus.gif or plus.gif appear on the page, I'd like onMouseOver="style.cursor=
Is this possible? How?
i.e., wherever the images minus.gif or plus.gif appear on the page, I'd like onMouseOver="style.cursor=
Is this possible? How?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This is absolutely enough:
<img src="plus.gif" style="cursor:hand;">
<img src="plus.gif" style="cursor:hand;">
ASKER
I know how to do that, but it's not possible in my particular context. I need some sort of function that will run through the images on the page and -- if minus.gif or plus.gif is encountered, will invoke onmouseover="this.style.cu
Or a question: why you have to change cursor style when the mouse is NOT over the image?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here my example:
<html>
<head>
<script>
function init(){
var img = document.images;
for(var i=0;i<img.length;i++){
if(/(plus|minus)\.gif/i.te
img[i].style.cursor="hand"
}
}
}
</script>
</head>
<body onLoad="init()">
<img src="images/plus.gif">
<img src="images/else.gif">
<img src="images/plus.gif">
<img src="images/minus.gif">
</body>
</html>
<html>
<head>
<script>
function init(){
var img = document.images;
for(var i=0;i<img.length;i++){
if(/(plus|minus)\.gif/i.te
img[i].style.cursor="hand"
}
}
}
</script>
</head>
<body onLoad="init()">
<img src="images/plus.gif">
<img src="images/else.gif">
<img src="images/plus.gif">
<img src="images/minus.gif">
</body>
</html>
<script>
function init(){
ims=document.images
for (i=0;i<ims.length;i++){
if (/(plus\.gif)|(minus\.gif)
ims[i].onmouseover=functio
ims[i].onmouseout=function
}
}
}
</script>
<body onload="init()">
<img src="plus.gif"> <img src="minus.gif"> <img src="abcd.gif">
</body>
function init(){
ims=document.images
for (i=0;i<ims.length;i++){
if (/(plus\.gif)|(minus\.gif)
ims[i].onmouseover=functio
ims[i].onmouseout=function
}
}
}
</script>
<body onload="init()">
<img src="plus.gif"> <img src="minus.gif"> <img src="abcd.gif">
</body>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This also works in IE/Netscape and Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My page</title>
<style type="text/css">
.myClass{
cursor:pointer;
cursor:hand;
}
</style>
<script type="text/javascript">
function setEvents(){
var images = document.getElementsByTagN
for(var no=0;no<images.length;no++
if(images[no].src.match(/(
images[no].className='myCl
}
}
}
</script>
</head>
<body onload="setEvents()">
<img src="whatever.gif"><img src="plus.gif"><img src="minus.gif">
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My page</title>
<style type="text/css">
.myClass{
cursor:pointer;
cursor:hand;
}
</style>
<script type="text/javascript">
function setEvents(){
var images = document.getElementsByTagN
for(var no=0;no<images.length;no++
if(images[no].src.match(/(
images[no].className='myCl
}
}
}
</script>
</head>
<body onload="setEvents()">
<img src="whatever.gif"><img src="plus.gif"><img src="minus.gif">
</body>
</html>
Removed a \ in your cursor, Batalf
Are we having a competition here?
Are we having a competition here?
ASKER
Well...lots of working options here, but I had the best cross-browser luck with GwynforWeb's so gwyn gets the bulk of the points. I'll split the rest.
Thanks!
Thanks!
Thx for the points. :-)
Michel,
the \ in my cursor was in the first place intented, but after further testing not needed. My IE browser fooled me - it didn't seem that cursor:pointer; was enough. Probably cache issue I guess. That's why I tried a CSS hack with cu\rsor:hand; In my example it's enough with
.myClass{
cursor:pointer;
}
the \ in my cursor was in the first place intented, but after further testing not needed. My IE browser fooled me - it didn't seem that cursor:pointer; was enough. Probably cache issue I guess. That's why I tried a CSS hack with cu\rsor:hand; In my example it's enough with
.myClass{
cursor:pointer;
}
Ohhhh, I am sorry! I was SURE it was a typo. Where did you come up with that \???
As mentioned, my browser fooled me to believe that IE needed cursor:hand while other browsers neede cursor:pointer.
That's why I tried a CSS hack. The idea behind CSS hacks is that CSS rules like
cu\rsor:hand;
is applied by some browsers, while other ignores them due to the backslash. You will see it used sometimes when someone tries to solve the "Box Model Problem"(How different browsers interprets the CSS "width" attribute).
But in this question it wasn't needed at all, just misleading, and I'm sorry for that.
Batalf
That's why I tried a CSS hack. The idea behind CSS hacks is that CSS rules like
cu\rsor:hand;
is applied by some browsers, while other ignores them due to the backslash. You will see it used sometimes when someone tries to solve the "Box Model Problem"(How different browsers interprets the CSS "width" attribute).
But in this question it wasn't needed at all, just misleading, and I'm sorry for that.
Batalf
There are a few things that can belerned over in CSS. We've been using that a long time; but is not my favourite. My favourite is:
.myClass[title] {property:value}
IE does not know what the [title] means so it ignores it; but the other browsers read it as any tag with class="myClass" and a title attribute. I like it better because it is not a hack that relies on an IE bug. [title] is to standard; it is jut that IE is not. If they fix the bug then / won't work anymore but [title] will work until the come to standard at which point they will also be to standard on the properties and values. So there should be less to fix.
You need to spend some time in CSS michel. ;^)
Cd&
.myClass[title] {property:value}
IE does not know what the [title] means so it ignores it; but the other browsers read it as any tag with class="myClass" and a title attribute. I like it better because it is not a hack that relies on an IE bug. [title] is to standard; it is jut that IE is not. If they fix the bug then / won't work anymore but [title] will work until the come to standard at which point they will also be to standard on the properties and values. So there should be less to fix.
You need to spend some time in CSS michel. ;^)
Cd&
<img src="image.gif" onmouseover="this.style.cu