18041 sujets

Questions générales et questions de débutants

Apparition du titre au passage de la sourie

Bonjour à tous,
Voilà je cherche comment faire pour que lorsque l'on passe la sourie devant la vignette d'un album le titre apparait
J'ai bien trouver une partie de code mais sa ne marche pas comme je le souhaite
cela concerne ma page albums,
http://jerome-watel.fr/Albums.html

pour le test que j'ai fais, je me retrouve avec une bande grise sous la première vignette.
Pour infos seul la premiere vignette est concerné par le test Smiley smile pour le moment
Voici le code en question
D'avance merci 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
    <meta http-equiv="Content-Language" content="fr">
    <meta name="robots" content="index">
    <meta name="rating" content="General" />
    <meta name="description" content="Bienvenue sur mon site consacré à la faune et la flore">
    <meta name="keywords" lang="fr" content="Jérôme Watel,faune et flore, photographie, vidéo">
    <meta name="reply-to" content="jerome6275@gmail.com">
    <meta name="category" content="Actualités">
    <meta name="distribution" content="global">
    <meta name="author" lang="fr" content="Jérôme Watel">
    <meta name="copyright" content="Jérôme Watel">
    <meta name="identifier-url" content="http://www.jerome-watel.fr">
    <meta name="expires" content="never">
    <meta name="Date-Creation-yyyymmdd" content="20121005">
    <meta name="Date-Revision-yyyymmdd" content="20121020">
    <meta name="revisit-after" content="15 days">
    <META NAME="owner" CONTENT="jerome6275@gmail.com">
    <META NAME="organization" CONTENT="jerome-watel.fr">
    <META NAME="contact" CONTENT="jerome6275@gmail.com">
    <META NAME="contactName" CONTENT="Jérôme Watel">
    <META NAME="contactOrganization" CONTENT="Jérôme Watel">
    <meta property="og:url" content="http://www.jerome-watel.fr" />
    <meta property="og:type" content="website" />

    <title>Faune et flore photographie</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="menu/menu.css" />
    <link rel="stylesheet" href="galerie/css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="galerie/js/prototype.js"></script>
    <script type="text/javascript" src="galerie/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="galerie/js/lightbox.js"></script>

</head>

