Hide and Reveal Content, On Demand — Hover Example

Reveal content when mouse hovers over link.

New content appears when the visitor's mouse hovers over a link. Previously existing content flows around to right and below the new content.

Content is removed when mouse ceases to hover over link.

Example:

Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever.
[Mouse over for image]

Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever. Ipsum lorum whatever.

 
Here is the source code:

The DIV tag —

<div
   id="mymug" 
   style="
      padding-right: 20px; 
      padding-top: 5px; 
      padding-bottom: 5px; 
      float: left;
      display: none;">
<img 
   src="//www.willmaster.com/images/20000710w80105.jpg" 
   width="80" 
   height="105" 
   border="0">
</div>

 
The link —

<span 
   onmouseover="TurnPictureOn('mymug');" 
   onmouseout="TurnPictureOff('mymug');" 
   style="font-weight: bold; color: green;">
[Mouse over for image]
</span>

 
The JavaScript —

<script type="text/javascript" language="JavaScript"><!--
function TurnPictureOn(tid) {
document.getElementById(tid).style.display = "";
}
function TurnPictureOff(tid) {
document.getElementById(tid).style.display = "none";
}
//--></script>

Back to:
Hide and Display Content On Demand
Hide and Reveal Content, On Demand: How It Works

Will Bontrager