Target Show/Hide Image Action

13th of February, 2013

Type of Action: Item Action (to use it, select an item and go to Item>Actions to choose the Action from the list).

What the Action can do: This Action lets you do the following:

  • It can display a different image each time a rollover is moused over or clicked (but unlike the Target Image Action, you don't need to use the target images in a stack on the page
  • It can create a slideshow of images (used either as a stack or in different areas of your page) so that the images display in a specific order and which change after a given period
Note: If you want are using a stack on images on your page you might want to consider using the Target Image Action instead as this has a very different workflow but the functionality can be made to be the same (but if you intend to use a large amount of images, we recommend using this Action). Also, you need to be aware that a slideshow built using the Target Image Action will simply switch immediately to the next image without a soft transition - if you want to use a soft (fading) transition for your slideshow you will need to use the Target Show/Hide Layer Action, which is a Pro-only Action.

The Target Show/Hide Image Action is used to make a specified image (or group of images) display when an event is triggered. By far the most common way it is used is to show the large version of an image when a thumbnail image is moused over or clicked. Unlike the Target Image Action, you don't need to use images in a stack for the Action to work - you can use images in different places on your page and it will work fine.

However, because the Target Image Action lets you apply the Action to a stack (so all images which are "combining" appear in the Actions palette), it is important to note that you need to apply the Target Show/Hide Image to each image individually. If you are using the items in a stack, the recommended workflow for this is to set up your first Target Show/Hide Image, apply all the necessary options in the Actions palette, then duplicate the item to create a new item so you can import a new graphic file into the item and change its Target Number in the Actions palette.

It’s worth pointing out that target show/hide images on their own don’t do anything. As their name suggests, they are simply the target of some other activity. Most often, they will be used with rollovers which trigger specific images to display when the rollover is moused over and/or clicked. They can, however, be used in other ways, such as with a Page Action called Sequence Timer which is applied to a page containing a stack of target images to make them appear in a set sequence when the page is loaded.
The Target Show/Hide Image Action is limited to a maximum number of 20 images per target group (though an Action with an upper limit of 60 is available on ActionsForge at <http://www.actionsforge.com/actions?q=60+targets> where you will find 60 versions of all trigger and target Actions).
Target Show/Hide Image options in the Actions palette
The options in the Actions palette for a Target Show/Hide Image item are in a single window, and consist of a column of popups.


  • Initially: This popup controls whether the image is visible or not on page load. By far the most common choice here (especially if the images are used in a stack) is "Hidden", which will mean that there will be no images visible on page load. If you want one of your images to be visible on page load, we recommend you duplicate the image you want to be shown on page load, remove the Action from it and then send the item so it is behind the stack of images.
  • Restore: This pop-up menu controls whether the stack of target images restores back to the Normal state when the mouse is moved away from the rollover when the trigger is set to MouseOver. “Yes” displays as default which will mean that moving the mouse away from the trigger will change the stack back to its Normal state. If you set it to “No”, the image will only return to its Normal state when the page is revisited or reloaded. Setting the menu to “Sticky” retains the MouseOver or Click state until you mouseover another rollover on the page. "Toggle" means that mousing over or clicking on the rollover trigger will toggle the triggered image on and off alternately.
  • Preload: By default, this pop-up menu is set to “Yes”, which means that all the graphics of the rollover will load into the browser’s cache before the rollover is displayed. This makes the transition from one state to another smoother as the graphics for each state don’t need to load when the transition is made.
  • Target Group: When using a trigger, you can set different groups of targets to be triggered when a different trigger is activated. Target Groups have color names (such as Indigo and Cobalt). Indigo is the default target group.
  • Target #.: This popup tells the trigger Action which target number has been assigned for this particular item. For the functionality to work correctly, you need to set the corresponding MouseOver or Click Number used by the trigger Action so the correct Target Show/Hide Image item is displayed.

A common query with the Target Show/Hide Image Action

Query: Why does my stack of Target Show/Hide Images not work correctly when used with the Rollover Action or the Sequence Timer Action/

Solution: You need to set all the Initially values for the items in your stack so they are all the same. If you want to set all the Target Show/Hide Image items to Hidden, you will need to duplicate the item you want to display on page load, remove the Action and then send the item behind the stack of images.

User Opinions

25% thumbs up 75% thumbs down (4 votes)

How would you rate this answer?



Thank you for rating this answer.

Continue