• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 66278
  • Last Modified:

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?
0
GessWurker
Asked:
GessWurker
  • 5
  • 4
  • 3
  • +4
4 Solutions
 
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
 
ZvonkoSystems architectCommented:
This is absolutely enough:

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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
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:
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 3
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now