Images Rollover - méthode des portes coulissantes
Publié : mer. 02/mars/2011 2:36
Le rollover est une technique qui permet de changer une image par une autre image, lorsque le curseur de la souris passe sur celle-ci.
la technique employée dans ce code est la méthode des portes coulissantes que certains d'entres vous connaissent si vous exploitez cette technique dans le domaine du WebDesign.
le bouton survolé est composé de deux images. Une pour l'état normal et une autre image l'état survolé. on va les regrouper dans une seule et même image. Ici, par exemple, on crée une image de 200x24 px.

Récupérez cette image depuis le lien ci-dessous et placez la dans le meme dossier que le code que je vous propose.
http://s242132022.onlinehome.fr/Downloa ... outon2.jpg (Clique bouton droit puis enregistrer le lien sous ...)
la technique employée dans ce code est la méthode des portes coulissantes que certains d'entres vous connaissent si vous exploitez cette technique dans le domaine du WebDesign.
le bouton survolé est composé de deux images. Une pour l'état normal et une autre image l'état survolé. on va les regrouper dans une seule et même image. Ici, par exemple, on crée une image de 200x24 px.

Récupérez cette image depuis le lien ci-dessous et placez la dans le meme dossier que le code que je vous propose.
http://s242132022.onlinehome.fr/Downloa ... outon2.jpg (Clique bouton droit puis enregistrer le lien sous ...)
Code : Tout sélectionner
;Image Rollhover
;
;L'image est au format JPEG
UseJPEGImageDecoder()
;Un gadget est il survolé (Joli macro hein ?"
Macro GadgetHoverCheck(x, y, Gadget)
(((Not x<GadgetX(Gadget)) & (Not y<GadgetY(Gadget))) &(Not x>=(GadgetX(Gadget)+GadgetWidth(Gadget))) & (Not y>=(GadgetY(Gadget)+GadgetHeight(gadget))))
EndMacro
Enumeration
#MainForm
#ButtonImage1 ;Bouton Image 1
#ButtonImage2 ;Bouton Image 2
#ButtonImage3 ;Bouton Image 2
#ImageButtons ;Image dans sa totalité
#ImageState_Hover ;Image Survolé (Segment 0 longueur 100 Px sur une hauteur de 24 Px)
#ImageState_Normal ;Image normal (Segment 100 longeur 200 Px sur une hauteur de 24Px)
EndEnumeration
;Position X, Y de la souris
Global X.i, Y.i
;Chargement de l'image
LoadImage(#ImageButtons, "Bouton2.jpg")
GrabImage(#ImageButtons, #ImageState_Hover, 0,0,100,24)
GrabImage(#ImageButtons, #ImageState_Normal, 100,0,100,24)
;Affichage de notre fenetre
Procedure MainFormShow()
OpenWindow(#MainForm,0,0,500,300,"Bouton Image Rollover",#PB_Window_ScreenCentered |#PB_Window_SizeGadget | #PB_Window_SystemMenu)
ImageGadget(#ButtonImage1,10,20,106,32,ImageID(#ImageState_Normal))
ImageGadget(#ButtonImage2,120,20,106,32,ImageID(#ImageState_Normal))
ImageGadget(#ButtonImage3,230,20,106,32,ImageID(#ImageState_Normal))
EndProcedure
;Il y a t'il un bouton survolé
Procedure GetButtonHover()
SetGadgetState(#ButtonImage1,ImageID(#ImageState_Normal))
SetGadgetState(#ButtonImage2,ImageID(#ImageState_Normal))
SetGadgetState(#ButtonImage3,ImageID(#ImageState_Normal))
If GadgetHoverCheck(X,Y,#ButtonImage1)
SetGadgetState(#ButtonImage1,ImageID(#ImageState_Hover))
EndIf
If GadgetHoverCheck(X,Y,#ButtonImage2)
SetGadgetState(#ButtonImage2,ImageID(#ImageState_Hover))
EndIf
If GadgetHoverCheck(X,Y,#ButtonImage3)
SetGadgetState(#ButtonImage3,ImageID(#ImageState_Hover))
EndIf
EndProcedure
MainFormShow()
Repeat
X=WindowMouseX(#mainform)
Y=WindowMouseY(#mainform)
GetButtonHover()
Select WaitWindowEvent()
Case #PB_Event_Gadget
Select EventGadget()
Case #ButtonImage1
Debug "Bouton 1"
Case #ButtonImage2
Debug "Bouton 2"
Case #ButtonImage3
Debug "Bouton 3"
EndSelect
Case #PB_Event_CloseWindow
End
EndSelect
ForEver