Results 1 to 3 of 3

Thread: Looking for help with pop-up hover windows

  1. #1
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Looking for help with pop-up hover windows

    I have a simple webpage with pictures of a group of friends. I want to have a pop-up window hover when someone places their mouse on the friends image. The pop-up window would contain text with their name and information about them. I've checked out various links on the Internet for the past 3 days, but can't find anything that I understand. The closest thing I came upon was a pop-up window that sat in the top left of my page and disappeared when I scrolled down the page. I just want the pop-up window to hover over the image, or on either side, depending on the image placement on the webpage. Thanks in advance for any help.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    The technology behind this is similar to a rollover or mouseover image changing-- but instead of a new image, you want to display a hidden part of the page. Note that this is not a "window", but just a div or other part of the current page. (A window means a new browser window-- with a close button, etc.)

    If you're looking for something that is already made for this, then look at various "tooltip" scripts, including some on this website.

    But it also would be fairly easy to make this yourself:
    1. Create a hidden div positioned where you'd like with whatever contents you'd like. Use CSS properties (display:none;) to hide it.
    2. Add an onmouseover event on the image to show the div by id. (display:block;)
    3. Add an onmouseout event on the image to hide the div by id. (display:none;)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,689
    Thanks
    1
    Thanked 252 Times in 247 Posts

    Default

    Hi there Springbok,

    and a warm welcome to these forums.

    Here is a CSS example for you to try...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta charset="utf-8">
    
    <title>css "tooltip"</title>
    
    <style>
    
    body {
        background-color:#f0f0f0;
     }
    
    #container {
        width:830px;
        padding:5px;
        margin:20px auto 0;
        border:3px double #666;
        box-shadow:#333 20px 20px 40px;
        background-color:#fff;
        overflow:hidden;
     }
    
    .friends {
        position:relative;
        float:left;
        width:401px;
        height:246px;
        border:2px solid #333;
        margin:5px;
        cursor:pointer;
     }
    
    .friends:nth-of-type(1) {background-image:url(blood.jpg);}
    .friends:nth-of-type(2) {background-image:url(grap.jpg);}
    .friends:nth-of-type(3) {background-image:url(clouds.jpg);}
    .friends:nth-of-type(4) {background-image:url(autumn.jpg);}
    
    .friends span {
        position:absolute;
        top:-7px;
        left:273px;
        z-index:1;
        display:none;
        width:123px;
        padding:5px;
        border:1px solid #630;
        background-color:#fdb;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:10px;
        color:#630;
        box-shadow:#000 1px 1px 2px;
     }
    
    .friends:hover span {display:block;}
    
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div class="friends">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
    ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
    fermentum sed eu arcu.
    </span>
    </div>
    
    <div class="friends">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
    ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
    fermentum sed eu arcu.
    </span>
    </div>
    
    <div class="friends">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
    ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
    fermentum sed eu arcu.
    </span>
    </div>
    
    <div class="friends">
    <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
    ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
    fermentum sed eu arcu.
    </span>
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 10-23-2011 at 12:40 AM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •