Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • Last Modified:

JavaScript to change all img cursors

Hi All:

Consider the following style block:

<style>
img {cursor: crosshair;}
</style>

...which produces a crosshair cursor on all image rollovers on the page.

How can the img element be changed with JavaScript, something like,

document.img.style.cursor='default';  //this doesn't work

...which would change all img rollovers to the default cursor?
0
RustyRazor
Asked:
RustyRazor
  • 5
  • 5
  • 3
  • +2
1 Solution
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
$(document).ready(function() {
     $("img").css("cursor","default");
});

Open in new window


Check this out...
0
 
Scott Fell, EE MVEDeveloperCommented:
http://www.javascripter.net/faq/stylesc.htm

<script>

function setCursorByID(id,cursorStyle) {
 var elem;
 if (document.getElementById &&
    (elem=document.getElementById(id)) ) {
  if (elem.style) elem.style.cursor=cursorStyle;
 }
}
</script>
 <a id="e1c" href="#" style="cursor:crosshair;" onclick="setCursorByID('e1','crosshair');return false;">crosshair</a>
0
 
Julian HansenCommented:
Can I ask why you want to do this through javascript and not using a stylesheet?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
RustyRazorAuthor Commented:
Ishaan: Is that JQuery? -- I got an error with that code snippet...

Padas: There are 100 images on the page.  The goal, as I tried to state before, is not to id each of them, but to change the default img cursor for all of them in one shot.

As to why, depending upon certain conditions, the cursor would be different.  I would like to be able to change it dynamically, after the page loads.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Yes.. That is jquery...
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Have you tried:
document.img.style.cursor='auto';

Open in new window

Auto is the default value for cursor. The browser sets the cursor according to the element under it. See w3schools.
0
 
RustyRazorAuthor Commented:
@xmediaman:  document.img is an unrecognized object.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Hmm...I wonder what happened to my other comment. Try this:
var imgs = document.getElementsByTagName('img');
for (img in imgs) {
    imgs[img].style.cursor = 'auto';
}

Open in new window

0
 
RustyRazorAuthor Commented:
Thanks, x, but with that code, I get an error saying imgs[..].style is undefined or not an object.
0
 
Julian HansenCommented:
What error did you get with this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
     $("img").css("cursor","default");
});
</script>

Open in new window

0
 
Julian HansenCommented:
This works for me
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('img').css({cursor: 'default'});
});
</script>
<style type="text/css">
img {
	cursor: crosshair;
}
</style>
</head>
<body>
<img src="http://www.wallpele.com/wp-content/uploads/2013/05/Hot-Air-Balloon-HD-Wallpaper.jpg" width="100px" />
<img src="http://img.geocaching.com/cache/dbf21a28-727d-4b19-b971-dcefcda86944.jpg" width="100px" />
</body>
</html>

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
It seems that getElementsByTagName('img') gets at least one more item than expected. Try this:
var imgs = document.getElementsByTagName('img');
for (img in imgs) {
    if (imgs[img].style) { imgs[img].style.cursor = 'auto'; }
}

Open in new window

0
 
RustyRazorAuthor Commented:
OK, xmedian, the code runs without an error, but the cursor remains a crosshair.

JulianH, you're solution works, but I'm not psyched about loading a .js from another website.  I must read more about JQuery.

Thanks to both of you for your efforts! :)
0
 
Julian HansenCommented:
I'm not psyched about loading a .js from another website

That's a google CDN?!

You don't have to load it from there - download it from jquery.com if you want - easier to post code EE that references the CDN - and pretty standard practice out there.

As a matter of interest why the B grade? Not sure what else we could have done to answer your question better. Please advise?
0
 
RustyRazorAuthor Commented:
You're right, I did scour the internet for a solution before I went onto the board.  I suppose if the JQery file is OK, then an A grade would be the thing.  It just seems disappointing that one would have to go to that length for a simple css call.  So I'd change the grade to A.  Can that be done?
0
 
Julian HansenCommented:
It just seems disappointing that one would have to go to that length for a simple css call.

JQuery takes all the hassle out of javascript coding - it does all the heavy lifting and can save you hours of debugging / coding time. For the cost of less than 100K - which on many sites today is smaller than the images one loads on a page - it is worth the effort.

In this case it may seem like overkill - but usually your pages require more javascript coding than one line - and as the file is cached you get more bang for the download hit. In addition you are doing something that in theory should be handled by a stylesheet - not sure why you need to do it this way - but you must have your reasons - point is this is an out of the ordinary application.

So I'd change the grade to A.  Can that be done?
You have to get a mod to do it using the request attention link under the question at the top of the page.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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