Mouseover change images


(Brian McCusker) #1

Hi there. I’m new to Hype and I’m trying to use mouseovers to change from one image to another. Does one of the action functions using mouseover perform this or do I need to interject my own javascript? Any help out there will be greatly appreciated.

-Brian


Mouse-over images aren't displaying - Hype or other?
(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

I’m not sure, but you might be able to use just Hype – no custom coding…

The background of the element would change based on keyframes in the timeline. The mouseover would cause the timeline to play, while actions on the timeline would pause the timeline with each image.


#3

@BMc,

Would creating a textured button and modifying it do the trick?
To do that,
1st insert textured button and on normal, select Inspector>Element>Background>Fill Style> Image,
then select the image, continue doing the same for hover and pressed.

You should be good after that

Regards,
techgiant2000 Hype Pro 3.0.3, Mac OSX El Capitan


(Brian McCusker) #4

Okay gotcha. Yes, I’ll try that. Is this typically how it’s done? When the pointer moves away, I suppose I set the action to go back to the original keyframed timeline.

Thank you


(Brian McCusker) #5

Hm… just saw the second solution. I’ll give that a go. Thank you techgiant2000.


#6

Please let me know what approach you used.
Regards,
techgiant2000


(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #7

Oh, you only want one image? Yeah, that’s how it’s usually done. HA HA.

If you’re using Button Controls, the image automatically goes back to the original.


(Brian McCusker) #8

I’m attempting to make a web comic. I want some of the comic panels to animate (animated gifs) when there is a mouse over. All the other frames of the page will stay the same. There may be multiple mouse overs on any given page. I don’t think that’ll make a difference.

Thank you for all your suggestions.

-Brian


(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #9

The problem with relying on MouseOvers is that mobile devices (such as iPhones / iPads) don’t support Mouse Hovers. Mobile devices are an increasingly larger percentage of web traffic.

With current trends, desktops will be in the minority of web browsing devices.


(Brian McCusker) #10

Right. Yes, that is true. Hmm… something to consider.


#11

Something like this?
comic.hype.zip (1017.2 KB)

Regards,
techgiant2000


(π•„π•šπ•”π•™π•’π•–π• 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #12

Maybe like this…

…or maybe like this…


(Brian McCusker) #13

Hi there. I tried the textured button feature and it is exactly what I was hoping for. It works perfectly for my purposes. Perhaps I’ll consider a mobile device version as well.

Thank you for all the tips.

-B


(brian) #14

I couldn’t remember for the life of me how to make a rollover button without resorting to timeline (or straight code). So glad I stumbled on this. For mobile I am assuming the pressed state still works. Interactivity to some degree sans rollover.


(Freelancer) #15

@techgiant2000 @BMc @byahoo

I made some examples with mouseover using Hype only, no javascript.
this could be useful?


#16

@michelangelo Nice - Thank You!


#17

Thank you sir!


(Freelancer) #18

thanks for the comments guys


#19

Trying to recreate this (great idea by the way) how did you add two seperate gifs for hover overs? and is the first image a still of the gif or a seperate file

Hope this reaches you
many thanks


(Neomi Vembu) #20

This is really basic… any step by step or tutorial videos?