Q12. I've got images which are too big for the content window.
I want these images to be embedded in the scenario file, but displayed
in a new browser window when the user clicks on a link. How do I
Q12. Before reading on, click
here and, read (and/or print out) this information about how
PBLi scenario files are organised when being constructed. *UNDERSTANDING
THIS IS VERY IMPORTANT*
Assuming you have read and understood the information under the
link above, now let's turn to the method. To tack this task requires
some knowledge of how HTML pages work, but not in detail.
The sequence is divided into three parts. Firstly, making a simple
HTML file which will display the image. Secondly, adding both this
HTML file, and the image file it displays, to the scenario file
itself. Finally linking to the (now internal) HTML page so it will
be displayed in a separate window when the user clicks on it.
Part 1 - Make up a simple HTML page which holds the image.
Create a temporary directory and copy the image file into it. In
that directory, construct a simple HTML page to display your image
using an HTML editor or notepad. If entering code directly, the
following will do.
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html;
You can add labels or other text to the page as you wish. Repace
the italics with your own text. You can format this page however
Save this file to whatever name seems appropriate (e.g. external-image.htm).
Make sure the HTML file and image file are in the same directory.
Check the file in a web browser to ensure it's displaying what you
want. Whatever this file displays will be what users will see when
they click the link in the scenario. Make sure you are happy with
it before going any further.
Part 2 - Adding the HTML and image files directly to the
1. Ensure you are in the PBLi Builder WITH YOUR SCENARIO OPEN.
(this is essential as these new files need to be "captured"
when you save your scenario)
2. Manually (i.e. using the Windows Explorer file manager NOT PBLi)
find the following directory on the hard drive...C:\Documents
and Settings\(your user name)\Local Settings\Application Data\PBLiBuilder\ScenarioData\Media
. This assumes the C: drive is the drive containing the Windows
XP \Documents and Settings\ folder.
(Your user name) will normally be the name you have logged in with.
In that directory you should see other image files you may have
pasted in in the course of constructing you scenario.
(Can't see any Local Settings folder under
your username? If not, it could be that a folder setting on you
computer is hiding them from you. With XP, in your File explorer
window go to tools>folder options>view tab> and select
"show hidden files and folders" in the option list. Then
hit the button "apply to all folders". Close File Explorer
and re-open. You should now be able to see those folders.)
3. Copy the image file, AND the HTML page which presents it, to
the \Media directory.
4. Save your scenario (this will package the HTML file and image
into your scenario file)
Part 3 - Linking to the image so it will be shown in a
1. Now in PBLi with the scenario open go to the content window
where you want to add the link to the image.
2. Click on the launch external editor button on the toolbar.
Itís the one on the far right. This will open up your content window
in an external HTML editor (this editor is set by going to Settings
--> Preferences in the Builder menu. I tend to use Notepad for
mine. Some people use Dreamweaver or the like)
3. You will see the HTML code that makes up a Content Page in HTML.
In the HTML code, insert the following code where you want your
image to appear.. ;<p><A href="../Media/external-image.htm"
target=_blank>Click here</A> to see larger image</p>.
(but replacing external-image.htm with your OWN HTML file
name of course. You can also change the text outside the tags if
you like). Make sure this code is somewhere between the two FORM
tags (i.e. <FORM id=report action=../../AcceptReport.aspx
method=post target=_parent> and </form>and
not outside them or within them.
4. Save the file in the external editor, then close the external
editor. You should now see a link at the appropriate place in the
content window of PBLi .
5. Save the Scenario
10. Play the scenario to make sure the link works. If it doesn't
(a) Check that the image and html file have been put in the right
place in step two.
(b) Check that the name of the file corresponds with the name given
in the HTML tag.
(c) Check that the image tag in the HTML file contains no pathways.
It should be calling the image from the same directory the HTML
file is located in.