<body>

    <div id="content">

        <p style="text-align: center"><img height="200" src="galerie/baniere.jpg" width="800">
        </p>
        <br>

        <div class="myHomePage_name" style="text-align: center;"><span style="font-size:15px;"><span style="font-family: KG Sweet N Sassy,courier,monospace;">"Une photographie, c'est un fragment de temps qui ne reviendra pas."</span></span>
        </div>
        <br>

        <ul id="menu">
            <li class="current"><a href="index.html">Accueil</a>
            </li>
            <li><a href="Albums.html">Albums</a>
            </li>
            <li><a href="recit.html">R&eacute;cit</a>
            </li>
            <li><a href="livre%20dor.html">Livre d'or</a>
            </li>
            <li><a href="Liens.html">Liens</a>
            </li>
            <li><a href="contact.html">Contact</a>
            </li>
        </ul>
        <hr size="4" />

    <!--Rajout pour apparition au survol de la souris-->
        [b]<article>
        <ul class="img-list">
  <li>
    <a href="galerie/j-w-r-p-cerf-2015-7.jpg" rel="lightbox[cervides]" title="Brocard"><img alt="" height="173" src="thumb-vignette/j-w-r-p-cerf-2015-7.jpg" width="260">
      <span class="text-content"><span>Mammifères</span></span>
    </a>
  </li>[/b]
  
            <a href="galerie/j-w-r-p-biche-2015-1.jpg" rel="lightbox[cervides]" style="display:none" title="Biches">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-1.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-2.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-3.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-4.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-5.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-6.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-9.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-10.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-11.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-12.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-16.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-17.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-18.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-19.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-20.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-21.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-22.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-23.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-24.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-25.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015-26.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/j-w-r-p-cerf-2015.jpg" rel="lightbox[cervides]" style="display:none" title="Cerf élaphe">cervides</a>
            <a href="galerie/jerome-watel-brocard-2013-7.jpg" rel="lightbox[cervides]" style="display:none" title="Brocard">cervides</a>
            <a href="galerie/jerome-watel-chevrette-2013-5.jpg" rel="lightbox[cervides]" style="display:none" title="Chevrette">cervides</a>
            <a href="galerie/jerome-watel-chevrette-N&B-2013-3.jpg" rel="lightbox[cervides]" style="display:none" title="Chevrette">cervides</a>
            <a href="galerie/jerome-watel-renard-roux-2014-4.jpg" rel="lightbox[cervides]" style="display:none" title="Renard">cervides</a>
            <a href="galerie/jerome-watel-renard-roux-2014-3.jpg" rel="lightbox[cervides]" style="display:none" title="Renard">cervides</a>
            <a href="galerie/jerome-watel-lievre-2015.jpg" rel="lightbox[cervides]" style="display:none" title="Lièvre">cervides</a>
            <a href="galerie/jerome-watel-brocard-2015-9.jpg" rel="lightbox[cervides]" style="display:none" title="Brocard">cervides</a>
        </article>
        

        <article>
            <a href="galerie/jerome-watel-hibou-des-marais-32-2012.jpg" rel="lightbox[rapaces]" title="Hibou des marais"><img alt="" height="173" src="thumb-vignette/vignette-rapaces-1.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-hibou-des-marais-2012.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-hibou-des-marais-30-2012.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-hibou-des-marais-2013-7.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-hibou-des-marais-2013-10.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-harfang-des-neiges-2014-10.jpg" rel="lightbox[rapaces]" style="display:none" title="Harfang des neiges">oiseaux</a>
            <a href="galerie/jerome-watel-harfang-des-neiges-2014-7.jpg" rel="lightbox[rapaces]" style="display:none" title="Harfang des neiges">oiseaux</a>
            <a href="galerie/jerome-watel-hibou-des-marais-2015-13.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-hibou-des-marais-2015-18.jpg" rel="lightbox[rapaces]" style="display:none" title="Hibou des marais">oiseaux</a>
            <a href="galerie/jerome-watel-chouette-hulotte-2015.jpg" rel="lightbox[rapaces]" style="display:none" title="Chouette hulotte">oiseaux</a>
            <a href="galerie/jerome-watel-chouette-hulotte-2015-3.jpg" rel="lightbox[rapaces]" style="display:none" title="Chouette hulotte">oiseaux</a>
            <a href="galerie/jerome-watel-faucon-crecerelle-2015-2.jpg" rel="lightbox[rapaces]" style="display:none" title="Faucon crécerelle">oiseaux</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-mesange-bleu-2013-3.jpg" rel="lightbox[L'hiver]" title="Mésange bleu"><img alt="" height="173" src="thumb-vignette/jerome-watel-mesange-bleu-2013-3.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-mesange-huppee-2013-1.jpg" rel="lightbox[L'hiver]" style="display:none" title="Mésange huppée">L'hiver</a>
            <a href="galerie/jerome-watel-accenteur-mouchet-2013.jpg" rel="lightbox[L'hiver]" style="display:none" title="Accenteur mouchet">L'hiver</a>
            <a href="galerie/jerome-watel-mesange-bleu-2013-4.jpg" rel="lightbox[L'hiver]" style="display:none" title="Mésange bleu">L'hiver</a>
            <a href="galerie/jerome-watel-mesange-bleu-2013-1.jpg" rel="lightbox[L'hiver]" style="display:none" title="Mésange bleu">L'hiver</a>
            <a href="galerie/jerome-watel-mesange-huppee-2013-8.jpg" rel="lightbox[L'hiver]" style="display:none" title="Mésange huppée">L'hiver</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-grebe-huppe.jpg" rel="lightbox[ambiance]" title="Lever de jour"><img alt="" height="173" src="thumb-vignette/jerome-watel-grebe-huppe-2.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-baston-foulques-2013.jpg" rel="lightbox[ambiance]" style="display:none" title="Lever du jour">ambiance</a>
            <a href="galerie/jerome-watel-ambiance-foulque-2013-1.jpg" rel="lightbox[ambiance]" style="display:none" title="Lever du jour">ambiance</a>
            <a href="galerie/jerome-watel-ambiance-foulque-2013.jpg" rel="lightbox[ambiance]" style="display:none" title="Lever du jour">ambiance</a>
            <a href="galerie/jerome-watel-cygne-2013.jpg" rel="lightbox[ambiance]" style="display:none" title="Cygne">ambiance</a>
            <a href="galerie/jerome-watel-cygne-2013-1.jpg" rel="lightbox[ambiance]" style="display:none" title="Cygne">ambiance</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-vautour-fauve-2014-4.jpg" rel="lightbox[remuzat]" title="Vautour fauve"><img alt="" height="173" src="thumb-vignette/jerome-watel-vautour-fauve-2014-4.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-2.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-3.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-1.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-moine-2014.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour moine">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-5.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-6.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-7.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-9.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-10.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-12.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-13.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-14.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
            <a href="galerie/jerome-watel-vautour-fauve-2014-15.jpg" rel="lightbox[remuzat]" style="display:none" title="Vautour fauve">remuzat</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-martre-4-2014.jpg" rel="lightbox[petit mammifere]" title="Martre"><img alt="" height="173" src="thumb-vignette/jerome-watel-martre-4-2014.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-martre-1-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-2-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-3-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-5-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-6-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-7-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-8-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
            <a href="galerie/jerome-watel-martre-2014.jpg" rel="lightbox[petit mammifere]" style="display:none" title="Martre">petit mammifere</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-linotte-melodieuse-2013-1.jpg" rel="lightbox[passereaux]" title="Linotte mélodieuse"><img alt="" height="173" src="thumb-vignette/jerome-watel-linotte-melodieuse-2013-1.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-tarier-patre-2013.jpg" rel="lightbox[passereaux]" style="display:none" title="Tarier pâtre">passereaux</a>
            <a href="galerie/jerome-watel-mesange-huppee-2013-11.jpg" rel="lightbox[passereaux]" style="display:none" title="Mésange huppée">passereaux</a>
            <a href="galerie/jerome-watel-mesange-huppee-2013-10.jpg" rel="lightbox[passereaux]" style="display:none" title="Mésange huppée">passereaux</a>
            <a href="galerie/jerome-watel-linotte-melodieuse-2013.jpg" rel="lightbox[passereaux]" style="display:none" title="Linotte mélodieuse">passereaux</a>
            <a href="galerie/jerome-watel-sittelle-torchepot-2013-2.jpg" rel="lightbox[passereaux]" style="display:none" title="Sittelle torchepot">passereaux</a>
            <a href="galerie/jerome-watel-sittelle-torchepot-2013-1.jpg" rel="lightbox[passereaux]" style="display:none" title="Sittelle torchepot">passereaux</a>
            <a href="galerie/jerome-watel-mesange-bleu-2013-9.jpg" rel="lightbox[passereaux]" style="display:none" title="Mésange bleu">passereaux</a>
            <a href="galerie/jerome-watel-tarin-des-aulnes-2013-1.jpg" rel="lightbox[passereaux]" style="display:none" title="Tarin des aulnes">passereaux</a>
            <a href="galerie/jerome-watel-merle-2013.jpg" rel="lightbox[passereaux]" style="display:none" title="Merle">passereaux</a>
            <a href="galerie/jerome-watel-pic-epeiche.jpg" rel="lightbox[passereaux]" style="display:none" title="Pic epeiche">passereaux</a>
            <a href="galerie/jerome-watel-bruant-des-neiges-1.jpg" rel="lightbox[passereaux]" style="display:none" title="Bruant des neiges">passereaux</a>
            <a href="galerie/jerome-watel-jaseur-boreal-1.jpg" rel="lightbox[passereaux]" style="display:none" title="Jaseur boréal">passereaux</a>
            <a href="galerie/jerome-watel-jaseur-boreal.jpg" rel="lightbox[passereaux]" style="display:none" title="Jaseur boréal">passereaux</a>
            <a href="galerie/jerome-watel-mesange-charbonniere.jpg" rel="lightbox[passereaux]" style="display:none" title="Mésange charbonnière">passereaux</a>
            <a href="galerie/jerome-watel-pinson-du-nord-2013.jpg" rel="lightbox[passereaux]" style="display:none" title="Pinson du nord">passereaux</a>
            <a href="galerie/jerome-watel-pic-epeiche-2013.jpg" rel="lightbox[passereaux]" style="display:none" title="Pic epeiche">passereaux</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-3.jpg" rel="lightbox[gorgebleue]" title="Gorgebleue à mirroir"><img alt="" height="173" src="thumb-vignette/jerome-watel-gorgebleue-a-miroir-2015-3.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-1.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-10.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-11.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-12.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-13.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-14.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-15.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-16.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-17.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-18.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-2.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-8.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-4.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-5.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-6.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-7.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
            <a href="galerie/jerome-watel-gorgebleue-a-miroir-2015-9.jpg" rel="lightbox[gorgebleue]" style="display:none" title="Gorgebleue à mirroir">gorgebleue</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-4.jpgg" rel="lightbox[baviere]" title="Chat forestier"><img alt="" height="173" src="thumb-vignette/jerome-watel-ours-brun-baviere-2013-4.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-chat-forestier-baviere-2013-1.jpg" rel="lightbox[baviere]" style="display:none" title="Chat forestier">baviere</a>
            <a href="galerie/jerome-watel-chat-forestier-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Chat forestier">baviere</a>
            <a href="galerie/jerome-watel-chat-forestier-baviere-2013-2.jpg" rel="lightbox[baviere]" style="display:none" title="Chat forestier">baviere</a>
            <a href="galerie/jerome-watel-chat-forestier-baviere-2013-3.jpg" rel="lightbox[baviere]" style="display:none" title="Chat forestier">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-1.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-2.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-3.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-4.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-5.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-6.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-ours-brun-baviere-2013-7.jpg" rel="lightbox[baviere]" style="display:none" title="Ours brun">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-1.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-2.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-3.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-4.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-5.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-6.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-7.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-lynx-baviere-2013-8.jpg" rel="lightbox[baviere]" style="display:none" title="Lynx boreal">baviere</a>
            <a href="galerie/jerome-watel-loup-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Loup">baviere</a>
            <a href="galerie/jerome-watel-loup-baviere-2013-1.jpg" rel="lightbox[baviere]" style="display:none" title="Loup">baviere</a>
            <a href="galerie/jerome-watel-loup-baviere-2013-2.jpg" rel="lightbox[baviere]" style="display:none" title="Loup">baviere</a>
            <a href="galerie/jerome-watel-loup-baviere-2013-3.jpg" rel="lightbox[baviere]" style="display:none" title="Loup">baviere</a>
            <a href="galerie/jerome-watel-loup-baviere-2013-4.jpg" rel="lightbox[baviere]" style="display:none" title="Loup">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013-2.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013-1.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013-3.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013-4.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
            <a href="galerie/jerome-watel-loutre-baviere-2013.jpg" rel="lightbox[baviere]" style="display:none" title="Loutre">baviere</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-11.jpg" rel="lightbox[grue cendree]" title="Huppe fascée"><img alt="" height="173" src="thumb-vignette/jerome-watel-huppe-fasciee-2014-11.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-8.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-9.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-10.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-1.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-3.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-4.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-5.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-6.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-huppe-fasciee-2014-7.jpg" rel="lightbox[grue cendree]" style="display:none" title="Huppe fascée">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-10.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-1.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-2.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-3.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-4.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-5.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-6.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-7.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-8.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
            <a href="galerie/jerome-watel-grue-cendree-2013-9.jpg" rel="lightbox[grue cendree]" style="display:none" title="Les grues cendrêe">grue cendree</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-grand-gravelot-2014-4.jpg" rel="lightbox[limicolle]" title="Grand gravelot"><img alt="" height="173" src="thumb-vignette/jerome-watel-grand-gravelot-2014-4.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-grand-gravelot-2014.jpg" rel="lightbox[limicolle]" style="display:none" title="Grand gravelot">limicolle</a>
            <a href="galerie/jerome-watel-grand-gravelot-2014-1.jpg" rel="lightbox[limicolle]" style="display:none" title="Grand gravelot">limicolle</a>
            <a href="galerie/jerome-watel-grand-gravelot-2014-3.jpg" rel="lightbox[limicolle]" style="display:none" title="Grand gravelot">limicolle</a>
            <a href="galerie/jerome-watel-grand-gravelot-2014-5.jpg" rel="lightbox[limicolle]" style="display:none" title="Grand gravelot">limicolle</a>
            <a href="galerie/jerome-watel-chevalier-gambette-2013.jpg" rel="lightbox[limicolle]" style="display:none" title="Chevalier gambette">limicolle</a>
            <a href="galerie/jerome-watel-chevalier-gambette-2013-1.jpg" rel="lightbox[limicolle]" style="display:none" title="Chevalier gambette">limicolle</a>
            <a href="galerie/jerome-watel-chevalier-gambette-2013-2.jpg" rel="lightbox[limicolle]" style="display:none" title="Chevalier gambette">limicolle</a>
            <a href="galerie/jerome-watel-chevalier-gambette-2013-3.jpg" rel="lightbox[limicolle]" style="display:none" title="Chevalier gambette">limicolle</a>
        </article>

        <article>
            <a href="galerie/jerome-watel-anax-empereur-2013.jpg" rel="lightbox[batracien]" title="aeschne mixte mâle"><img alt="" height="173" src="thumb-vignette/jerome-watel-anax-empereur-2013.jpg" width="260">
            </a>
            <a href="galerie/jerome-watel-lezard-des-murailles-2013.jpg" rel="lightbox[batracien]" style="display:none" title="Lêzard des murailles">batracien</a>
            <a href="galerie/jerome-watel-grenouille-2013-6.jpg" rel="lightbox[batracien]" style="display:none" title="Grenouille">batracien</a>
            <a href="galerie/jerome-watel-grenouille-2013-5.jpg" rel="lightbox[batracien]" style="display:none" title="Grenouille">batracien</a>
            <a href="galerie/jerome-watel-grenouille-2013-3.jpg" rel="lightbox[batracien]" style="display:none" title="Grenouille">batracien</a>
            <a href="galerie/jerome-watel-grenouille-2013-2.jpg" rel="lightbox[batracien]" style="display:none" title="Grenouille">batracien</a>
            <a href="galerie/jerome-watel-2013.jpg" rel="lightbox[batracien]" style="display:none" title="Chrysope aux yeux d'or">batracien</a>
            <a href="galerie/jerome-watel-orphrys-abeille-2013-2.jpg" rel="lightbox[batracien]" style="display:none" title="Orphrys abeille">batracien</a>
            <a href="galerie/jerome-watel-orphrys-abeille-2013-1.jpg" rel="lightbox[batracien]" style="display:none" title="Orphrys abeille">batracien</a>
            <a href="galerie/jerome-watel-platanthera-bifolia-2013.jpg" rel="lightbox[batracien]" style="display:none" title="Platanthera bifolia">batracien</a>
            <a href="galerie/jerome-watel-orphrys-abeille-2013.jpg" rel="lightbox[batracien]" style="display:none" title="Orphrys abeille">batracien</a>
        </article>

        <hr size="4" />

        <div class="footer">
            <p>"Les images de ce site ne sont pas libres de droit merci de bien vouloir respecter l'auteur sur ce point." &copy; J&eacute;r&ocirc;me Watel 2015.</p>
        </div>

    </div>
    <script type="text/javascript">
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try {
            var pageTracker = _gat._getTracker("UA-36108075-1");
            pageTracker._trackPageview();
        } catch (err) {}
    </script>
