In the above examples you may have noticed that I also put text in the handle (header).

This was done by changing the handle code in your HTML Object as follows:

Main Menu

© 2007  WebStudioHelp.net & SunsetFX.com          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.

Graphics

Loren's Layered Thumbnail / Pop-Ups Tutorial / Working With Text                 * All credit for developing this in-depth tutorial goes to Loren - Great Job! *

Working With Text

            Note: Before we begin on this very short subject. A word of Caution! Whenever you write text to the Object link, ensure that you place
            a backslash before any apostrophe, as in the following example. If you don't things have a tendency to get messed up!

            Text: Who's to know?

All single quote marks and commas must remain in the code. If one gets eliminated you will get unexpected results.

I asked a simple question about how many H tags one could have for a site, and here is her response:

"I don't know why anyone would want more than 4 - 6 h tags; U guess you could though, never tried it. Your h tags count more with search engines if there's at least a small paragraph under and related to it.

There are numerous safe fonts mentioned:
font-family: Verdana,Times New Roman,Tahoma,Arial,Helvetica;

At the beginning, put the one you want, followed by others - the browser will start with first one, but if not on the visitor's computer, it will keep looking until it finds one that is there. 

If none of the H tag fonts requested are on the visitors computer (which would probably never happen) ... Huge, Black, primary fonts."

The reason that I asked the above question is so that I could complete this tutorial.

Using the same code, I will now put a couple of line breaks in the demo.

A bit of CSS code to help you format text in a pop-up with text, or a simple text pop-up.

Thanks to Helen for her guidance on this.

To Quote from Helen:

"Here's a little code to allow the benefits of h tags, yet control the size, color, font. Put it in the head section of source code. You'll quickly see where to edit it to fit your particular page:"

"You would use them on the body of your page in the order of importance (down the page in order like this (not skipping around):"

So let's put a few H tags onto our page:

I started the above H tags at 2, because 1 is already used in the Pop-up code at the head of the document, and I placed the CSS code after the Pop-up code. For H5, I added text-align:left. H6 is used in the Header (see below).

Click on the button below for a demo.

Click on the button below for a demo.

Note that &nbsp; was used several times as a way of adding space to center the text in the header bar. If they weren't used, the text would shift to the right. This is due to the <H6> style set in the page code (above) that aligns things to the right. Aligning to the right was needed to place the "X" (close) box in the right corner of the header section. The last &nbsp used should have the semi-colon removed.

Code:
<a href="$this_folder_url$clear.gif"onclick="return wrapContent(event,this.href,0,0,'So what do you think so far? <br> I have probably gone overboard  in this tutorial but there might be some individuals that are not as advanced as others that want to take advantage of this function. Who's to know?',200,-20,20)">

<STYLE type="text/css">
<!--
H1 {font-family: Times New Roman,Verdana,Tahoma,Arial,Helvetica; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; font-size: 20; color: #AE113D}
H2 {font-family: Verdana,Times New Roman,Tahoma,Arial,Helvetica; font-size: 14; font-weight: bold; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; color: #000000}
H3 {font-family: Verdana,Times New Roman,Tahoma,Arial,Helvetica; font-size: 16; font-weight: bold; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; color="navy"}
H4 {font-family: Verdana,Times New Roman,Tahoma,Arial,Helvetica; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; font-size:12; color: #000000}
-->
</STYLE>

<h1> My Best keyword stuffed headline </h1>
<h2> My next important important keyword line</h2>

<STYLE type="text/css">
<!--
H2 {font-family: Arial,Verdana,Times New Roman,Tahoma,Helvetica; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; font-size: 20; color: #AE113D}
H3 {font-family: Times New Roman,Verdana,Tahoma,Arial,Helvetica; font-size: 14; font-weight: bold; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; color: #000000}
H4 {font-family: Tahoma,Verdana,Times New Roman,Arial,Helvetica; font-size: 16; font-weight: bold; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; color="navy"}
H5 {font-family: Helvetica,Verdana,Times New Roman,Tahoma,Arial; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; font-size:12; color: lightblue; text-align:left}
 H6 {font-family: Arial,Helvetica,Verdana,Times New Roman,Tahoma; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; font-size:12; color: white; text-align:right}
-->
</STYLE>

<a href="http://www.lumierestandardpoodles.com/popupdemo/clear.gif" onclick="return wrapContent(event,this.href,0,0,' <h2> This is an example </h2><h3> of using this function for tooltip </h3><h4> text. The tooltip is 200 px wide ,</h4><h5> positioned 20 px left of the mouse click and 20 px below </h5> ',200,-20,20)">

<a href="http://www.lumierestandardpoodles.com/popupdemo/clear.gif" onclick="return wrapContent(event,this.href,0,0,'<h2>This is an example</h2><h3> <br> of using this function for tooltip</h3><h4> <br> text. The tooltip is 200 px wide,</h4><h5> positioned 2- px left of the mouse click and 20 px below</h5>',200,20,20)">

<div id="handle" style="background-color:silver; text-align:right; font-size:12px;"><h6> Pop-up Demonstration &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<a href="javascript: void writeDrag.hide()"><img class="xBox" src="Thumbs_Tutorial_-_Text_FX/bx.gif" width="12" height="12" alt="close box" border="0"> </h6> </a> </div>
aaaaaaaaaaaaiii