• Liens sur image

    Un montage publié semble intéresser mais il n'est pas facile de proposer un code "clef en main" puisque le principe est de placer, sur une image (photo ou carte) des repères qui ouvrent d'autres images ou qui dirigent vers des sites.

    J'ai proposé une carte Google map avec des astérisques dessus; en survolant chaque astérisque, on ouvre une image qui couvre le montage.

    Les images sont placées sous les astérisques, en taille 0vw/0vw, donc invisibles et elles passent en premier plan au survol de chaque astérisque, en s'agrandissant.

    Les astérisques (dans ce cas), deviennent invisibles au survol, pour ne laisser l'image affichée.

    Les repères peuvent être des astérisques, des lettres, des carrés, des ronds ... ou même être invisibles !

    Comme vous le savez, en survolant un lien, le curseur, par défaut, se transforme en une main; on peut faire que le curseur ne se modifie pas pour corser la recherche !

     

    *

    A

    B

     

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.4vh ridge grey; margin: 2vh auto; background: url('http://ekladata.com/uFqqEIVdrdO8AgQiBATOuVGg4t4.jpg'); background-size: cover;">
    <p id="rep1">*</p>
    <p id="rep2">A</p>
    <p id="rep3">B</p>
    <p id="rep4">&nbsp;</p>
    <p id="rep5">&nbsp;</p>
    <p id="rep6">&nbsp;</p>
    <p id="img1">&nbsp;</p>
    <p id="img2">&nbsp;</p>
    <p id="img3">&nbsp;</p>
    <p id="img4">&nbsp;</p>
    <p id="img5">&nbsp;</p>
    <p id="img6">&nbsp;</p>
    </div>

    <style><!--
    #rep1{position:absolute; z-index:5; width:4vw; font-size:4vw; color:red; transform:translate(5vw,5vw);}
    #rep2{position:absolute; z-index:5; width:2vw; font-size:2vw; color:yellow; transform:translate(15vw,10vw);}
    #rep3{position:absolute; z-index:5; width:2vw; font-size:2vw; color:yellow; transform:translate(25vw,15vw);}
    #rep4{position:absolute; z-index:5; width:4vw; height:4vw; transform:translate(35vw,20vw);}
    #rep5{position:absolute; z-index:5; width:2vw; height:2vw; border:0.5vh solid red; transform:translate(45vw,25vw);}
    #rep6{position:absolute; z-index:5; width:2vw; height:2vw; border:0.5vh solid red; border-radius:50%; transform:translate(55vw,30vw);}

    #rep1:hover,#rep2:hover,#rep3:hover,#rep5:hover,#rep6:hover{z-index:10; color:transparent; border:none;}
    #rep4:hover{z-index:10; color:transparent; curseur:auto;}

    #img1{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/TQjGVFr_141icJ4447K_YX1v5Lk.jpg'); background-size:cover;transform:translate(5vw,5vw);transition:all 1s linear;}
    #img2{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/ADJr4UjSqKi0oGStd9tuOUf54j8.jpg'); background-size:cover;transform:translate(15vw,10vw);transition:all 1s linear;}
    #img3{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/uf8zHLgSiFJLBya-3-cVQPBZJEc.jpg'); background-size:cover;transform:translate(25vw,15vw);transition:all 1s linear;}
    #img4{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/EwGtidy9xGRFa75ng6mJc1LJaSM.jpg'); background-size:cover;transform:translate(35vw,20vw);transition:all 1s linear;}
    #img5{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/fa8EaSFPKdmjzwooYPEQHxOCrRA.jpg'); background-size:cover;transform:translate(46vw,26vw);transition:all 1s linear;}
    #img6{position:absolute; z-index:1; width:0vw; height:0vw; background:url('http://ekladata.com/wrX5u-n5yE8cvcQq0us2Kny26Ps.jpg'); background-size:cover;transform:translate(56vw,31vw);transition:all 1s linear;}

    #rep1:hover ~ #img1,#rep2:hover ~ #img2,#rep3:hover ~ #img3,#rep4:hover ~ #img4,#rep5:hover ~ #img5,#rep6:hover ~ #img6{z-index:8; width:60vw; height:33.75vw; transform:translate(0vw,0vw);}
    --></style>

    Chaque repère a une animation différente; vous pouvez choisir celle qui vous convient.

    Chaque image est placée sous chaque repère.