</body>

</html>


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0px none;
  font-size: 100%;
  margin: 0px;
  outline: 0px none;
  padding: 0px;
  vertical-align: baseline;
}
/* fond d'écran */ 
body {
  background-attachment: fixed;
  background-image: url("http://jerome-watel.fr/img/img-fond.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  color: #575757;
  font: 14px/1.6 Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
}

table {
  border-collapse: separate;
  border-spacing: 0px;
}

caption, th, td {
  font-weight: normal;
  text-align: left;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

header, section, footer, aside, nav, article, figure {
  display: block;
}

a, a:visited {
  color: black;
}

a:hover, a:active {
  color: #000000;
}

#dev7link {
  background: rgba(0, 0, 0, 0) url("images/dev7logo.png") no-repeat scroll 0% 0%;
  border: 0px none;
  display: block;
  height: 67px;
  left: 50px;
  position: absolute;
  text-indent: -9999px;
  top: 0px;
  width: 60px;
}

.slider-wrapper {
  height: 512px;
  margin: 20px auto 50px;
  width: 768px;
}

#content {
  margin: 20px auto 0px;
  padding-bottom: 20px;
  padding-left: 100px;
  padding-right: 100px;
  text-align: justify;
  width: 812px;
}

.center {
  margin: 0px auto;
  text-align: center;
  width: 840px;
}

