• Pour marc

    Cette page est destinée à tester la façon de publier un montage, avec un code responsive, pour qu'il s'adapte à chaque taille d'écran du lecteur.
    Les images et liens sont de ce blog: ICI.

    Première solution; Votre code avec arrêt au survol et lien sur chaque image, sur nouvelle page mais mauvais résultat en petite résolution.

     

    "

     

     

    <div id="art" style="border: 10px ridge grey; overflow: hidden; margin: 0px auto;">
    <p class="husky" style="width: 5600px; height: 400px; margin: -2px 0 0 0;"><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-chiots-c267231" target="blank"><img id="hus" src="http://ekladata.com/AOHzpO3iD0EXWczMCMFbgscUJck/Photo-10.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-femelles-p47315" target="blank"><img id="hus" src="http://ekladata.com/FGu1Obv6TUqLB418NVuGgDJqy8s/Photo-11.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-males-p86439" target="blank"><img id="hus" src="http://ekladata.com/JfaaS3qB44J0MD1Gw_EpULm3m9k/Photo-12.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/sport-et-husky-c267142" target="blank"><img id="hus" src="http://ekladata.com/vZN4GxTPA4VUbr_oMabxQKyPM2Y/Photo-13.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/actualites-c17286831" target="blank"><img id="hus" src="http://ekladata.com/Ev8bGexdtK1GowdzqNcAQ70vZtI/Photo-14.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/anciennes-portees-c405758" target="blank"><img id="hus" src="http://ekladata.com/HnotYSDtyxhzI8H7tcqvIMbTzWo/Photo-15.jpg" alt="&quot;" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/vos-questions-sur-le-husky-c264509" target="blank"><img id="hus" src="http://ekladata.com/ABg477ouyHm7mMZ1ZmNEaCDMUYc/Photo-16.jpg" alt="" /></a></p>
    </div>

    <style type="text/css"><!--
    .husky { -webkit-animation:stock 25s linear .2s infinite alternate; -moz-animation:stock 25s linear .2s infinite alternate; -webkit-animation-play-state: running; -moz-animation-play-state: running; } .husky:hover{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } @-webkit-keyframes stock { 0% {-webkit-transform : translate(0px);} 15% {-webkit-transform : translate(0px);} 17% {-webkit-transform : translate(-500px);} 30% {-webkit-transform : translate(-500px);} 32% {-webkit-transform : translate(-1000px);} 45% {-webkit-transform : translate(-1000px);} 47% {-webkit-transform : translate(-1500px);} 60% {-webkit-transform : translate(-1500px);} 62% {-webkit-transform : translate(-2000px);} 75% {-webkit-transform : translate(-2000px);} 77% {-webkit-transform : translate(-2500px);} 90% {-webkit-transform : translate(-2500px);} 92% {-webkit-transform : translate(-3000px);} 100% {-webkit-transform : translate(-3000px);} } @-moz-keyframes stock { 0% {-moz-transform : translate(0px);} 15% {-moz-transform : translate(0px);} 17% {-moz-transform : translate(-500px);} 30% {-moz-transform : translate(-500px);} 32% {-moz-transform : translate(-1000px);} 45% {-moz-transform : translate(-1000px);} 47% {-moz-transform : translate(-1500px);} 60% {-moz-transform : translate(-1500px);} 62% {-moz-transform : translate(-2000px);} 75% {-moz-transform : translate(-2000px);} 77% {-moz-transform : translate(-2500px);} 90% {-moz-transform : translate(-2500px);} 92% {-moz-transform : translate(-3000px);} 100% {-moz-transform : translate(-3000px);} }
    @media screen and (min-width: 1000px) and (max-width: 1400px)
    {#art{ max-width:500px; height:400px;}}
    @media screen and (min-width: 1000px) and (max-width: 1400px)
    {#hus{ max-width:500px; height:400px;}}
    @media screen and (min-width: 800px) and (max-width: 1000px)
    {#art{ width:450px; height:360px; }}
    @media screen and (min-width: 800px) and (max-width: 1000px)
    {#hus{ width:450px; height:360px; }}
    @media screen and (min-width: 600px) and (max-width:800px)
    {#art{ width:400px; height:320px;}}
    @media screen and (min-width: 600px) and (max-width:800px)
    {#hus{ width:400px; height:320px;}}
    @media screen and (min-width: 400px) and (max-width:600px)
    {#art{ width:300px; height:240px;}}
    @media screen and (min-width: 400px) and (max-width:600px)
    {#hus{ width:300px; height:240px;}}
    --></style>

    J'ai juste ajouté une identification (hus) à chaque image pour l'ajouter au code responsive, dans chaque dimension ce qui fait 2 animations pour une même dimension; il doit y avoir une écriture plus simple mais ne sais pas faire.

    De plus, un loupé qui devrait pouvoir de corriger: les dimensions des images id="hus" ont été mises sans calcul et dans le diaporama, en petite résolution, elles sortent de la partie affichée et se décalent.

    Deuxième solution: faire un défilement manuel (scroll bar) et un lien sur chaque image.

     

     


    <div id="mont1" style="border: 10px ridge grey; overflow: auto; margin: 0px auto; white-space: nowrap;"><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-chiots-c267231" target="blank"><img class="husky" src="http://ekladata.com/AOHzpO3iD0EXWczMCMFbgscUJck/Photo-10.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-femelles-p47315" target="blank"><img class="husky" src="http://ekladata.com/FGu1Obv6TUqLB418NVuGgDJqy8s/Photo-11.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/nos-males-p86439" target="blank"><img class="husky" src="http://ekladata.com/JfaaS3qB44J0MD1Gw_EpULm3m9k/Photo-12.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/sport-et-husky-c267142" target="blank"><img class="husky" src="http://ekladata.com/vZN4GxTPA4VUbr_oMabxQKyPM2Y/Photo-13.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/actualites-c17286831" target="blank"><img class="husky" src="http://ekladata.com/Ev8bGexdtK1GowdzqNcAQ70vZtI/Photo-14.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/anciennes-portees-c405758" target="blank"><img class="husky" src="http://ekladata.com/HnotYSDtyxhzI8H7tcqvIMbTzWo/Photo-15.jpg" alt="" /></a><a href="http://elevage-songedunenuitpolaire.eklablog.com/vos-questions-sur-le-husky-c264509" target="blank"><img class="husky" src="http://ekladata.com/ABg477ouyHm7mMZ1ZmNEaCDMUYc/Photo-16.jpg" alt="" /></a></div>
    <style type="text/css"><!--
    .husky{ width:500px; height:400px;}
    @media screen and (min-width: 1000px)
    {#mont1{ max-width:500px; height:420px;}}
    @media screen and (min-width: 800px) and (max-width: 1000px)
    {#mont1{ width:450px; height:380px; }}
    @media screen and (min-width: 800px) and (max-width: 1000px)
    {.husky{ width:450px; height:360px; }}
    @media screen and (min-width: 600px) and (max-width:800px)
    {#mont1{ width:400px; height:320px;}}
    @media screen and (min-width: 600px) and (max-width:800px)
    {.husky{ width:400px; height:300px;}}
    @media screen and (min-width: 400px) and (max-width:600px)
    {#mont1{ width:350px; height:280px;}}
    @media screen and (min-width: 400px) and (max-width:600px)
    {.husky{ width:350px; height:260px;}}
    --></style>