Rollover Mouse effects

Ken Ray kray at sonsothunder.com
Sun Jan 8 01:54:49 EST 2006


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!


Ken Ray
Sons of Thunder Software
Web site: http://www.sonsothunder.com/
Email: kray at sonsothunder.com





More information about the use-livecode mailing list