Mouseover rollover effects

[Omar319]

Hi,
How do I make a picture change to something else when the mouse rolls over it?

Is the code anything like:
on mouseOver
*change picure1 to picture2*
end mouseOver

on mouseOut
*change picture2 to picture1*
end mouseOut

Thanks,
Omar

[gyroscope]

Hi Omar, I'd be interested as well to know how to change the contents of an image rectangle...however, as there's more than one way to do stuff in Rev on quite a few occassions, I'm finding, here's another way to achieve what you're after (it's a bit clumbsy, but should work):

Set up three image boxes, picture 1, picture 2 and the one on top empty.

In the script of the empty one put:

Code: Select all

on mouseEnter
set the visible of image "picture 2" to false
end mouseEnter

on mouseLeave
set the visible of image "picture 2" to true
end mouseLeave 

Hope that's of use to you!

[Omar319]

That works perfectly, thanks

Any other ideas on how to do it? It's quite tedious doing it this way even though this works.

Thanks,
Omar

[BvG]

make two images, and note the id of each.

make a button, set its style to "transparent button".

set the icon of the button to the id of the first image.
set the hoverIcon of the button to the id of the second image.

Don't forget to read the relevant docu entries.

[bjb007]

If there's a way to programme
the "move to front" option in the
Inspector it could be used.

Is there a way? Can't find any
reference to it.

[SparkOut]

Yep:

Code: Select all

set the layer of image "imagename" to top

or bottom, or "layer number", as appropriate

[bjb007]

Thanks for that SparkOut.

Starting to wonder if I'll live
long enough to find all the really
usefull stuff in Rev.

[Omar319]

Thanks guys.
That's answered it all perfectly

[SparkOut]

Just to reopen this thread to the original question, you can set the imageData property on mouse events to swap your pictures.
I have done this in a standalone to keep the file size down by not having a (large) background image on every card. On cardOpen events were handled to size and fill a blank image placeholder with the imageData of the background image which was set on the login page.

Changing the image data is easy enough. If the pictures are not the same size then you should resize the placeholder first to be the same size as the image you will insert, otherwise you will get garbage images. If you are using mouseEnter and mouseLeave events then you should also be careful that any resizing does not create spurious mouseEnter and mouseLeave messages due to the rect of the image placeholder changing the edge beyond the mouseLoc. You might have to lock messages for the moment of resizing if so.

Code: Select all

local sLoc = "700, 280" --your image placeholder position

on mouseEnter
  lock screen
  set the width of me to the width of image id 1066 
  -- or the long name of the image, etc referencing the picture location in the "gallery"

  set the height of me to the height of image id 1066
  -- you could use the rect of the gallery image, but you will probably
  -- have to lock messages if so, as otherwise you may get an infinite loop
  -- of setting the rect, triggering a mouseLeave message, setting the loc, triggering a mouseEnter message ad infinitum
  -- any difference in size of the images may cause a runaway loop too if you aren't careful

  set the loc of me to sLoc
  set the imageData of me to the imageData of image id 1066
  unlock screen
end mouseEnter

on mouseLeave
  lock screen
  set the width of me to the width of image id 1067
  set the height of me to the height of image id 1067
  set the loc of me to sLoc
  set the imageData of me to the imageData of image id 1067
  unlock screen
end mouseLeave

[lswing]

I've noticed the mouse over image swap does not work when holding down the left mouse button, ie when dragging an object. Know how to solve this?

[Klaus]

Hi Iswing,

check the "dragenter" and the other "dragXXX" messages in the dictionary!


Best

Klaus