Example information bubble templates

Here are some example generic information bubble templates you can use in Insight:

Tall photo:

<!-- INSTRUCTIONS: Replace these placeholders to customize your balloon.

{Banner image} - Image data or URL for your organization's banner.

Preferrably, no wider than 350-400 pixels.

{Title} - title for the balloon. Can be different and longer

than the placemark's name.

{Subtitle} - subtitle for the balloon.

{Photo image} - Image data or URL to a photo no wider than 350-400 pixels.

{Description} - text for this balloon.

{Link 1 label} - Name of first link.

{Link 1 URL} - URL for the first link.

{Link 2 label} - Name of second link.

{Link 2 URL} - URL of second link.

{Footer text} - copyright or footer.

-->

<table width="400" border="0" cellspacing="0" cellpadding="5">

<tr>

<td colspan="2" align="center" class="template_block">

<img src="{Banner image:image:Click to put a banner image here}" alt="banner" width="400" height="60" />

</td>

</tr>

<tr>

<td colspan="2" align="center">

<h2 style="color:#00CC99" class="template_block">{Title:text:Click to set the title or name}</h2>

<h3 style="color:#00CC99" class="template_block">{Subtitle:text:Click to set the subtitle}</h3>

</td>

</tr>

<tr>

<td colspan="2" align="center" class="template_block">

<img src="{Photo image:image:Click to put a photo here}" alt="picture" width="400" />

</td>

</tr>

<tr>

<td colspan="2">

<p style="color:#3399CC" class="template_block">{Description:text:Click to set the description}</p>

</td>

</tr>

<tr>

<td align="center" class="template_block">

<a href="{Link 1 URL}">{Link 1 label:text:Click to set link 1}</a>

</td>

<td align="center" class="template_block">

<a href="{Link 2 URL}">{Link 2 label:text:Click to set link 2}</a>

</td>

</tr>

<tr>

<td colspan="2" align="center" style="color:#999999" class="template_block">

{Footer text:text:Click to set footer text}

</td>

</tr>

</table>

Text and photo banner:

<!-- INSTRUCTIONS: Replace these placeholders to customize your record layout.

{Photo image} - Image data or URL of the picture. Ideally less than 400 pixels wide.

{Title} - title for the balloon. Can be different and longer

than the placemark's name.

{Description} - text for this balloon. Break up paragraphs using

<p></p> tags, or line breaks: <br />.

{URL to more info} - link to a "learn more" page on your website.

{Name of your Organization} - the name of your organization.

{Organization web site} - URL and link label of your org's website.

{Logo image} - Image data or URL to your org's logo.

-->

<table width="400" border="0" cellpadding="5" cellspacing="0" style="background:#e8e9cb">

<tr>

<td class="template_block" align="left">

<img src="{Photo image:image:Click to put a banner photo here}" alt="picture" width="400" height="100" />

</td>

</tr>

<tr>

<td>

<h2 class="template_block" style="color:#006600">{Title:text:Click to set the title or name}</h2>

</td>

</tr>

<tr>

<td>

<blockquote>

<p class="template_block">{Description:text:Click to set the description}</p>

<p class="template_block">

<a href="{URL to more info:text:Click to set the web link to read more}" rel="external">Read more...</a>

</p>

</blockquote>

</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>

<table width="100%" border="0" cellpadding="5" cellspacing="0" style="background:#e8e9cb">

<tr>

<td align="right" valign="middle" style="width:99%;">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td align="right" valign="top"><h4 class="template_block" style="color:#006600">{Name of your Organization:text:Click to set organization name}</h4></td>

</tr>

<tr align="right" valign="top">

<td class="template_block">

<a href="{Organization web site:text:Click to set your web address}" target="_blank">{Organization site name:text:Click to label your web site}</a>

</td>

</tr>

</table>

</td>

<td align="right" valign="middle" style="width:1%;" class="template_block">

<img src="{Logo image:image}" alt="logo" width="80" height="80" />

</td>

</tr>

</table>

</td>

</tr>

</table>

Text and tall photo:

<!-- INSTRUCTIONS: Replace these placeholders to customize your record layout.

{Name of your Organization} - the name of your organization

{Photo image} - Image data or URL for the vertical picture on the left.

Preferrably, no wider than 150-200 pixels.

{Slogan} - your organization's slogan, or other short message.

{Title} - title for the record. Can be different and longer

than the placemark's name.

{Description} - text for this record. Break up paragraphs using

<p></p> tags, or line breaks: <br />.

{URL to more info} - link to a "learn more" page on your website.

{Link 1 label} - Name of first link.

{Link 1 URL} - URL for the first link.

{Link 2 label} - Name of second link.

{Link 2 URL} - URL for the second link.

{Link 3 label} - Name of third link.

{Link 3 URL} - URL for the third link.

{Logo image} - Image data or URL link to your org's logo.

{Footer text} - copyright or footer.

-->

<table width="500" border="1" cellpadding="0" cellspacing="0">

<tr>

<td colspan="2" align="right" style="background:#669966">

<h2 style="color:#FFFFFF" class="template_block">{Name of your Organization:text:Click to set organization name}&nbsp;</h2>

</td>

</tr>

<tr>

<td align="left" class="template_block">

<img src="{Photo image:image:Click to put a photo here}" alt="picture" width="150" height="400" />

</td>

<td rowspan="2" valign="top">

<table width="0" border="0" cellpadding="0" cellspacing="0">

<tr>

<td align="right" style="color:#666633;width=99%" class="template_block">{Slogan:text:Click to set a slogan}

</td>

</tr>

<tr>

<td style="width:99%">&nbsp;</td>

</tr>

<tr>

