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='hand'" to take effect.

Is this possible? How?
GessWurkerAsked:
Who is Participating?
 
GwynforWebCommented:
These works in IE, FireFox, Netscape

<script>
function init(){
 ims=document.images
 for (i=0;i<ims.length;i++)
  if (/(plus\.gif)|(minus\.gif)/i.test(ims[i].src))
    ims[i].onmouseover=function x(){this.style.cursor='pointer'}
}
</script>

<body onload="init()">
  <img src="plus.gif"> <img src="minus.gif"> <img src="abcd.gif">
</body>

or

<script>
function init(){
 ims=document.images
 for (i=0;i<ims.length;i++)
  if (/(plus\.gif)|(minus\.gif)/i.test(ims[i].src))
    ims[i].style.cursor='pointer'
}
</script>

<body onload="init()">
  <img src="plus.gif"> <img src="minus.gif"> <img src="abcd.gif">
</body>
0
 
BatalfCommented:
Use "this" to refer to the image

<img src="image.gif" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'">
0
 
BatalfCommented:
Sorry for not reading your question properly:

This is an example where "hand" is the style of your images when plus.gif or minus.gif is in the source:

<!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:hand;
     }
     </style>
     
     <script type="text/javascript">
     function setEvents(){
        var images = document.getElementsByTagName('IMG');
        for(var no=0;no<images.length;no++){
            if(images[no].src.match(/(plus\.gif)|(minus\.gif)/gi)){
                images[no].className='myClass';
            }    
        }  
     }    
     </script>
</head>
<body onload="setEvents()"">
<img src="image.gif">
<img src="plus.gif">
<img src="minus.gif">

</form>
</body>
</html>
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
ZvonkoSystems architectCommented:
This is absolutely enough:

<img src="plus.gif" style="cursor:hand;">

0
 
GessWurkerAuthor Commented:
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.cursor='hand'".
0
 
ZvonkoSystems architectCommented:
Or a question: why you have to change cursor style when the mouse is NOT over the image?
0
 
archrajanCommented:
<script>
var imag = document.getElementsByTagName('img')
for(i = 0; i <imag.length; i++)
{
if(imag[i].src.indexOf('plus')!= -1 || imag[i].src.indexOf('minus')!= -1)
imag[i].onmouseover = imag[i].style.cursor = 'hand';
}
</script>
0
 
ZvonkoSystems architectCommented:
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.test(img[i].src)){
      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>

0
 
GwynforWebCommented:
<script>
function init(){
 ims=document.images
 for (i=0;i<ims.length;i++){
  if (/(plus\.gif)|(minus\.gif)/i.test(ims[i].src)){
    ims[i].onmouseover=function x(){this.style.cursor='hand'}
    ims[i].onmouseout=function y(){this.style.cursor='default'}
  }
 }
}
</script>

<body onload="init()">
  <img src="plus.gif"> <img src="minus.gif"> <img src="abcd.gif">
</body>
0
 
ZvonkoSystems architectCommented:
Here a version without mouse mover, but working also in Netscape/Mozilla/FireFox:

<html>
<head>
<script>
function init(){
  var img = document.images;
  if(document.all)
    curPoint = "hand";
  else
    curPoint = "pointer";
  for(var i=0;i<img.length;i++){
    if(/(plus|minus)\.gif/i.test(img[i].src)){
      img[i].style.cursor=curPoint;
    }
  }
}
</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>

0
 
BatalfCommented:
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.getElementsByTagName('IMG');
        for(var no=0;no<images.length;no++){
            if(images[no].src.match(/(plus\.gif)|(minus\.gif)/gi)){
                images[no].className='myClass';
            }    
        }  
     }    
     </script>
</head>
<body onload="setEvents()">
<img src="whatever.gif"><img src="plus.gif"><img src="minus.gif">
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
Removed a \ in your cursor, Batalf

Are we having a competition here?
0
 
GessWurkerAuthor Commented:
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!
0
 
GwynforWebCommented:
Thx for the points. :-)
0
 
BatalfCommented:
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;
               
     }
0
 
Michel PlungjanIT ExpertCommented:
Ohhhh, I am sorry! I was SURE it was a typo. Where did you come up with that \???
0
 
BatalfCommented:
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
0
 
COBOLdinosaurCommented:
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&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.