Roll-over images are frequently added to Digipage brochures in order to highlight an area of the page and bring it into focus when the user’s mouse hovers over a link. However, what is not so well known is that they can also be used to quickly and easily display different content that isn’t on the page – and we’ve just made this process even easier.

Traditionally, it was necessary to host images elsewhere and link through to them from the Digipage control panel using the ‘external’ rollover parameter in the page editor. This process was made somewhat complex by the need to create a crossdomain.xml file on the off-site location in order to allow Digipage to load the image.

We’ve now created a ‘local’ option which greatly speeds up this procedure. In the example above, we created the following image (here shown at 50% full size) and uploaded it to the Digipage document by clicking the Upload -> Media button in the eBook editor. We named the file ‘tv-option.jpg‘:

Next, we edited the page where we wanted the roll-over to appear, selected the roll-over tool and drew a box over the area that should activate the roll-over link. In the parameters for the roll-over, we selected ‘local‘ from the rollovertype drop-down and typed the filename ‘tv-option.jpg‘ as the name of the roll-over:

Drawing a roll-over area and setting it to load a locally-hosted image.

Finally, we simply clicked Apply, saved the page and recompiled the brochure. Now, when we preview the document, moving your mouse over the roll-over area automatically loads the additional content in the centre of the screen.

The roll-over system has additional features – for example it can be used to display additional textual information alongside the image and can even link into a pre-existing shopping cart system to allow people to purchase items directly from the Digipage brochure. We’ll cover those items in a later post.