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

Hi there Sarahc33,

have a look at this basic example, it may suit your requirements…

[color=navy]
<!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>
[/color]

coothead

Worked like a charm, Thanks!!! :slight_smile:

No problem, you’re welcome. :wink: