Explore the community Forums Lectora Lectora Questions & Answers Changing Cursor to a Magnifying Glass?

Tagged: 

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #304135 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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

    #304136 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @jvalley4735

    A similiar question was asked here: https://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.

    #304137 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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!

    #304138 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @jvalley4735

    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=12633
    
    Or make your own if your looking for something very specific (http://www.ajaxblender.com/howto-create-custom-image-cursors.html)
    
    #304141 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    I don’t know…never tried anything like that! But I’ll look into it…thanks! 🙂

    #304159 Score: 4
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    115 pts
    @mnotermans5114

    Hi Laura,

    Made a quick solution for this and shared it here on the forum.

    https://community.trivantis.com/shared-content/changing-your-cursor-to-a-magnifier/

     

    Kind regards.

    This post has received 4 votes up.
    #304176 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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! 🙂

    #304206 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    115 pts
    @mnotermans5114

    Hi Laura,

    No problem, love helping out.

    The textblock has a class attached to it.

    Check properties… -> the little triangle right to Appearance.. and there you see the textblock has a class named ‘pointerCursor’ to it. In the included CSS file, ‘style.css’ is the appropriate css code to ensure that it changes on hover.

    .pointerCursor {
    cursor: -moz-zoom-in;
    cursor:-webkit-zoom-in;
    cursor: url(‘magIE.cur’), auto;
    }

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

     

    Kind regards,

    Math

     

    This post has received 1 vote up.
    #304208 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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!

    #304209 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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;
    }

     

    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?

    #304220 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    115 pts
    @mnotermans5114

    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…

    additional files

    To help you even better i changed my .awt myself and added it here.
    https://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

    #304232 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    294 pts
    @timk

    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;
    }

    -> “.pointerCursor” means the same as usual

    ->”.pointerCursor a” means, use CSS for links that are inside objects with the class (otherwise the usual finger is used)

    -> “.pointerCursor img” means, use CSS for images that are inside objects with the class (buttons). Normal images are already covered by “.pointerCursor”, because Lectora adds no cursor definition for normal images only for images that are used as buttons.

    -> “!important” means, use CSS even if there is a different setting following  (which is important for buttons).

    Tim

    #304429 Score: 0
    Profile photo of Laura Gillenwater
    Laura Gillenwater
    Member
    contributor
    advanced
    intermediate
    friend finder
    verified member
    advocate
    wise owl
    profile
    picture perfect
    Group Member
    12 pts
    @tecocat

    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?

    #304577 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    115 pts
    @mnotermans5114

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

    #304620 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    294 pts
    @timk

    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

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.