Index - Expand your mind, improve your body, have fun
Scientific Psychic

CSS mouseover for links, text, and images

The content structure of a web page is coded in HTML (or XHTML), and the way in which the information is displayed is defined by Cascading Style Sheets (CSS). Some techniques for coding CSS make it possible to add animation and dynamic display to a web page so that it is not necessary to use JavaScript. CSS animations have the advantage of being supported by all modern browsers even when a user has turned off JavaScript for security reasons or to avoid some types of advertisements. The XHTML and CSS techniques illustrated here meet all W3C validation standards and work for Internet Explorer, FireFox, Safari, Opera, and Google Chrome browsers. The description of the code is explained below.

Example of a mouseover with a text paragraph.

English grammar can be described using a formal description Formal Description
A Formal Description is like a mathematical formula that when applied to words produces a correctly formed sentence structure. The expression

    <noun phrase> = "the" <specific proper noun>

means that you can create a noun phrase by first writing the article "the" and then writing a specific proper noun.

Example: "the Grand Canyon".

that describes valid sequences of linguistic components.

Example of a mouseover with an image and a caption.

The Body Mass Index Female Body Mass Index
Body Mass Index for Females
is the most widely used diagnostic tool to identify weight problems within a population. The values of the BMI can usually be used to classify whether individuals are underweight, overweight or obese.

Example of a mouseover with drop-down list of links

Example of a mouseover to change an image.

Discover Madame Flora

Explanation of the coding techniques

In general, these techniques hide the pop-up text by placing it outside the display area, but restore it to a visible position when the mouse hovers over the designated zone.

Mouseover with a text paragraph
When the pop-up text is too long, the width of the pop-up text may be specified in the style of the second level span. A title in the first level span displays additional information on mouseover

  This is a line with a Hot Zone Text Pop-up Text in the middle.
<span class="dropt" title="Title for the pop-up">Hot Zone Text
  <span style="width:500px;">Pop-up text</span>
CSS code for class dropt:
span.dropt {border-bottom: thin dotted; background: #ffeedd;}
span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px 0 0 170px; background: #ffffff; z-index:6;} 

Mouseover with an image and a caption
An image can also be displayed using the same dropt class.

  This is a line with a Hot Zone Text Card Games
in the middle.
<span class="dropt" title="Title for the pop-up">Hot Zone Text
  <span><img src="card.jpg"/><br/>

Mouseover with drop-down list of links
A drop-down list of links can be generated from nested unordered lists using the dropv class.

  Example of

In order to position the drop-down list under the link, it is necessary to have the link at the beginning of a line, or to code the dropv class within a column of a table, which then can be positioned as needed.
NOTE: If the list is to drop down over a flash object, it is necessary to code the flash object with wmode="opaque" or wmode="transparent", otherwise the drop-down list will be behind the object.

   Example of 			
   <ul class="dropv">
   <li><a href="#">drop-down links</a> in imbedded text.	
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>		
CSS code for class dropv:
.dropv, .dropv ul {padding: 0; margin: 0; list-style: none;}
.dropv a {display: inline; width: 170px;}
.dropv li {float: left; padding: 0px 8px 2px 0px;}  /* all list items */
.dropv li ul {position: absolute; background: #993399; 
  padding: 0px 0px 0px 4px; width: 170px; left: -9999px;} /* second-level lists */
.dropv li:hover ul {left: auto; } /* nest list under hovered list items */
.dropv li ul li a {color: #ffffff; text-decoration: none; display: block;}
.dropv li ul li a:hover {color: yellow; background:#663399;}

Mouseover to change an image.
The effect of swapping an image on mouseover may be achieved by overlapping two pictures and hiding the top one when the cursor hovers over the area. The whole span may be encompassed with an <a> tag if a page link is needed. Since the span can be active over the entire horizontal area of the screen, it is a good idea to code the span within a table to restrict the area that activates the rollover of the image.

Madame Karima

<span class="imgswap">
 <img src="top-image.jpg" alt=""/>
CSS code for class imgswap:
span.imgswap {background-image:url("bottom-image.jpg"); 
  background-repeat: no-repeat; display:block;}
span.imgswap:hover img {visibility:hidden;} 

© Copyright  - Antonio Zamora