Solved

JavaScript to change all img cursors

Posted on 2013-06-04
16
318 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 53

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 58

Expert Comment

by:Julian Hansen
ID: 39221292
Can I ask why you want to do this through javascript and not using a stylesheet?
0
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

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 58

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 58

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 58

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 58

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

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

635 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