Solved

JavaScript to change all img cursors

Posted on 2013-06-04
16
310 Views
Last Modified: 2013-06-06
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
Comment
Question by:RustyRazor
  • 5
  • 5
  • 3
  • +2
16 Comments
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39221052
$(document).ready(function() {
     $("img").css("cursor","default");
});

Open in new window


Check this out...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39221058
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39221292
Can I ask why you want to do this through javascript and not using a stylesheet?
0
 

Author Comment

by:RustyRazor
ID: 39221641
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
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39221651
Yes.. That is jquery...
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 39221923
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
 

Author Comment

by:RustyRazor
ID: 39222257
@xmediaman:  document.img is an unrecognized object.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 39222295
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:RustyRazor
ID: 39222497
Thanks, x, but with that code, I get an error saying imgs[..].style is undefined or not an object.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39222530
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 300 total points
ID: 39222552
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
 
LVL 21

Expert Comment

by:Kim Walker
ID: 39222573
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
 

Author Comment

by:RustyRazor
ID: 39223788
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39223955
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
 

Author Comment

by:RustyRazor
ID: 39224512
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 39224769
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now