Solved

JavaScript to change all img cursors

Posted on 2013-06-04
16
315 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
  • +2
16 Comments
 
LVL 10

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 56

Expert Comment

by:Julian Hansen
ID: 39221292
Can I ask why you want to do this through javascript and not using a stylesheet?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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 10

Expert Comment

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

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 22

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
 

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 56

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 56

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 22

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 56

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 56

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
tiled banner 2 12
arrays and radio buttons 10 39
How do I post more than 1 item to php backend 24 30
.CSS HTML Help 3 23
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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 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