This ad box is in a similar style to what you find on Yahoo Geocities.
Although the hover effects on the 'x' and the '-' could easily be done by changing the background and font-colour with css, I wanted to use images. This makes it a little more difficult.
One way to do it (as I've done here) is to set the size of the div as the same size as two different background images. On hover the background image changes.
Javascript
function ads(div)
{
obj=document.getElementById(div);
obj.style.display=(obj.style.display=="none")? "block" : "none";
}
HTML
<h1>Ad box</h1>
<div id="ads-div" class="cfix">
<div id="x" onclick="ads('ads-div')"></div>
<div id="up" onclick="ads('list')"></div>
<div id="list">
<div class="ad">
<p><a href="#">Ad 1</a></p>
</div>
<div class="ad">
<p><a href="#">Ad 2</a></p>
</div>
</div>
</div>
<p>This ad box is in a similar style to what you find on Yahoo Geocities.</p>
<p>Although the hover effects on the 'x' and the '-' could easily be done by changing the background and font-colour with css,
I wanted to use images. This makes it a little more difficult.</p>
<p>One way to do it (as I've done here) is to set the size of the
div as the same size as two different background images. On hover the background image changes.</p>
CSS
#ads-div {
position:absolute;
top:0; right:0;
width:120px;
background-color:white;
border:1px solid gray;
}
.ad {
height:50px; width: 80px;
margin:25px auto 10px; padding: 5px;
border:1px solid red;
}
#ads-div #x, #ads-div #up {
height:20px;
width:20px;
}
#ads-div #up {
background-image:url(dash1.gif);
float:left;}
#ads-div #x {
background-image:url(x1.gif);
float:right;}
#ads-div #x:hover{
background-image:url(x2.gif);
cursor:pointer;
}
#ads-div #up:hover{
background-image:url(dash2.gif);
cursor:pointer;
}
Paul - good point. This is not something I would like to use on a site of my own in the same way Yahoo uses it. As you said, "Who wants ad boxes on top of their content?" I originally made this in response to someone on a forum who wanted to know how to do this (most of this site is a response to what people have wanted to know how to do), but a friend of mine saw it and she said it was just what she wanted for her site (though not for ads).
Quote: "This ad box is in a similar style to what you find on Yahoo Geocities." That would be the problem, I suppose this is a useful aplication of how JS can be used but still, who want's ad boxes on top of thier content?