Вы находитесь на странице: 1из 3

The CSS for the gloss pop-up

Fisierul popup salvation folder


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.

The Javascript file


This is the file that does the magic when you mouse over a glossed item. Now, open your
exercise (.htm) - the web page activity - in Notepad or a HTML Editor. We need to link to
the Javascript popup.js below the <body> tag like this:
<script type="text/javascript" src="popup.js"></script>
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:

<a href="#">word to gloss</a>

Let's now add the "onmouseover" and "onmouseout" event handlers:

<a href="#" onmouseover="ddrivetip('text to display;',


'optional background color','optional popup width')"
onmouseout="hideddrivetip()">word to gloss</a>

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:

<a href="#" onmouseover="ddrivetip('text to display;','#ff0000','300')"


onmouseout="hideddrivetip()">word to gloss</a>

Repeat these steps for every item you want to gloss.

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 &lt;
> becomes &gt;
double escape the & with & a m p ;