SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you make a popover window?

    Not a popup, but a popover with an image. I made one of these before, but I can't remember how. This has a good example of what I am talking about http://www.bhg.com/ , but I don't need a form in it, just an image.
    TIA!
    Sarah

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Sarahc33,

    have a look at this basic example, it may suit your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>show image once a day</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #mypic {
        position:relative;
        width:758px;
        height:512px;
        border:3px double #f00;
        margin:20px auto;
     }
    #mypic img {
        position:absolute;
        width:758px;
        height:512px;
        display:block;
     }
    #remove {
        position:absolute;
        width:150px;
        line-height:22px;
        border:1px solid #000;
        bottom:5px;
        left:50%;
        margin-left:-76px;
        text-align:center;
        background-color:#fff;
        cursor:pointer;
     }
    .hide {
        display:none;
     }
    .show {
        display:block;
     }
    </style>
    
    <script type="text/javascript">
    
       var obj;
       var state;
    
    window.onload=function() {
       obj=document.getElementById('mypic');
       readCookie();
    document.getElementById('remove').onclick=function(){
       obj.className='hide';
      }
     }
    
    function setCookie() {
      exp=new Date();
      plusDay=exp.getTime()+(24*60*60*1000);   /* cookie is set for 24 hours*/
      exp.setTime(plusDay);
      document.cookie='State='+state+';expires='+exp.toGMTString();
     }
    
    function readCookie() {
    if(document.cookie) {
       state=document.cookie.split('State=')[1];
       obj.className=state;
      }
    else {
       state='hide';
       setCookie();
      }
     }
    </script>
    
    </head>
    <body>
    
    <div id="mypic" class="show">
    
    <img src="http://mysite.orange.co.uk/azygous/images/blood.jpg" alt="">
    
    <div id="remove">close window</div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm, Thanks!!!

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're welcome.


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
  •