Click here to Skip to main content
11,503,113 members (75,554 online)
Click here to Skip to main content

Transparent pop-up link with desciption using JavaScript and CSS

, 28 Oct 2002 209.1K 2.4K 38
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 Pin
natelywills30-Apr-09 5:25
membernatelywills30-Apr-09 5:25 
GeneralGood Pin
Abbas Ali Butt10-Sep-08 4:22
memberAbbas Ali Butt10-Sep-08 4:22 
GeneralDatabase record Pin
bidox25-Mar-08 11:09
memberbidox25-Mar-08 11:09 
GeneralMultiple Links Pin
bigleo2311-Dec-07 8:42
memberbigleo2311-Dec-07 8:42 
Questioncan you use this more than once? Pin
Anonymous30-Nov-03 23:09
sussAnonymous30-Nov-03 23:09 
AnswerRe: can you use this more than once? Pin
guga208-Mar-07 2:26
memberguga208-Mar-07 2:26 
GeneralLinks Pin
ruben101028-May-03 3:42
memberruben101028-May-03 3:42 
GeneralRe: Links Pin
Zek3vil28-May-03 3:54
memberZek3vil28-May-03 3:54 
QuestionCross-browser compatible? Pin
Marc Merritt28-Oct-02 1:38
memberMarc Merritt28-Oct-02 1:38 
AnswerRe: Cross-browser compatible? Pin
Zek3vil28-Oct-02 3:56
memberZek3vil28-Oct-02 3:56 
GeneralRe: Cross-browser compatible? Pin
LoneRanger29-Oct-02 21:02
memberLoneRanger29-Oct-02 21:02 
GeneralRe: Cross-browser compatible? Pin
max_dcosta17-Nov-02 19:36
membermax_dcosta17-Nov-02 19:36 
GeneralRe: Cross-browser compatible? Pin
LoneRanger17-Nov-02 20:51
memberLoneRanger17-Nov-02 20:51 
GeneralRe: Cross-browser compatible? Pin
max_dcosta17-Nov-02 20:55
membermax_dcosta17-Nov-02 20:55 
GeneralRe: Cross-browser compatible? Pin
LoneRanger18-Nov-02 5:39
memberLoneRanger18-Nov-02 5:39 
GeneralRe: Cross-browser compatible? Pin
theJazzyBrain22-Aug-03 3:30
membertheJazzyBrain22-Aug-03 3:30 
GeneralRe: Cross-browser compatible? Pin
Member 377522411-Jul-08 23:54
memberMember 377522411-Jul-08 23:54 
GeneralRe: Cross-browser compatible? Pin
Kastellanos Nikos10-Feb-03 23:10
memberKastellanos Nikos10-Feb-03 23:10 
GeneralRe: Cross-browser compatible? Pin
Anonymous9-Jul-03 11:21
sussAnonymous9-Jul-03 11:21 
GeneralRe: Cross-browser compatible? Pin
worldspawn7-Sep-03 16:38
memberworldspawn7-Sep-03 16:38 
GeneralRe: Cross-browser compatible? Pin
Anonymous9-Jun-04 18:27
sussAnonymous9-Jun-04 18:27 
AnswerRe: Cross-browser compatible? [modified] Pin
Member 37781603-Jul-08 9:19
memberMember 37781603-Jul-08 9:19 
AnswerRe: Cross-browser compatible? Pin
Jakob Flygare18-Aug-08 4:42
memberJakob Flygare18-Aug-08 4:42 
GeneralRe: Cross-browser compatible? Pin
Jakob Flygare18-Aug-08 4:55
memberJakob 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 | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 29 Oct 2002
Article Copyright 2002 by Zek3vil
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid