Compatibility:

WebSite X5 Evo and Pro

Using an animated image to show a button is being more and more used and appreciated. You will get a more clear picture about this by checking out this Preview page: with the Animated Image Object you can do this and much more. Try it out!



Do you want to see the Animated Object in action? Check out the "Latest Arrivals" section of the Players Room Template.


Stages of an animated image

There are 4 important elements in the Animated Image Object:

  1. the Initial Status, i.e. what you see as the content is loaded;
  2. the Final Status i.e. what is displayed on mouseover;
  3. the Transition, i.e. the effect to go from the initial to the final status;
  4. the Button, which overlaps the contents for the final status and includes a link.


How to set up an animated image

  • Double-click on the Animated Image Object you added to open the settings window.
  • Set the Object Size by defining its Height and Width in pixels and, if you want to, use the Rounded corners option to define how rounded the corners of the Object should be.
  • Choose the Effect you want to use. You can set a Duration of the animation and a Display effect, i.e. if the animation must occur on mouseover or after a certain defined time.
  • Use the available options in the Initial and Final status to define the Object graphic style. In both cases you can:
    • set a background color;
    • import an image file;
    • add and format a text.
  • If you want to add a Button, you need to:
    • activate the Show Button option;
    • report a Label;
    • click on the  button to open the window to set a link;
    • define colors, styles and margins for the button.
  • Click on OK when you're happy with the result.


Are you curious to use this Object on your website pages? Install Animated Image now


You don't have enough Credits to buy this Object? Check out our Credit Packs