PerfectShare Abstract Link "PS ALink Integration into your Web Page"
PerfectShare Search and Abstract links (PS ALink) can easily be integrated into
your web page in 3 easy steps. These instructions assume you are a web master
and are familiar with HTML, Style Sheets and Javascript.
You also have the ability to add a nonintrusive PerfectShare Magnifying Glass to you web page so that visitors to you page have the option to turn "Searching" on or off.
If you need support in integrating a PS ALink into your page, email your question to: support@perfectshare.com. Please also send an email to support@perfectshare.com after integration is complete, so that we can notify you if any changes occur with the ALink design that may require you to test your web page. Comments and suggestions are always encourage and welcomed. Thanks!
You also have the ability to add a nonintrusive PerfectShare Magnifying Glass to you web page so that visitors to you page have the option to turn "Searching" on or off.
If you need support in integrating a PS ALink into your page, email your question to: support@perfectshare.com. Please also send an email to support@perfectshare.com after integration is complete, so that we can notify you if any changes occur with the ALink design that may require you to test your web page. Comments and suggestions are always encourage and welcomed. Thanks!
1. Add text for styles and scripts to Head section of your HTML page (Anywhere between the <head> </head> tags).
<link href="http://perfectshare.com/abstract/styles/psAlink.css" rel="stylesheet"
type="text/css" />
<!--[if lt IE 7.]>
<link href="http://perfectshare.com/abstract/styles/psAlinkIE6Fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://perfectshare.com/abstract/scripts/psAlink.js" type="text/javascript" ></script>
<!--[if lt IE 7.]>
<link href="http://perfectshare.com/abstract/styles/psAlinkIE6Fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://perfectshare.com/abstract/scripts/psAlink.js" type="text/javascript" ></script>
2. Add the first line of text to your <body ... > tag of your page to close ALink when user clicks anywhere on page.
onmousedown="psAlinkCollapse(document.getElementById('psAlink1'))"
BEFORE:
<body>
AFTER:
<body onmousedown="psAlinkCollapse(document.getElementById('psAlink1'))">
BEFORE:
<body>
AFTER:
<body onmousedown="psAlinkCollapse(document.getElementById('psAlink1'))">
3. Add ALink IFrame and outer DIV tag somewhere on your page.
<!-- Do Not Change This Between Comments with the exception of "src" -->
<div id=psAlink1 class="psAlinkCollapseSize" onmouseover ="psAlinkExpand(this)">
<iframe class="psAlinkIFrame" frameborder="0" allowtransparency="true" scrolling="no"
src="http://perfectshare.com/abstract/search/alink" >
</iframe>
</div>
<!-- Do Not Change This Between Comments with the exception of "src" -->
<div id=psAlink1 class="psAlinkCollapseSize" onmouseover ="psAlinkExpand(this)">
<iframe class="psAlinkIFrame" frameborder="0" allowtransparency="true" scrolling="no"
src="http://perfectshare.com/abstract/search/alink" >
</iframe>
</div>
<!-- Do Not Change This Between Comments with the exception of "src" -->
Do not change the text between the green comments with the exception of the "src"
attribute. Replace the word "search" in the "src" value with the specific
Abstract link ID you wish to integrate. The above example is for the
Search
ALink. To find the Abstract ID for any given Abstract, browse to the PS Abstract
and use the last word on the URI line (after the last last "/").
You can view or test the ALink page by itself by adding "/ALink"
after the Abstract ID. For example, the Epson CX5000 printer has an Abstract
ID of CX5000. The URL for this abstract is:
http://perfectshare.com/abstract/cx5000
The stand-a-lone ALink for this abstract is:
http://perfectshare.com/abstract/cx5000/ALink
To get exact positioning and layout on your web page, you may need to create and wrap the above "div" tags with your own "div" tags. You should be able to achieve the desired position without modifying any of the text inside the above "div" tag ("psLink1"). The only except to this rule is: If you add more than one ALink to a page you will need to give each ALink a unique ID: Change "psAlink1" ID to "psAlink2" for the 2nd ALink. You would also then need to make sure the "omousedown" on the "Body" element closes all ALinks.
http://perfectshare.com/abstract/cx5000
The stand-a-lone ALink for this abstract is:
http://perfectshare.com/abstract/cx5000/ALink
To get exact positioning and layout on your web page, you may need to create and wrap the above "div" tags with your own "div" tags. You should be able to achieve the desired position without modifying any of the text inside the above "div" tag ("psLink1"). The only except to this rule is: If you add more than one ALink to a page you will need to give each ALink a unique ID: Change "psAlink1" ID to "psAlink2" for the 2nd ALink. You would also then need to make sure the "omousedown" on the "Body" element closes all ALinks.
Optional: Adding PerfectShare Maginfying Glass to your Web Page
If you do not have room on your web page for the entire ALink oval, you can add
a small PS Magnifying Glass which can be as small as 16 x 16 pixels. When
the user clicks on the Magnifying Glass, the ALink oval will appear on the page
based on your desired positioning. The ALink Oval is removed by the user as
soon as the Magnifying Glass is clicked on again.
1.) If you completed the above 3 steps, remove step #2, the "onmousedown" on the "Body" tag. You do not need this since the ALink Oval will disappear when the user clicks on the Magnifying glass. However, make sure you complete step 1 above.
2.) You will need to wrap step #3 above with the following code:
1.) If you completed the above 3 steps, remove step #2, the "onmousedown" on the "Body" tag. You do not need this since the ALink Oval will disappear when the user clicks on the Magnifying glass. However, make sure you complete step 1 above.
2.) You will need to wrap step #3 above with the following code:
<div class="psSlinkContainer">
<!-- ROLLOVER HELP -->
<!-- set left: and top: style below "psIdHelp1" to position help -->
<div id="psIdHelp1" style="left: 25px; top: 0px;" class="psSlinkHelp"></div>
<!-- MAGNIFYING GLASS ICON -->
<!-- set class to "psSlinkIconXX" where "XX" is size of icon. -->
<!-- valid sizes are: 16, 20, 24, 32, 40 & 50 -->
<div class="psSlinkIcon40"
onmouseover="psShowID('psIdHelp1')" onmouseout="psHideID('psIdHelp1')"
onclick="psSearchToggle('psIdSearch1')"
title="Click this PS Magnifying Glass to toggle Search oval ON and OFF.">
</div>
<!-- ALINK SEARCH LINK OVAL -->
<!-- set left: and top: style below "psIdSearch1" to position Search Oval -->
<div id="psIdSearch1"style="left:270px;top:40px;" class="psSlinkSearch" >
<!-- INSERT TEXT FROM THE ABOVE STEP 3 HERE -->
</div>
</div>
<!-- ROLLOVER HELP -->
<!-- set left: and top: style below "psIdHelp1" to position help -->
<div id="psIdHelp1" style="left: 25px; top: 0px;" class="psSlinkHelp"></div>
<!-- MAGNIFYING GLASS ICON -->
<!-- set class to "psSlinkIconXX" where "XX" is size of icon. -->
<!-- valid sizes are: 16, 20, 24, 32, 40 & 50 -->
<div class="psSlinkIcon40"
onmouseover="psShowID('psIdHelp1')" onmouseout="psHideID('psIdHelp1')"
onclick="psSearchToggle('psIdSearch1')"
title="Click this PS Magnifying Glass to toggle Search oval ON and OFF.">
</div>
<!-- ALINK SEARCH LINK OVAL -->
<!-- set left: and top: style below "psIdSearch1" to position Search Oval -->
<div id="psIdSearch1"style="left:270px;top:40px;" class="psSlinkSearch" >
<!-- INSERT TEXT FROM THE ABOVE STEP 3 HERE -->
</div>
</div>