.clear {
  clear: both;
}

#plop {
  text-decoration: blink;
}

.titre {
  font-weight: bold;
  padding-bottom: 10px;
  text-align: center;
}

.blocTexte {
  text-align: justify;
}
/* Effet sur la bande de texte */
.footer {
	font-size: 12px;
	font-style: italic;
	text-align: center;
	line-height: 3em;
	clear: both;
	display: inline-block;
	width: 100%;
	margin: 15px auto 0 auto;
	background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(255,255,255, 0.5), rgba(255,255,255, 0));
}
/*ombre sous les vignettes des albums*/
article {
  display: block;
  position: relative;
  width: 32%;
  background: #ccc;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  text-align: center;
  display: block;
  float: left;
  margin: 5px;
}

article:before, article:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
}

article:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  right: 10px;
  left: auto;
}
/*Titre qui apparait au passage de la sourie*/
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
 
ul.img-list li {
  display: inline-block;
  height: 173px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 260px;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 173px;
  left: 0;
  position: absolute;
  top: 0;
  width: 260px;
}
 
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 173px;
  left: 0;
  position: absolute;
  top: 0;
  width: 260px;
  opacity: 0;
}
 
ul.img-list li:hover span.text-content {
  opacity: 1;
}
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 173px;
  left: 0;
  position: absolute;
  top: 0;
  width: 260px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

