HomeEditingApps › Rollover, Expand/Collapse

Rollover Effect, Expand/Collapse Content

This tool can be used in two modes: either to create a rollover effect when people move their mouse over, or to have content that expands/collapses when clicked.

Creating a rollover effect

Let's say I'd like to display an image on a page that when people move their mouse over it, another image is shown in its place.

Move your mouse over the image below:

This could be done with a regular Word Processor block by editing its Source and adding some JavaScript code. But if you’re not familiar with it, you can still achieve the same effect in YWD without any programming.

This is how you do it:

Add a Rollover Effect, Expand/Collapse block to a page. Make sure the Mode option is set to Rollover effect (it’s de default). In the Normal state content area, enter the content people will see before they mouse over it. A full instance of the Word Processor is available for that, so you can have text, images, tables, etc. In this example, we’re simply putting an image there:

Now scroll down to the Rollover state content area. There, you will enter the content people should see when they move the mouse over the content block. In this case, we’re displaying some overlaid text. We’ll style it, and have it centered.

Scroll down even further. You will see options for the opacity and the background colour of rollover. If you’re simply replacing an image with another, you can leave the opacity at 100%. But in this case we'll have a semi-transparent rollover, with a blue background.

We’ll also be specifying a link so that if people click anywhere on that content, they’ll be taken to the URL you choose – which can be either an external URL or a page of your own website.

Finally, we’ll enter the dimensions. That’s important in this case because we only want the rollover effect to take place when people move their mouse over that specific area. So click the Advanced options button at the bottom...

... and enter the width and height. In this case, we’re using the ones from the normal state image:

Rollover dimensions

That's it! YWD will now “swap” the content when people move the mouse over/out.

Stacked blocks extend the full width of the area – Left, Main, Right columns, Header or Footer – whether the content is wide or not, so the rollover "hot" area extends the full width as well. You can limit that by entering Dimensions into the block's “Box” style (optional) group of the Advanced options.

 

Creating content that Expands/Collapses when clicked

You can use this mode to create content that when clicked will expand and reveal more content underneath it. When clicked again, it will collapse. That's typically used in FAQ (Frequently Asked Questions).

Click the text below:

Who has the most user-friendly Content Management System in the world?

Your Web Department, of course! Our integrated CMS (Content Management System) is extremely powerful but very easy to use. Update your content at any time, straight from your browser and without any programming. Nothing to learn, nothing to install. No other system is like that.

This is how you do it:

Add a Rollover Effect, Expand/Collapse block to a page. Switch the Mode option to Expand/collapse content. In the Clickable content area, enter the text that will be clicked. A common use is a question in a FAQ list. But a full instance of the Word Processor is available, so the clickable content could be an image instead of text if you want.

Note: If you’re using this to tool to setup an FAQ list, you need a separate content block for each question.

Now scroll down to the Expandable content area. There, you will enter the content that will “expand” when people click above it. This content can be long and also contain tables, images, etc.

That's it! YWD will now expand the content when people click on it.

YWD will automatically link the text in the Clickable content field when the page is displayed, so it’s not necessary to link. It will also style it using the the same design settings defined for regular links. Note: If you’re using this to tool to setup an FAQ list, you need a separate content block for each question.

Top of page