• Home
• How it Works
• Post a Free Pictolink
• Terms of Service
• Contact
• 
  

  *Note: In order to present an effective demonstration, each of the Pictolinks in the sample Pictolink mosaic to the right represents an actual organization. However, not all of these organizations endorse or collaborate with Pictolink.

• Pictolink is Edwin Meyer Software Engineering's trademark for its three-presentation step dynamic graphic link technology.

• Copyright © 2007 Edwin Meyer

A Pictolink mosaic is presented within a host web page by the Pictolink server under control of two lines of directives added to the host web page.

The actual Pictolink data resides on the Pictolink server and are controlled by JavaScript code — also loaded from the Pictolink server by directives embedded in the host web page. Following is a brief summary of how this interaction works:

1. A viewer accesses a web page that contains a Pictolink mosaic.
2. The web server hosting that web page sends the HTML code representing the web page to Internet Explorer or other browser on the viewer's computer.
3. The browser on the viewer's computer encounters a single line JavaScript section embedded in the host web page that calls for more extensive JavaScript code to be downloaded from the Pictolink server.
4. The Pictolink server responds to the browser's request by returning several JavaScript and other files defining the Pictolink mosaic.
5. The user's browser runs the JavaScript loaded from the Pictolink server to assemble and present the Pictolink mosaic in a position specified on the host web page. At this time the code behind the mosaic becomes quiescent.
6. When the user rolls the mouse over any part of the mosaic, the JavaScript code becomes active and opens a rectangular area in the browser window in which it displays summary information about the Pictolink. If the mouse moves to a different Pictolink, the information related to the new Pictolink is presented in the rectangle. The rectangle immediately disappears when the mouse moves away from the mosaic.
7. If the user clicks the mouse while over any part of the mosaic, the "target" web page associated with the Pictolink is opened in a new browser window. The original browser window in which the Pictolink mosaic is presented remains open, partially obscured by the new window.

A Pictolink mosaic has a number of options configurable by the host site administrator:

• The number of rows and columns in a mosaic.
• The height and width (in pixels) of the Pictolinks presented in the mosaic.
• The margin in pixels (0 or greater) around each presented Pictolink.
• The background color of the mosaic.
• The presentation interval in milliseconds (0 or greater) between the display of each Pictolink in the mosaic. A zero value causes the mosaic to be filled as fast as the Pictolink images can be downloaded. The background color shows through all unfilled cells.
• Optional random display ordering – Causes the downloaded Pictolink list to be displayed in random time order. Used with a non-zero presentation delay.
• Optional random positioning – Causes the downloaded Pictolink list to be positioned in randomly in the mosaic. If not set, Pictolinks are positioned in list order, left-to-right and top-to-bottom.
• Optional Pictolink swap interval in milliseconds – The downloaded Pictolink list may contain more Pictolinks than can be displayed in the mosaic. If so and a positive swap delay is specified, randomly selected displayed and non-displayed Pictolinks will be swapped at the swap interval. (No swap occurs when the mouse is on the mosaic.) A zero value specifies a static display following the initial load.

Note: The Pictolink mosaic presented on these pages has both random display order and positioning, a 100 ms presentation interval, and a 2 second Pictolink swap interval. The individual thumbnail images are 31 pixels square, arranged in a 3 column by 12 row mosaic. Since more than 36 Pictolinks are included in the downloaded data, previously undisplayed Pictolinks are randomly swapped in every two seconds.

Additionally, while the Pictolink server logs all Pictolink accesses in order to compile performance statistics, it normally "blurs" the accessing IP addresses to eliminate the possiblity of identifying the exact source of the accesses.

There are only two one-line insertions that need to be placed into the host web page in order to display a Pictolink mosaic, a <div>tag that specifies where on the page the mosaic is to be placed, and a <script> tag that loads the JavaScript code that manages the mosaic.

A <div> tag of the following form must be placed into the HTML code for the web page at the spot where the mosaic is to appear. The loaded JavaScript code looks for a <div> tag with an id value of "pl_mosaic_div" and inserts the mosaic inside it.

<div id="pl_mosaic_div" style="height:YYYpx; width:XXXpx"></div>

The entire style="height:YYYpx; width:XXXpx" section can be omitted for simplicity. However, its inclusion with dimensions customized to be equal to the size of the displayed mosaic can reduce "jitter" during page loading.

A <script> tag of the following form must also be placed into the HTML code for the web page. When the browser encounters this <script> tag while loading the page, it loads and begins initialization of the JavaScript code that manages the mosaic.

<script type="text/javascript" src="http://ow-service.net/pl-app-a/pl_setup_XXXX-NN.js"> </script>

The "XXXX" is to be replaced by the organization id, which is assigned by Pictolink to a participating organization or person. It will be the same for all web sites and web pages managed by the organization. The "NN" is to be replaced by the page id, It identifies the web page onto which a mosaic is to be placed, and thus the characteristics of the mosaic. It is assigned by the user during the online configuration process. If the organization uses only one mosaic type, the "-NN" component may be omitted.

The placement of the <script> tag is not critical, since it mostly just loads the mosaic manipulation JavaScript files, and processing is defered until the main page finishes loading. It can be placed immediately following the <div> tag for simplicity, or it can be placed just before the closing </head> or </body>tags.

Placing the above tags in the HTML code for the host web page merely identifies the mosaic which is to be presented on it, and not the actual configuration and content of the mosaic. The task of performing this configuration and specifying the Pictolinks to be presented in the mosaic is performed by a host site manager by online interaction with the Pictolink server. Details of how this is performed are "to be provided".