Have a webpage. On it I have 4 icons, each of which is a link to another site. For example I have a twitter icon. It clicked it takes you to my twitter page. What I've been trying to do, with no success, for hours upon hours is make it so if the user points the mouse to the icon, the mouse changes to another image next to the twitter icon. For example you point to my twitter icon, the mouse becomes an image i create of perhaps my face, or something of this nature. I store all my icons/images that I would use on imgur.
Here is what I have so far, which works and if you click takes you to another website:
a href="address of page to link " &domain=name of domain" target="_blank" rel="nofollow"> /a>
I then tried the following, but did not work:
a href="https://domain address " &domain=domain name" target="_blank" rel="nofollow"> /a>
cursor: url('web address for image i want to be cursor'), default !important;
On Mouse Click... do something. In this case, it's running JavaScript. The website says this is your first post, so that might be a bit too advanced. No problem. In your project, since you only have four icons, you could create four separate timelines... or four separate points on the timeline. Then, when a "Mouse Down" or "Mouse Over" event occurs, you can tell your Hype project to go there.
In the free template, I didn't have "On Mouse Over" setup. So, I tested it out with mouse over events. (The change is shown in the screenshot above.) I think that's the effect you're looking for. If you don't want to post your Hype project, experimenting with the "Multilingual" template might help you to understand Hype's "Mouse Over" actions.
If you're using "Button Controls", that might be why you're having a hard time. Also, Mouse Over is something I try to avoid, as mobile devices are very popular — and many don't have a mouse.
It is a little hard to figure out the problem without your exact .hype document, so feel free to post that.
The cursor CSS property is the correct one to use; your syntax looks good to me. It might be more of an issue with the setup.
I've attached a document which changes the cursor when over an element. I gave the element a Class Name in the Identity Inspector, and then have CSS in the Head HTML that sets the cursor for that class name.
I tried using "important", "auto", switching to the document "body" tag... nothing.
The mouse over was being detected, because the console log was printing out a message. However, the image wasn't changing.
I've actually faced this problem before. My solution works, but it's the hard way. Basically I created an element that changes position based on mouse movement. It's the "crosshair" in Annoyed Tomatoes...
That technique could be applicable here... just change the background image of the element when a mouse over event is detected... and then just hide the element on mouse out.
I gotta get going, but if this is still a problem when I get back, maybe I'll post some code.
I'm guessing that you might have not gotten the magic combination with this syntax: you have to specify a callback whenever using a url cursor, and you cannot use !important with direct setting syntax. Therefore the proper call would be something like:
Still not working... maybe it's the size of the image? I tried making a square image... 32x32 pixels... still didn't work. I tried using the code with a mouse over event on a button. It flickered for a second, showing the pointer, but then it went back to an arrow.
Failed to load resource: the server responded with a status of 404 (Not Found)
I checked the URL... http://127.0.0.1:51001/preview/70677F1E-56ED-4BE3-BB50-6F33B4D50AEC-1581-0000001907B0F6AD/index.hyperesources/box.png ...and it looked right.
I figured it out though. It was a retina image issue. I had to uncheck the "Automatically optimize when exporting" option.
At start... show the beginning HTML. Then, on mouse over, use an action to go to the keyframe with the modified HTML. Afterwards, a mouse out action could be used to go back to the beginning frame.
