Popups & Things

A simple tooltip that brings a dialouge box up on mouseover, I have not tried expanding on the origional code apart from the background colours. You can add text and images with the same result. Mouseover hereALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations? .

CSS

.example1 a{position:relative;}/* set stacking context*/
.example1 a span{
visibility:hidden;/* hide message initially*/
position:absolute;
top:-70px;
left:0px;
width:250px;
padding:5px;
background:#CECECE;
color:#000;
text-decoration:none;
border:1px inset #333333;
}
.example1 a:hover {visibility:visible}/* ie bug needed to make span show*/
.example1 a:hover span{visibility:visible;}/* reveal image*/

HTML

<p class="example1"><a href="your link.html">Link Name<span>Message in box goes here</span></a></p>

This popup can be positioned anywhere you want on the page and can contain text, images and links. This popup differs slightly from the one above in that it stays open untill closed by link.

View Popup

The origional code can be viewed below.

Style

Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">here</span></a> <div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'> This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want. <br /> <div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a></div> </div>