Web Analytics Made Easy -
StatCounter onmouseover window - CodingForum

Announcement

Collapse
No announcement yet.

onmouseover window

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • onmouseover window

    Hi. I want to display a window with a text on mouseover and it dissapears onmouseout. Could you remind me with some link maybe, how was it called, and how could it be achieved?

  • #2
    Hi there keissfootball,

    does this help...

    linkcode
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css tooltip</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        background-color:#eef;
    }
    #wrapper {
        width: 488px;
        height:298px;
        background-color:#fff;
        border:6px double #006;
        margin:185px auto;
    }
    .container {
        height:30px;
        width:400px;
        margin: 20px auto;
    }
    a.info {
        position:relative; /*this is the key*/
        z-index:0;
        color:#666;
        font-style:oblique;
        text-decoration:none;  
        display:block;
        float:left;
    }
    .spanny {
        margin:0 3px;
        float:left;
    }
    a.info .ttip {
        display: none;
        float:left;
    }
    a.info:hover{
        z-index:1;
        background-color:#fff;
    }
    a.info:hover .ttip {  
        display:block;
        position:absolute;
        top:20px;
        left:40px;
        width:120px;
        border:3px double #0cf;
        background-color:#cff;
        color:#099;
        font-size:10px;
        font-style:normal;
        padding:5px;
    }
    #pic {
        background-image:url(../images/anim3.gif);
        border:3px solid #060;
        width:100px;
        height:100px;
    }
    a.info:hover #pictip {
        top:20px;
        left:-280px;
        width:240px;
        border:3px double #fc0;
        background-color:#ffc;
        color:#990;
        font-size:12px;
        text-align:justify;
        padding:10px;
    }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <span class="spanny">This</span>
    <a href="#" class="info">word
    <span class="ttip">
    This is the customised tool-tip.  It's main advantage over the 'title' attribute
    is that it remains in view whilst the hover state is maintained, thereby
    allowing for a large amount of information to be imparted to the reader
    </span>
    </a>
    <span class="spanny">will produce the tool-tip.</span>
    </div>
    
    <div class="container">
    <span class="spanny">This</span>
    <a href="#" class="info" id="pic">
    <span class="ttip" id="pictip">
    This is the customised tool-tip.  It's main advantage over the 'title' attribute
    is that it remains in view whilst the hover state is maintained, thereby
    allowing for a large amount of information to be imparted to the reader. As you
    can see it is also easily customizable.
    </span>
    </a>
    <span class="spanny">can also produce the tool-tip.</span>
    </div>
    
    </div>
    
    </body>
    </html>
    coothead
    ~ the original bald headed old fart ~

    Comment


    • #3
      Yeah that's the thing I was looking for, tnx coothead!!!

      Comment


      • #4
        No problem, you're welcome.
        ~ the original bald headed old fart ~

        Comment

        Working...
        X