Scribd Logo
Unggah

Selamat datang di Scribd!

  • The CSS For The Gloss Pop-Up Fisierul Popup Salvation Folder

    Diunggah oleh

    karpop
    45 tayangan3 halaman
    inserare cod glosse

    Judul Asli

    glosse

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    inserare cod glosse

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    45 tayangan3 halaman

    The CSS For The Gloss Pop-Up Fisierul Popup Salvation Folder

    Diunggah oleh

    karpop
    inserare cod glosse

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 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 ;

    Anda mungkin juga menyukai