ICI header("Location: http://www.mytesting.fr ");

RACCOURCIR UN ARTICLE EN FAISANT APPARAITRE LES IMAGES AU GRE DU LECTEUR

par André MARINI 5 Décembre 2015, 08:00 Images

 

On peut ne mettre que le texte et faire apparaitre les images au gré du lecteur.

Dans l'exemple ci-dessous, la première image est toujours présente de façon à illustrer l'article puis les autres peuvent être ouvertes par le lecteur.

 

EXEMPLE

 

La bécassine des marais vit parfois en troupe nombreuse

 

A partir de maintenant , seul le texte sera présent avec la possibilité d'ouvrir les images au gré du lecteur.

La bécassine des marais a le plumage des parties supérieures densément rayé et tacheté de brun clair et foncé. 

Les parties inférieures sont blanches avec des rayures noires sur les flancs. 

La poitrine est chamoisée, tachetée de brun. 

La queue est de couleur fauve, finement barrée de noir. 

La bécassine des marais vit et se reproduit dans les zones herbeuses humides, au bord des marais d'eau douce et des étangs, dans les prairies inondées, les champs, et parfois, on peut la trouver près des marais salants. 

Voici le code à appliquer pour faire apparaître ou disparaître l'image en pointant sur sa dénomination.

 

CODE

 

<p><a class="info" href="#">Ouvrir bécassine<span><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151205/ob_52094b_dsc-0184.jpg" />

<style type="text/css">a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none

a.info:hover{
z-index:25;
background-color:#FFF

a.info span{
display: none

a.info:hover span{
display:block;
position:absolute;
top:2em; left:2em; width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
</style>
</span></a></p>

 

RESULTAT

commentaires

Haut de page