Tech Tip: Mouse enter and mouse leave picture effect with a picture variable

PRODUCT: 4D | VERSION: 15.x | PLATFORM: Mac & Win

Published On: May 31, 2017

Many website these days try to animate form objects whenever a mouse hovers over them. The this tech tip will demonstrate how to do create a mouse enter and leave effect in a picture variable of a form. The following method CREATE_MOUSE_PICT_EFFECT will be used to setup the mouse enter and mouse leave pictures:

// --------------------------------------------------------------------------------
// Name: CREATE_MOUSE_PICT_EFFECT
// Description: Method will create the mouse enter and leave pictures effect
// for a picture variable in order to have a animated effect with the given picture
// location and ratio size.
// Input:
// $1 (TEXT) - Location of the picture used
// $2 (REAL) - Ratio of the picture size that will be used for mouse leave effect
// $3 (POINTER) - Saved picture of the mouse enter
// $4 (POINTER) - Saved picture of the mouse leave
// $5 (POINTER) - Object pointer
// --------------------------------------------------------------------------------
C_TEXT($1;$picLoc)
C_REAL($2;$ratio)
C_POINTER($3;$ptrMouseEnterPix)
C_POINTER($4;$ptrMouseLeavePix)
C_POINTER($5;$varObj)
C_PICTURE($picTemp)
C_LONGINT($left;$right;$top;$bottom;$width;$height)

If (Count parameters=4)
    $picLoc:=$1
    $ratio:=$2
    $ptrMouseEnterPix:=$3
    $ptrMouseLeavePix:=$4
    $varObj:=$5

    READ PICTURE FILE($picLoc;$ptrMouseEnterPix->)
    $picTemp:=$ptrMouseEnterPix->
    TRANSFORM PICTURE($picTemp;Scale;$ratio;$ratio)

    PICTURE PROPERTIES($picTemp;$width;$height)
    OBJECT GET COORDINATES($varObj->;$left;$top;$right;$bottom)
    OBJECT SET COORDINATES($varObj->;$left;$top;$left+$width;$top+$height)

    $ptrMouseLeavePix->:=$picTemp
End if

Here is the following code of the Picture variable object method:

Case of
    : (Form event=On Load)
     C_TEXT($loc)
     C_PICTURE(mouseEnterPix;mouseLeavePix)

     $loc:=Get 4D folder(Database folder)+"SC_coffee.jpg"
     CREATE_MOUSE_PICT_EFFECT ($loc;0.9;->mouseEnterPix;->mouseLeavePix;Self)

    : (Form event=On Mouse Enter)
     PictVariable:=mouseEnterPix

    : (Form event=On Mouse Leave)
     PictVariable:=mouseLeavePix

End case

The following settings would need to be set on the Picture variable object:

Here is the effect when the mouse enters the object:

Here is the effect when the mouse leaves the object: