Capt. Horatio T.P. Webb
  
Lorem Ipsum, Popups and User-Changes-FontSize
Parks -- Fall 2013

Version 1 -- Last Updated 9:00 PM 8/23/2013

Pick a Font size →

Mouseover the text
'Loren ipsum' below
      ↓

Lorem ipsum
This is a popup

Lorem ipsum is the name of a website where you can get random text to use in simple HTML layouts. The text is a 45 BC lecture by Cicero in Latin. See the:

Loren Ipsum website here

A highly useful resource
 

dolor sit amet, consectetur adipiscing elit. Quisque aliquet dignissim accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus rutrum vel eros in aliquet. Vivamus consequat nibh quis ipsum lobortis, quis gravida turpis rutrum. Integer ante nibh, semper non faucibus at, consectetur non eros. Quisque pretium nunc id tortor condimentum facilisis. In velit risus, porttitor at nisi ut, mollis mattis enim. Donec convallis leo auctor tincidunt tincidunt. Nam blandit placerat ligula quis ullamcorper. Cras eu luctus dui. Sed sed ultrices est. Donec placerat blandit auctor. Donec aliquet risus ut felis vehicula, elementum scelerisque velit luctus. Mauris vulputate, lacus ac luctus consequat, urna leo mattis arcu, vel euismod tortor massa sed nunc.
POPUPS

We'll use some text in a DIV block and pop-up some text and a picture when the user rolls their mouse over the text. The pop-up disappears when the user rolls of the text

Code and CSS
Results
There is a DIV block with style:

position: relative;
display: inline-block;
border: 1px dotted blue;

and a onmouseover =

document.getElementById ('popuptext').style.visibility='visible';

and onmouseout =

document.getElementById ('popuptext').style.visibility='hidden';

It contains the text:

some normal text

followed by a SPAN block with id="popuptext" and style:

visibility:hidden;
position:absolute;
top:-35px;
left:0px;

containing an image:

<img src='captsm.gif' width='50'>

and the popup text:

Popup Text
 

 

 

 

 

...
some normal text
...

 

 

 

<div 
onmouseover=
"javascript:document.getElementById('popuptext').style.visibility='visible';"
onmouseout=
"javascript:document.getElementById('popuptext').style.visibility='hidden';">
some normal text
<span id="popuptext" style="border:solid red 2px;
visibility:hidden;position:absolute;top:-85px;left:0px;">
<img src="captsm.gif width='50'><br>Popup Text 
</span></div>
Phasellus gravida, ipsum in hendrerit sodales, mauris quam luctus libero, nec commodo nisi mi sodales leo. Nulla lobortis interdum blandit. Aliquam euismod risus mollis sagittis convallis. Nullam metus diam, commodo in libero quis, dignissim vestibulum leo. Quisque a metus a erat consequat tincidunt ut eu nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at elit vel libero dapibus commodo sed sit amet ipsum. Suspendisse vitae elit ut dolor vehicula egestas. Proin blandit ac urna quis sollicitudin. Nullam posuere eu dolor ac elementum.
In a magna bibendum, auctor turpis ut, aliquam diam. Sed egestas sagittis nibh, at aliquet massa congue eget. Sed suscipit commodo nibh, quis convallis augue vestibulum feugiat. Sed at urna lectus. Duis at sodales ante. Nam tincidunt sapien augue, id congue ligula vestibulum et. Cras tempor, felis molestie feugiat rutrum, mi diam dictum nisi, ac rutrum sapien ante in sem. Donec semper risus vitae condimentum sollicitudin. Proin facilisis sit amet lectus ac venenatis. Phasellus eu dui consectetur, scelerisque ante ut, facilisis felis. Aliquam hendrerit posuere risus non elementum. Curabitur semper in lorem a tempor. Donec feugiat nisl et leo pulvinar malesuada. Vivamus nec fermentum lectus. Nullam ac leo vel velit suscipit hendrerit.
Duis laoreet dui et tellus ornare suscipit. Curabitur facilisis volutpat velit, eget posuere felis eleifend at. Sed ornare quam nec turpis tristique, et lacinia nibh viverra. Nam nisl quam, dapibus ac ipsum non, volutpat hendrerit erat. Nunc eu augue at lorem scelerisque convallis malesuada ut augue. Praesent ut mauris volutpat, tincidunt odio sit amet, porta orci. Ut id magna at elit accumsan rhoncus. Ut pellentesque suscipit massa, a consequat magna placerat sed. Vivamus aliquet lorem facilisis, posuere odio ut, consequat nulla.
Quisque viverra, leo eu cursus scelerisque, metus elit viverra nisi, vel vestibulum purus ante ut mi. Quisque id venenatis neque. Ut pulvinar nibh rhoncus leo lobortis, sed laoreet justo pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean bibendum lobortis interdum. Curabitur vel sapien magna. Morbi condimentum est sed elit placerat, sed egestas massa iaculis. Nunc rutrum nibh ac iaculis semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam facilisis congue nisi quis rhoncus.