Rollover Mouse effects

Eric Chatonet eric.chatonet at sosmartsoftware.com
Sun Jan 8 02:05:11 EST 2006


Hi Ken and SupermanSlyr,

This method is perfect and easy and, as usual, very well explained by  
Ken.
I would only point out a special case: when the autoArm of a button  
is set to true, the mouseDown message is no longer sent by the engine  
(why? I don't know :-).
Then, if you need to trigger this message (and it's often the case to  
implement a 'three-states' button, you have to script all the process  
by yourself :-(
i.e. trapping mouseEnter, mouseLeave, mouseDown, mouseUp and  
mouseRelease...

Best Regards from Paris,
Eric Chatonet

Le 8 janv. 06 à 07:54, Ken Ray a écrit :

> On 1/7/06 9:29 PM, "SupermanSlyr at aol.com" <SupermanSlyr at aol.com>  
> wrote:
>
>>
>> Hello, I thank everyone very much. I wouldn't get by without  your  
>> help. It
>> always seems to be the simple things I have issues with. Now I'm   
>> trying to
>> figure out how to make an image have mouse-over effects. I have 2  
>> of  each
>> image;
>> one for when the mouse enters it, and one for when it leaves it   
>> (Highlighted
>> and un highlighted). I've tried putting both image frames  on the  
>> card at
>> once, while trying to make the appropriate one  invisible with  
>> onMouseEnter.
>> I've also tried importing from my hard  drive and replacing the  
>> current image,
>> but so far it hasn't worked like I  planned.
>>
>>  Maybe I'm going about this the wrong way. How can I get the rollover
>> effects I'm looking for? I want the picture to change to another  
>> picture when
>> the
>> mouse pointer is moved within it, but change back to the original  
>> when  the
>> mouse pointer leaves from within it. I'm sure working with a gif  
>> file  would
>> be
>> simpler, but I don't have a gif file creation program, so I need  
>> an  alternate
>> route.
>
> Your best bet would be to do this:
>
> 1) Create a button, make it transparent (turn off the Show Name and  
> Opaque
> properties from the Basic section of the Inspector, and the Border  
> property
> from the Icons and Borders section of the Inspector). Note the ID  
> number of
> the button for step #4
>
> 2) Note down the ID numbers of each of the images you want to use  
> for the
> "normal" and "rollover" states (you can click each one and check  
> the ID
> number in the Inspector).
>
> 3) Select the button go to the Icons and Borders section of the  
> Inspector
> for the button and set the Icon field for the button to the  
> "normal" state
> image ID, and set the Armed Icon field for the button to the  
> "rollover"
> state image ID.
>
> 4) Unfortunately this next step isn't in the Inspector (where it  
> should be).
> Click on the "Message Box" icon in the toolbar, and type the  
> following into
> the message box (substitute the ID you wrote down in #1 for  
> <idGoesHere>):
>
>   set the autoArm of button id <idGoesHere> to true
>
> and hit the Return key.
>
> 5) Resize the button to fit the image(s), and choose the browse  
> tool. When
> you move it over the button, the image will switch to the  
> "rollover" icon;
> when you roll off, it will return to the "normal" icon.
>
> Now all you need to do is hide your images (since you don't need to  
> see them
> anymore - uncheck "Visible" in the Basic section of the Inspector  
> for each
> one).
>
> And there you go!

------------------------------------------------------------------------ 
----------------------
http://www.sosmartsoftware.com/    eric.chatonet at sosmartsoftware.com/





More information about the use-livecode mailing list