View / Hide layers without javascript

You want to view a layer of content, or an image when visitors hover over a link. Most of the time you need Flash or Javascript, and their view/hide layer function will help you create your effect.

However, there is an easier, more compatible way to do this (as you may know, Javascript is disabled or inactive for almost 13% of websurfers) without programation language nor Flash.

In CSS, we will use the <a> tag within which we will integrate the layer ( <span> tag) that we will mask and view by using the attributes "display: none;" and "display: inline;" (View result here / View a variation on a menu / view image titles)

Note : /* The texts are explanation comments and can be suppressed. */

CSS Code :
  
<style type="text/css">
<!--
a {
text-decoration: none; /* definition for the link that will display the layer */
}
a:hover {
background: none; /* correction for an IE bug*/
}
a span { /* definition of <span> tag included in <a> */
display: none;
}
a:hover span { /* definition of <span> tag when hovering */
display: inline;
position: absolute;
top: 200px; /* layer's place and dimension that you can change at will */
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>

HTML code :

<body>
<a href="">display layer<span>text and images can be placed here</span></a>
</body>

Now you can change and personalize your parameters!

Note : This method of viewing and masking CSS layers appears not to be working on Explorer Mac

 

(liberally inspired from http://www.meyerweb.com/eric/css/edge/popups/demo.html)

Print the article

Raphaël GOETTER
www.alsacreations.com