INTERVERTIR DES IMAGES AU PASSAGE DE LA SOURIS

Ceci nous rappelle les jeux de la souris fuyante lorsque le texte changeait au moment où l'on approchait la pointe.

Une fois de plus, le html et le CSS interviennent .

Le code html est le suivant :

<div class="buttonbar" >

<button class="button" onclick="clickhome(this)" type="image"></button><button class="button" onclick="clickexit(this)" type="image"></button></div>

Le CSS doit toujours être inclus entre les balises<style></style>

<style type="text/css">.button { position:relative; background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151231/ob_64aa29_e1.jpg); border:none; width:300px; height:300px; color:white; } .button:hover { background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151231/ob_c91fd4_e2.jpg); } .button:active { top: 1px; left:1px; } .buttonbar { padding:4px; margin:2px; }
</style>

J'ai écrit sur des images de 300 par 300 mais on peut remplacer celles-ci par d'autres images.

CODE 

<div class="buttonbar" >
<style type="text/css">.button { position:relative; background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151231/ob_64aa29_e1.jpg); border:none; width:300px; height:300px; color:white; } .button:hover { background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151231/ob_c91fd4_e2.jpg); } .button:active { top: 1px; left:1px; } .buttonbar { padding:4px; margin:2px; }
</style><button class="button" onclick="clickhome(this)" type="image"></button><button class="button" onclick="clickexit(this)" type="image"></button></div>

RESULTAT

   Etes-vous satisfait de votre salaire ?   Acceptez-vous des heures non payées ?

MERCI ! C'EST BIEN CE QUE NOUS PENSIONS.