• Diapo 5 img au clic

    Pour montrer le peu de différence entre ce type de montage au clic et le même, au survol, voici la version au clic.

    <div id="mt">
    <p><input id="aa" type="text" /><input id="ab" type="text" /><input id="ac" type="text" /><input id="ad" type="text" /><input id="ae" type="text" /><img id="ba" src="http://ekladata.com/3RRaMG_Qk0rUT_csCrisVP5ify4/N0010.jpg
    " alt="" /><img id="bb" src="http://ekladata.com/oVM2whQa6eLRy2bIjWfPR5qXfdM/N0055.jpg" alt="" /><img id="bc" src="http://ekladata.com/8L3Bc9DZXJf9aPzCBIfAZoYcTh0/N0056.jpg" alt="" /><img id="bd" src="http://ekladata.com/xfBcgvfZIWEM-h1aJLHQAV9KaWI/N0057.jpg" alt="" /><img id="be" src="http://ekladata.com/WHdB-ZgB3DUqzKfV4ITvH3F-Nkg/N0060.jpg" alt="" /></p>
    </div>
    <style><!--
    #mt{position:relative; width:1067px; height:600px; border:4px ridge grey; overflow:hidden; margin:10px auto;}
    #aa{position:absolute; z-index:5; transform:translate(1000px,10px); width:30px; height:30px; border-radius:50%; background:lime; box-shadow:inset 2px 2px 4px black, inset -2px -2px 4px white;}
    #ab{position:absolute; z-index:5; transform:translate(1000px,100px); width:30px; height:30px; border-radius:50%; background:lime; box-shadow:inset 2px 2px 4px black, inset -2px -2px 4px white;}
    #ac{position:absolute; z-index:5; transform:translate(1000px,200px); width:30px; height:30px; border-radius:50%; background:lime; box-shadow:inset 2px 2px 4px black, inset -2px -2px 4px white;}
    #ad{position:absolute; z-index:5; transform:translate(1000px,300px); width:30px; height:30px; border-radius:50%; background:lime; box-shadow:inset 2px 2px 4px black, inset -2px -2px 4px white;}
    #ae{position:absolute; z-index:5; transform:translate(1000px,400px); width:30px; height:30px; border-radius:50%; background:lime; box-shadow:inset 2px 2px 4px black, inset -2px -2px 4px white;}
    #ba{ position:absolute; transition:all 2s linear; transform:translate(0px,0px); width:1067px; height:600px;}
    #bb{ position:absolute; transition:all 2s linear; transform:translate(1100px,0px); width:1067px; height:600px;}
    #bc{ position:absolute; transition:all 2s linear; transform:translate(1100px,0px); width:1067px; height:600px;}
    #bd{ position:absolute; transition:all 2s linear; transform:translate(1100px,0px); width:1067px; height:600px;}
    #be{ position:absolute; transition:all 2s linear; transform:translate(1100px,0px); width:1067px; height:600px;}
    #aa:focus ~ #ba{transform:translate(0px,0px);}
    #ab:focus ~ #bb{transform:translate(0px,0px);}
    #ac:focus ~ #bc{transform:translate(0px,0px);}
    #ad:focus ~ #bd{transform:translate(0px,0px);}
    #ae:focus ~ #be{transform:translate(0px,0px);}
    --></style>