---

How to use use Transparent Links in Wireframing

This tutorial will guide you to use Transparent links in Wireframing.

1. Prepare Screenshots
2. Add Transparent links
3. Attach Link control to a page
4. Generate HTML Pages with links
5. Wireframing in HTML Pages
6. More Information

Prepare Screenshots

Transparent links allow you to add an invisible link to a control or image.

1. For example, you have GUI screenshots of existing Websites or Web Applications or Desktop applications.
2. You want to use them as base and add links to various part of each screenshot.
3. You also want to click on a link to show the page attached to that link.

For this tutorial, we have created two screenshots MainPage and Autos Page.

Add Transparent links

1. In Shapes Explorer window, Select Wireframe Tab.
2. Drag and Drop Transparent Control on Autos Tab in the screenshot.

Attach Link control to a page

1. Select Main Page.
2. Select Transparent link on Autos Tab (that you have added in the previous step).
3. Press F6 to change the links.
4. Edit Links dialog will be shown.
5. Select Autos Page as target page.
6. Set Link Enabled checked.
7. Add a tooltip text.
8. Click OK.

Generate HTML Pages with Transparent links

1. Select Reports | Pages | Generate HTML Report... from Main menu.
2. Export to HTML Files dialog will be shown.
3. Select a folder to save html files for all pages.
4. Click OK.

Wireframing in HTML Pages

1. In MainPage, Hover mouse on Autos Tab control.
2. A tooltip text will be shown.
3. Click on the tab.
4. Autos Page will be shown.

More Information

1. You can add Transparent links on any control or image.
2. To insert a image from Image File, Press Ctrl + Alt + O or select Insert | Image | Insert Image from file... menu item from Main menu. The advantage of using Image file is that if the image file is updated externally, it will be shown in DesignerVista page design.
3. To insert a image from Clipboard, Press Ctrl + Alt + V or select Edit | Clipboard | Paste Image from clipboard menu item from Main menu.
4. To remove the red color border in Transparent Link control, Select No Border in Edit Properties window.

The End