<td style="width:99%">

<h2 style="color:#009999" class="template_block">{Title:text:Click to set the title or name}</h2>

<p class="template_block">{Description::Click to set the description}</p>

<p class="template_block"><a href="{URL to more info:text:Click to set the web link to read more}" rel="external">Learn more...</a></p></td>

</tr>

<tr>

<td align="center" style="width:99%">&nbsp;</td>

</tr>

<tr>

<td align="center" style="width:99%">

<p class="template_block">

<a href="{Link 3 URL}" rel="external">{Link 3 label:text:Click to set link 3}</a>

</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td style="width:1%" align="center" valign="top"><br />

<br />

<div class="template_block"><img src="{Logo image:image}" alt="logo" width="150" /></div>

<br /><br />

<span style="color:#999999" class="template_block">{Footer text:text:Click to set footer text}</span></td>

</tr>

</table>

Text and weblinks:

<!-- INSTRUCTIONS: Replace these placeholders to customize your balloon.

{Banner image} - URL for your organization's banner.

Preferrably, no wider than 400-450 pixels.

{Title} - title for the balloon. Can be different and longer

than the placemark's name.

{Description} - text for this balloon.

{URL to more information} - link to a "learn more" page on your website.

{Link 1 label} - Name of first link.

{Link 1 URL} - URL for the first link.

{Link 2 label} - Name of second link.

{Link 2 URL} - URL of second link.

{Link 3 label} - Name of third link.

{Link 3 URL} - URL of third link.

{Link 4 label} - Name of fourth link.

{Link 4 URL} - URL of fourth link.

{Photo image} - URL of image below the link table.

{Image caption} - italicized text under image.

{Footer} - copyright or footer.

-->

<table width="450" border="0" cellspacing="0" cellpadding="5">

<tr>

<td colspan="3" align="center" class="template_block">

<img src="{Banner image:image}" alt="banner" width="400" height="100" />

</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td>

</tr>

<tr>

<td width="300" valign="top"><h2><font color="#000099" class="template_block">{Title:text:Record title goes here}</font></h2>

<p class="template_block">{Description:text:Description about this record}</p>

<p class="template_block">

<a href="{URL to more information:text}">Read more...</a>

</p>

</td>

<td></td>

<td width="125" align="left" valign="top">

<table width="100%" border="0" cellpadding="0" cellspacing="2" class="template_block">

<tr>

<th align="left">Visit our Website</th>

</tr>

<tr>

<td>

<a href="{Link 1 URL:text}">{Link 1 label:text:Link 1}</a>

</td>

</tr>

<tr>

<td>

<a href="{Link 2 URL:text}">{Link 2 label:text:Link 2}</a>

</td>

</tr>

<tr>

<td>

<a href="{Link 3 URL:text}">{Link 3 label:text:Link 3}</a>

</td>

</tr>

<tr>

<td>

<a href="{Link 4 URL}">{Link 4 label:text:Link 4}</a>

</td>

</tr>

</table>

<p align="left" class="template_block">

<img src="{Photo image:image}" alt="picture" width="125" />

<br/>

<em>{Image caption:text:Image caption}</em>

</p>

</td>

</tr>

<tr>

<td colspan="3" align="center" valign="middle">

<font color="#999999" class="template_block">{Footer:text:Footer or copyright text}</font>

</td>

</tr>

</table>

Wide photo:

<!-- INSTRUCTIONS: Replace these placeholders to customize your balloon.

{Logo image} - Image data or URL to your org's logo. Preferably under 100x100 pixels.

{Organization} - the name of your organization.

{Description} - Information about your organization.

{Link 1 label} - Name of first link

{Link 1 URL} - URL for the first link

{Link 2 label} - Name of second link

{Link 2 URL} - URL of second link

{Photo image} - URL of the picture. Ideally less than 400 pixels wide.

{Photo title} - Title of the picture, or other text.

{Photo caption} - Caption for this image.

{Footer} - copyright or footer

-->

<table width="580" cellpadding="0" cellspacing="0">

<tr>

<td colspan="3" align="left" valign="top">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td align="left" valign="middle" class="template_block">

<img src="{Logo image:image}" alt="logo" width="100" />

</td>

<td align="left" valign="middle">

<font color="#CC3333" size="+2" class="template_block"><strong>{Organization:text:Click to enter your organization name}</strong></font>

<hr />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="left" valign="top">

<p>

<font color="#666666"><strong>About Us:</strong></font>

<br />

<font color="#999999" class="template_block">{Description:text:Descriptive text about your organization or this record}</font>

</p>

<p class="template_block">

<a href="{Link 1 URL:text:Link 1 URL}" target="_blank"><strong><font color="#CC3333">{Link 1 label:text:Link 1 label}</font></strong></a>

<br />

<a href="{Link 2 URL:text:Link 2 URL}" target="_blank"><strong><font color="#CC3333">{Link 2 label:text:Link 2 label}</font></strong></a>

</p>

</td>

<td width="10" align="left" valign="top">&nbsp;</td>

<td align="right" valign="top">

<table border="0" cellspacing="0" cellpadding="0" bgcolor="white">

<tr>

<td align="center" class="template_block">

<img src="{Photo image:image:Photo}" alt="picture" width="400" align="left" />

</td>

</tr>

<tr>

<td align="left" valign="top">

<dl class="template_block">

<dt><font color="#666666"><strong>{Photo title:text:Photo title}:</strong></font></dt>

<dd><font color="#999999">{Photo caption:text:Photo caption}</font></dd>

</dl>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="3" align="right" valign="top" class="template_block">

<font color="#999999">{Footer:text:Footer or copyright text}</font>

</td>

</tr>

</table>