Click here to Skip to main content
Click here to Skip to main content

Transparent pop-up link with desciption using JavaScript and CSS

, 28 Oct 2002
Rate this:
Please Sign up or sign in to vote.
A simple way to make a transparent pop-up link with description.

Sample Image - maximum width is 600 pixels

Introduction

When I was surfing the web, I found some websites using some cool pop-up links with a description or you may call it a tooltip or titletip. I found it very interesting because of its transparency and thought may be you'll like it too, so I posted this article. Using a little JavaScript and CSS can help you do that easily.

Using CSS

In CSS, you would just add this code to the top of your page below the <head>, to make a CSS class in order to customize the look of the pop-up.

<style type="text/css">
  .transparent {
    filter:alpha(opacity=90);
    background-color:green;
    display:none;
    width:170;
    height:100;
    position:absolute;
    color: white;
    border: 1 green solid;
}
</style>

The heart of the code above, is the 3rd line: filter:alpha(opacity=90);. This line makes the popup transparent with the opacity value set to 90. You can set the opacity within 0 - 100. If you set to 0, you won't see the popup.

Using JavaScript

Add the script below right after the CSS above.

<script>
    /* this function shows the pop-up when
     user moves the mouse over the link */
    function Show()
    {
        /* get the mouse left position */
        x = event.clientX + document.body.scrollLeft;
        /* get the mouse top position  */
        y = event.clientY + document.body.scrollTop + 35;
        /* display the pop-up */
        Popup.style.display="block";
        /* set the pop-up's left */
        Popup.style.left = x;
        /* set the pop-up's top */
        Popup.style.top = y;
    }
    /* this function hides the pop-up when
     user moves the mouse out of the link */
    function Hide()
    {
        /* hide the pop-up */
        Popup.style.display="none";
    }
</script>

The code above is quite simple, there're only 2 functions, one to display the pop-up and another to hide the pop-up.

Using HTML

The last part is some HTML, as the code below, to the body of the page and get it up and running.

<body bgcolor="black" text="white">
<a href="" onMouseOut="Hide()" onMouseOver="Show()" 
  onMouseMove="Show()">Move the mouse over here</a><br>
<br>
Move your move over the link above<br>
and the pop-up appears. And the pop-up<br>
follows your mouse as long as your mouse<br>
is still over the link. 
<div id="Popup" class="transparent">
    <div style="background-color: #003366">
      <b>Title goes here</b></div>
    <div></b>Description goes here</div>
</div>
</body>

What else?

If you change a little bit in the CSS code, you'll get 2 more types of pop-up:

  1. Change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.Glow(color=yellow,strength=5); and you'll get this kind of pop-up:

    Sample Image - maximum width is 600 pixels

  2. Or change the line filter:glow(opacity=90); to filter:progid:DXImageTransform:Microsoft.DropShadow(color=yellow,strength=5); and you'll get a pop-up with shadow:

    Sample Image - maximum width is 600 pixels

Note that the 2 types above work only with IE5.5+. Hope this is helpful for you!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Zek3vil

Singapore Singapore
No Biography provided

Comments and Discussions

 
GeneralWhite space Pinmembernatelywills30-Apr-09 5:25 
GeneralGood PinmemberAbbas Ali Butt10-Sep-08 4:22 
GeneralDatabase record Pinmemberbidox25-Mar-08 11:09 
GeneralMultiple Links Pinmemberbigleo2311-Dec-07 8:42 
Questioncan you use this more than once? PinsussAnonymous30-Nov-03 23:09 
AnswerRe: can you use this more than once? Pinmemberguga208-Mar-07 2:26 
GeneralLinks Pinmemberruben101028-May-03 3:42 
GeneralRe: Links PinmemberZek3vil28-May-03 3:54 
QuestionCross-browser compatible? PinmemberMarc Merritt28-Oct-02 1:38 
AnswerRe: Cross-browser compatible? PinmemberZek3vil28-Oct-02 3:56 
GeneralRe: Cross-browser compatible? PinmemberLoneRanger29-Oct-02 21:02 
GeneralRe: Cross-browser compatible? Pinmembermax_dcosta17-Nov-02 19:36 
GeneralRe: Cross-browser compatible? PinmemberLoneRanger17-Nov-02 20:51 
GeneralRe: Cross-browser compatible? Pinmembermax_dcosta17-Nov-02 20:55 
GeneralRe: Cross-browser compatible? PinmemberLoneRanger18-Nov-02 5:39 
GeneralRe: Cross-browser compatible? PinmembertheJazzyBrain22-Aug-03 3:30 
GeneralRe: Cross-browser compatible? PinmemberMember 377522411-Jul-08 23:54 
GeneralRe: Cross-browser compatible? PinmemberKastellanos Nikos10-Feb-03 23:10 
GeneralRe: Cross-browser compatible? PinsussAnonymous9-Jul-03 11:21 
GeneralRe: Cross-browser compatible? Pinmemberworldspawn7-Sep-03 16:38 
GeneralRe: Cross-browser compatible? PinsussAnonymous9-Jun-04 18:27 
AnswerRe: Cross-browser compatible? [modified] PinmemberMember 37781603-Jul-08 9:19 
AnswerRe: Cross-browser compatible? PinmemberJakob Flygare18-Aug-08 4:42 
GeneralRe: Cross-browser compatible? PinmemberJakob Flygare18-Aug-08 4:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 29 Oct 2002
Article Copyright 2002 by Zek3vil
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid