• Exemple 137

    Poursuivons avec une autre façon d'afficher une seconde image en cliquant sur une première.

    Il faut, bien entendu, obtenir les adresses des deux images et, si cela vous convient, on peut les héberger en cliquant sur l'icône "Image" puis ouvrir le code source pour les copier.

    Exemple 137

    Exemple 137

    Voilà mes 2 images hébergées: j'ai choisi de ne pas les ouvrir au clic (je n'ai besoin que de leurs adresses) et mis une taille de 1536x864px; en ouvrant le code source, je trouve:

    <p style="text-align: center;"><img src="http://ekladata.com/FmxdkAr7LkFDXnkeCQSnomTqx9c.jpg" alt="Exemple 137" /></p>

    <p style="text-align: center;"><img src="http://ekladata.com/ivPGA-awx9vyqqkk5ptHSh8Q-B0.jpg" alt="Exemple 137" /></p>

    Je reprends ces deux adresses pour avoir un changement d'image au survol:

     

     

    <p id="mic0">&nbsp;</p>
    <style><!--
    #mic0{width:1536px; height:864px; margin:1vh auto; border-radius:10vw; box-shadow:inset -0.4vw -0.4vw 0.6vw white, inset 0.4vw 0.4vw 0.6vw black; background:url('http://ekladata.com/FmxdkAr7LkFDXnkeCQSnomTqx9c.jpg');}
    #mic0:hover{background:url('http://ekladata.com/ivPGA-awx9vyqqkk5ptHSh8Q-B0.jpg');}
    --></style>

    Le principe est de placer la première image en fond de cadre et de la faire changer au survol; pas de vitesse de transition dans ce cas mais une image qui se place exactement sur la première.

    On peut ainsi décorer le cadre comme on le souhaite; certes, il faut aller dans le code source (<>) pour le faire...