• Article Nicole

    La demande de cette fidèle visiteuse d'outre-manche concerne la structure d'un article, avec du texte, 2 images avec changement au survol, texte et de nouveau 2 images avec changement au survol.

    Le premier texte ne devrait pas poser de problème, de même que le second; nous pouvons placer les montages photo une fois l'article rédigé.

     

    Vos texte écrits, il vous faudra ouvrir le code source et repérer vos paragraphes afin de placer les montages où vous le voulez.

    Voici le code source de ces premières lignes:

     

    Les lettres rouge représentent les endroits où vous écrirez les codes de vos images au survol.

    *****************

    Pour changer d'images au survol, il vous faut d'abord héberger et récupérer leurs adresses avant tout; ensuite écrire, aux endroits repérés:

    <p id="nic1">&nbsp;</p>
    <style><!--
    #nic1{width:60vw; height:33.75vw; margin:1vh auto;background:url('http://ekladata.com/m1pakaQSnaT69E5OxURH6GaV5Bo.jpg'); background-size:cover;}
    #nic1:hover{background:url('http://ekladata.com/j5jHtO5eUEtpVSHrf-oUHZBY1I0.jpg'); background-size:cover;}
    --></style>

    Puisque notre visiteuse veut placer deux montages, ne pas oublier de changer l'identifiant et bien sûr, les adresses; voici les miens:

    <p id="nic2">&nbsp;</p>
    <style><!--
    #nic2{width:60vw; height:33.75vw; margin:1vh auto;background:url('http://ekladata.com/tAqhGO9zaBMwKKz6u0NKseRgU4I.jpg'); background-size:cover;}
    #nic2:hover{background:url('http://ekladata.com/sezMfLFJbBJdwleyt7SfZeoUDwk.jpg'); background-size:cover;}
    --></style>

    Je vais ouvrir le code source et coller chacun de ces codes aux endroits choisis.

    La page est l'illustration de cette façon de faire !