Advanced Editing

Hover Images

You can make images that change if you hover over them with your mouse pointer.  This is useful for animated buttons but could be utilized for a variety of additional purposes as well.  To do this, you first need two images.

Image 1:

Image 2:

Now, insert one of the images as you normally would (by using the image insert button).  After you select the image (or fill in the link url), click on the advanced tab and check "Swap Image."  Now, use the "for mouse over" and "for mouse out" boxes to insert additional images.  The "for mouse over" image will be shown when the mouse pointer is over the image.  The "for mouse out" image will be shown when the mouse pointer leaves the image.  Note: If you do not choose a "for mouse out" image in addition to a "for mouse over" image, then the image will change permanently when you hover.  To counteract this (and make something similar to the example below, set the "for mouse out" image so that it is the same as your original image (in the "link url" box).

Hover over the image:

You can use this method to create a dynamic navigation bar for your site by attaching links to the rollover buttons as well.  You can also use this in conjunction with the Lightbox function (described below) to make some really engaging effects.


Lightbox allows you to create dynamic popups of media.  Click an example below to see it in action.

Example 1:

Example 2

To add lightbox functionality to a link (whether it is a text or image link does not matter), add a link to a page, choose a type of media for the link url, and under the advanced tab, change "Relationship page to target" to Lightbox.

Additionally, if you don't mind editing the HTML, you can turn your links into a gallery (with next and previous buttons appearing within lightbox) as follows:

While editing the page, click on the "HTML" button in the editor.  Find the <a href=...> tag for the link you want to add to the gallery and plug this code in before the closing bracket: rel="lightbox[yourgallerynamehere]".  Do this for every link you want to add to the gallery.  It's that simple!  You can have as many galleries per page as you like.  Be aware, however, that if you set this and then reopen the link editor for a link, your changes will be erased (because they are not recognized by the editor).

To turn your images into a playable slideshow, simply do as stated above, but instead of "lightbox[...]" use "lightshow[...]".  Example here and here.

Additionally, you can embed web pages into a lightbox popup (like this) by changing the rel="" tag to rel="lightframe".  Gallery options apply here as well (Example 1, Example 2, Example 3); this is how the preview links were done in the site list page.