Professional Documents
Culture Documents
Launch HotPotatoes and input your data as usual. Open the Custom tab in the
Configuartion dialogue box. Find the text field "Code for insertion into the <head>
tag" and paste the following CSS code. Then save and create your HotPotato
exercise.htm in the folder glosses.
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border-left: 5px solid green; /* To change the colours */
border-right: 1px solid #565656; /* to match your style, */
border-top: 1px solid #565656; /* reassign your custom */
border-bottom: 1px solid #565656; /* colour values here. */
padding: 5px;
background-color: #e0ffde;
visibility: hidden;
z-index: 100;
/* The line below gives rounded edges in Firefox ...*/
-moz-border-radius:6px;
/* ... and transparency ...*/
opacity:0.7;
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
/* The lines below should always appear last within this CSS*/
filter:alpha(opacity=70); /* transparency in IE */
/* Remove the lines below to remove the shadow, */
/* which is only visible in Internet Explorer. */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
The colors of the background of the pop up and the borders should match those of the
exercise, so change them to your taste. You don't want pink background with a green
colour scheme of the exercise. Or you do?
Save and output your exercise as a web page (.htm) in the glosses folder.
Putting it to work
Next, place this line immediately below the <body> tag: <div
id="dhtmltooltip"></div>
Having in mind all the previous steps, you should have the following:
...
</head>
<body onload="StartUp();" id="TheBody">
<div id="dhtmltooltip"></div>
<script type="text/javascript" src="popup.js"></script>
...
That was easy, but it's not the end yet. Now we need to gloss the word(s) and/or
phrase(s). Here's how to do it.
The glosses
Still with the htm file open in the Text or HTML editor, find the word(s) you want to
gloss and make an empty link like this:
Change text to display with the explanation of the glossed item. The semicolon (;) must
stay!
As written, the background color and popup width values are optional and you can leave
them blank - the default values will be used. An example with red background colour and
custom width of 300px is:
Notes
If the text in the popup contains apostrophes ('), be sure to backslash them first, like this
("John\'s Site"), or an error will occur.
If you want to validate your page and be fully XHML compliant, make sure you 'escape'
certain characters in the gloss description, like angle brackets, e.g.:
< becomes <
> becomes >
double escape the & with & a m p ;