COMMENT METRE UNE IMAGE QUI SE GROSSIT AVEC LE PASSAGE DE LA SOURIS
CODE DE L'IMAGE :
Le code de principe est:
<img src="URL de l'image fixe" onmouseover='this.src="URL de l'image qui apparaît"' onmouseout='this.src="URL de l'image fixe"'>
ce qui donne, pour cet exemple, avec la décoration ajoutée:
<p><img style="border: 6px solid white; border-radius: 150px; box-shadow: 6px 6px 8px black;" onmouseover="this.src='http://idata.over-blog.com/2/52/66/04/Fleurs-de-champs-et-papillon/Fleurs-des-champs-1.jpg' " onmouseout="this.src='http://aminus3.s3.amazonaws.com/image/g0009/u00008537/i00550824/fd25aaad27f2b7c170320da37887882d_large.jpg' " src="https://aminus3.s3.amazonaws.com/image/g0009/u00008537/i00550824/fd25aaad27f2b7c170320da37887882d_large.jpg" alt="" /></p>
<div class="bord" style="width: 1000px; height: 400px; box-shadow: 0px 0px 2px 4px black; margin: 10px 0 10px 10px;"><img class="ab" src="https://gifs.toutimages.com/images/ani_insectes/abeille/abeille_037.gif" alt="" />
<p style="width: 972px; height: 376px; border: 4px solid black; margin: -41px 0 0 0; text-align: center; background-image: url('http://fonds.toutimages.com/fo_jaune/jaune_015.jpg'); box-shadow: 0px 0px 4px 4px grey inset; padding: 10px; font-size: 12pt;">Selon une idée matinale,</p></div>
<style type="text/css"><!--
.ab{
-webkit-animation:bzz 18s linear .2s infinite normal;
-moz-animation:bzz 18s linear .2s infinite normal;}
@-webkit-keyframes bzz
{
0% {-webkit-transform : translate(-40px,-40px) rotatey(180deg);}
1% {-webkit-transform : translate(-40px,-40px) rotatey(180deg);}
33% {-webkit-transform : translate(1000px,-40px) rotatey(180deg);}
34% {-webkit-transform : translate(1000px,-40px) rotatey(0deg);}
50% {-webkit-transform : translate(1000px,400px) rotatey(0deg);}
83% {-webkit-transform : translate(-40px,400px) rotatey(0deg);}
84% {-webkit-transform : translate(-40px,400px) rotatey(180deg);}
100% {-webkit-transform : translate(-40px,-40px) rotatey(180deg);}
}
@-moz-keyframes bzz
{
0% {-moz-transform : translate(-40px,-40px) rotatey(180deg);}
1% {-moz-transform : translate(-40px,-40px) rotatey(180deg);}
33% {-moz-transform : translate(1000px,-40px) rotatey(180deg);}
34% {-moz-transform : translate(1000px,-40px) rotatey(0deg);}
50% {-moz-transform : translate(1000px,400px) rotatey(0deg);}
83% {-moz-transform : translate(-40px,400px) rotatey(0deg);}
84% {-moz-transform : translate(-40px,400px) rotatey(180deg);}
100% {-moz-transform : translate(-40px,-40px) rotatey(180deg);}
}
.bord{
border: 40px solid black;
-moz-border-image: url(http://fonds.toutimages.com/fo_nature/nature_039.jpg) 40 round;
-webkit-border-image: url(http://fonds.toutimages.com/fo_nature/nature_039.jpg) 40 round;}
--></style>
Selon une idée matinale,