Bonjour à tous, j'ai un panorama sur mon site (en guise de slideshow que je n'ai pas su faire), et j'aimerai pouvoir que chaque image possède un lien propre

Seulement, les images sont stockées dans l'animation, qui elle est dans le css, quelqu'un a une idée ?

Voilà le code html :

<div>

<section>

<h2>Dans cette UE nous avons appris à utiliser le html, en vue de pouvoir fournir un site en fin de semestre. <br>Voici mon site<br/>

</h2>

</section>

<div class="diapo"> 

</div>

</div>

/* DIAPORAMA */

/*CREATION ANNIMATION (COMPATIBLE TOUS SERVEURS)*/
.diapo {
margin: 0 auto;
width: 960px;
height: 500px;
border: 3px solid #333;
background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957799697.png");

webkit-animation-name: diaporama;
webkit-animation-duration: 15s;
webkit-animation-timing-function: linear;
webkit-animation-iteration-count: infinite;
webkit-animation-direction: normal;

moz-animation-name: diaporama;
moz-animation-duration: 15s;
moz-animation-timing-function: linear;
moz-animation-iteration-count: infinite;
moz-animation-direction: normal;

animation-name: diaporama;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}

/*CONTENU ANNIMATION (COMPATIBLE TOUS SERVEURS)*/
@-webkit-keyframes diaporama{
0%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957799697.png");}
20%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957119106.png");}
40%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095956882095.png");}
60%{background-image: url("http://nsa37.casimages.com/img/2016/11/24/1611240959567025.png");}
80%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957695814.png");}
}
@-moz-keyframes diaporama{
0%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957799697.png");}
20%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957119106.png");}
40%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095956882095.png");}
60%{background-image: url("http://nsa37.casimages.com/img/2016/11/24/1611240959567025.png");}
80%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957695814.png");}
}
@keyframes diaporama{
0%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957799697.png");}
20%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957119106.png");}
40%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095956882095.png");}
60%{background-image: url("http://nsa37.casimages.com/img/2016/11/24/1611240959567025.png");}
80%{background-image: url("http://nsa38.casimages.com/img/2016/11/24/161124095957695814.png");}
}

Coucou,

si tu mets tes images en arrière plan et dans ton css, pour ma part je ne vois pas comment faire.. Peut-être en javascript on peut trouver quelque chose et encore je ne suis pas sûr.

En général, dans un slideshow, les images sont intégrées dans le HTML, et non le CSS, sinon comment fais-tu pour les changer ? Tu vas le faire à la main à chaque fois ? Pas très pratique tout ça. =/

Voilà

Comme l'a dit YoshiiSenpai, sans JS, ça n'est pas possible.

Je t'ai bricolé un bout de code en exemple en gardant le principe des images en fond. 

http://codepen.io/anon/pen/woqXWp

Ceci dit, je ne pense pas que ce soit la chose la plus conseillée que ce soit pour le référencement ou l'accessibilité. Il vaudrait mieux lister tes images dans ton html et là, y'aurait pas nécessairement besoin de javascript.

-
Edité par crispfr 27 novembre 2016 à 17:48:58

Merci pour vos réponses
Si je comprends bien, je m'y prends comme un pied pour créer ce slideshow?
Le problème c'est que c'est le seul slide que j'ai réussi à reproduire (inutile de préciser que si j'avais pu j'en aurai pris un autre, comme celui là par exemple : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition )

crispfr, je n'ai jamais utilisé de javascript, j'ai repris ce que tu as écris, ça fonctionne (cette fois ci sur tous les navigateurs en plus) mais je n'ai pas compris où mettre mes liens...

Imaginons je veux aller sur ce lien en cliquant sur la premiere image : https://www.google.fr/

Imaginons je veux aller sur ce lien en cliquant sur la seconde image : https://www.facebook.com/

Imaginons je veux aller sur ce lien en cliquant sur la troisième image : https://www.youtube.com/

Je dois les placer dans le fichier javascript avec cette forme là?

<a href="https://www.google.fr//">
        "http://nsa38.casimages.com/img/2016/11/24/161124095957799697.png",
        </a>

EDIT

Je pense qu'il faut le mettre dans la fonction setImage, mais je ne sais pas comment... :/

-
Edité par FloMahé 28 novembre 2016 à 9:27:03

-
Edité par crispfr 28 novembre 2016 à 11:12:10

Ok  j'ai essayé ça, ça marche parfaitement

C'est sûr que ça serait mieux que les images soient dans le html, mais je suis bien trop débutant pour m'en sortir... :/

En tout cas merci beaucoup =)

J'ai repris le code, et cette fois les images et les liens sont dans le html directement. Il y a possibilité de faire sans javascript mais ça impliquerait de modifier le css à chaque fois que tu ajoutes/retires une image.

http://codepen.io/anon/pen/rWzXEQ