Changing Cursor to a Magnifying Glass?
January 21, 2016 12:00 AM
Hi -
Okay - strange question... For an activity I'm planning to create, I'd love it if the cursor could be in the shape of a magnifying glass instead of a regular pointer...is this possible? To make things even more complicated, I only want this to happen on a specific page, NOT throughout the whole course!
I found an earlier thread that had to do with changing cursor shapes (I think when they're over a button), which linked to some code options for some different shapes (like cross-hairs), but I didn't see a magnifying glass.
If that's NOT possible, does anyone have any creative ideas for how, maybe, the user could click and drag a magnifying glass graphic around the screen to find hidden "hot spots" to click on? I'm doing a Sherlock-Holmes-detective-type theme for this activity, so that's why I'm asking about all of this...
Thanks, in advance, for any help! :)
Laura
Discussion (16)
Instead of linking to the same place suggested you could update the link so it looks for an image like this one:
http://www.rw-designer.com/cursor-extern.php?id=12633Or make your own if your looking for something very specific (http://www.ajaxblender.com/howto-create-custom-image-cursors.html)
I don't know...never tried anything like that! But I'll look into it...thanks! :)
A similiar question was asked here: http://community.trivantis.com/forums/topic/how-do-i-change-the-cursor-to-pointer-for-buttons/. It sounds like you'll need to add external HTML to the course. I'll add it as a suggestion too.
Thanks for responding, Jennifer!
Yes, I found that post when I searched the forum, as I mentioned in my original post (see second paragraph). But the document it links to with the various codes for different cursors that you add into the HTML code didn't include a magnifying glass.
Thanks, again, for responding and thanks for adding it as a suggestion. In the meantime, anyone else have any ideas? I need this for an activity that I need to create this week!
Hi Laura,
Made a quick solution for this and shared it here on the forum.
http://community.trivantis.com/shared-content/changing-your-cursor-to-a-magnifier/
undefined
Kind regards.
You are AWESOME, Math...I can't believe you did that for me! <3
I had actually found that cursor.cc website today and had used it to turn a magnifying glass I had painstakingly made in PowerPoint and saved in png to a cur file, but I still wasn't sure how to implement it, so your response was very timely (and I'm just as happy to use the magnifying glass icon you included instead)!
Two follow-up questions, though... What's causing the pointer to turn into a magnifier just over that one text block? I don't see any mouse-over actions attached to that particular text block...
What I really want, in the absolutely most ideal situation, is to have the pointer be a magnifier glass on the main area (i.e., not on the area with the navigation buttons) of just one page and have it turn into a cross-hair when it hits a hot spot.
What I'd settle for is to have the pointer be a magnifier glass on all of the page, but I definitely need it to only be for that one page, not the whole course. I notice that you had the CSS at the top...is it possible to have it just at the page level? (Sorry if this is a dumb question...while I'm pretty experienced with Lectora, I'm not that experienced with using external code in it.)
So, is my "ideal" version possible and, if so, what do I need to do to get there? (I can find the cross-hair .cur file myself, I think...I think I saw it available somewhere). If not, is my "settle for" version possible and, if so, how would I do that? I feel like your sample gets me close, but not quite there (because I can't figure out why the pointer only turned into a magnifying glass for that one block of text).
Thanks again...please let me know if there's ever anything I can do to return the favor! :)
Hi Laura,
No problem, love helping out.
The textblock has a class attached to it.
Check properties... -undefined
}
the first 2 lines with cursor make sure Firefox and Chrome behave well.
the 3rd line with cursor point to the cur.file so IE works as supposed.
Regarding your other questions. Yes, all possible. Just define what page element triggers the cursorchange and voila. I do think there is a crossbrowser code for a crosshair... so you can use that for all browsers..
undefined
Wow - didn't know about that little Appearance dialog box. Thanks - you've taught me a lot! I'll have to play with this some more...just wish that I had more training on the coding side of things. (I'm a good "pseudocoder," but I don't really know how to do actual coding.)
Okay...I'll play with this a bit more...it would be so cool if I could actually get this to work as I'd like it to!
Follow-up question... (first, just so you know, my title only has to be IE compatible)....
I found, downloaded, and added to my title a crosshair.cur file. I then modified your css file so that it reads
.pointerCursor {
cursor: -moz-zoom-in;
cursor:-webkit-zoom-in;
cursor: url('magIE.cur'), auto;
}
.pointerCursor2 {
cursor: url('crosshair.cur'), auto;
}
undefined
Then, for one text box (just as a test) I added the appearance "pointerCursor2" but, when I tested it and moused over that text box, the cursor did not change to a crosshair, it stayed a regular pointer.
So, what did I do wrong?
Hi Laura,
Can't tell for sure what's wrong with your setup without actually seeing it.
Might be you missed adding the cur file to the title by adding it to the additional files ?
Here it should be added...
To help you even better i changed my .awt myself and added it here.
http://community.trivantis.com/shared-content/changing-your-cursor-to-a-crosshair/
No need for a cur file, because a crosshair is a crossbrowser element recognized by all major browsers.
Kind regards,
Math
What's in your textfield? The CSS is only used on content.
If that textfield is empty, the cursor won't change.
If there's a link you'll have to adjust the css to cover links as well.
If there's a button you'll have to adjust the css to cover images and to override Lectoras inline settings.
To use the magnifying glass for buttons and links as well:
.pointerCursor,.pointerCursor a, .pointerCursor img {
cursor: -moz-zoom-in !important;
cursor:-webkit-zoom-in !important;
cursor: url('magIE.cur'), auto !important;
}
-undefined "!important" means, use CSS even if there is a different setting following (which is important for buttons).
Tim
Okay...getting sooooo close!
I figured out what I had done wrong (I had added the crosshair cursor file, but just not in enough places...I wanted to use my crosshair file, because it looks more like a real crosshair (you know...the kind with the circle and the little marks and such?)), but now I have one more wrinkle to work out...
I've decided that I want the crosshair to replace the hand cursor, when the user mouses over an invisible button. (So, they mouse around the image with their magnifying glass cursor and, when they reach a clickable object, the magnifying glass turns into a crosshair.)
How do I update the CSS file to make that happen?
Give the clickable object a specific class... eg. clickableObjectWithCrosshair ( i do like descriptive names ;-)
then add a new class named like that to your css..
I've attached a screenshot from Firefox with Firebug to show what the browser makes of the code published by Lectora.
To make your CSS work on a transparent button with "yourClass" added under "Appearance", it should look like that:
.yourClass a {
cursor: style_1 !important;
cursor: style_2 !important;
}
If you already have a class for the crosshair cursor just add " a" to the class name and add "!important" to each line between the { }.
Tim
Hey Daniel. From my understanding you can. However if you don't use an object or style cursor in CSS you'll lose functionality like when you roll over a button or hyperlink and it changes to the hand. I would suggest checking out and downloading Math's example and changing the cursor style to one of the options he suggested that best matches your needs. He also links to a website where you can create your own cursor. http://community.trivantis.com/shared-content/changing-your-cursor-to-a-crosshair/
Discussions have been disabled for this post