Modifié par Jeje6275 (03 Nov 2015 - 20:42)
Pour infos dans le "Html" j'ai mis en évidence la parti du code concerner avec les balise [ b ] [ / b ] juste en dessous du message
<!--Rajout pour apparition au survol de la souris-->
Modifié par Jeje6275 (03 Nov 2015 - 20:55)
Salut Jeje,
tu t'interroges en fait sur l'un des grands classiques élémentaires du css (!).

Alors voici une solution toute simple (et par css3) qui fonctionne bien en affectant un class à l'élément considéré par le survol du curseur de la souris, et son span associé :
<html>
<head>
<style>
.titre
{position:relative}

.titre span
{display:block;position:absolute;width:125px;text-align:center;left:0;bottom:-25px;background-color:#eee;visibility:hidden;opacity:0;transition:all .5s 1s}

.titre:hover span
{visibility:visible;opacity:1;transition:all .5s}
</style>
</head>

<body>
<a class="titre">Survolez-moi !<span><i>et voici le résultat</i></span></a>
</body>
</html>
où 1s rédigé après .5s est interprêté comme un délai, où il faut savoir que transition ne peut s'appliquer par convention sur visibility avant la fin de cette transition (et c'en est heureux !).
Modifié par pictural (05 Nov 2015 - 02:39)
@Jérome: pas sûr que toutes ces meta soient bien utile, sauf à vouloir être spammé.
Inutile également de copier 150 lignes de codes (ça reste assez peu lisible) lorsque tu fournis un lien vers ton site (le code est récupérable en ligne) Smiley cligne
6l20 a écrit :
@Jérome: pas sûr que toutes ces meta soient bien utile, sauf à vouloir être spammé.
Inutile également de copier 150 lignes de codes (ça reste assez peu lisible) lorsque tu fournis un lien vers ton site (le code est récupérable en ligne) Smiley cligne


Je suis débutant et c'est sur les conseils d'une personne qui ma fait mettre tout c méta Smiley decu
Jeje6275 a écrit :
Je suis débutant et c'est sur les conseils d'une personne qui ma fait mettre tout c méta Smiley decu

Nous le sommes tous, plus ou moins Smiley cligne
Pour te faire un idée, même si l'article date un peu (petite bise à Florent en passant Smiley smile ) :
À quoi servent les balises META ?

D'une manière générale, les choses évoluent très vite, ce qui était utile hier ne l'est peut-être plus aujourd'hui, mais reviendra peut-être demain...
Les conseils donnés de bonne foi ne doivent pas t'empêcher de te tenir informé, et/ou de te renseigner, et si j'ajoute à cela que je ne détiens pas la vérité absolue et qu'un autre te donnera sans doute les conseils opposés, tu n'as pas fini de te faire des nœuds au cerveau Smiley lol

ps : La balise <meta> Kagoul revient fort avec l'arrivée des premiers frimats Smiley eek
Sujet clos
Aller à