18056 sujets

Questions générales et questions de débutants

Comment ajouter un lien a chaque images dans un CAROUSEL

Bonjour
voila ...
est il possible d'ajouter un lien a chaque image dans un carrousel .
et comment le faire ?


et Merci ..

N.B Je suis NUL dans la matière.

le code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Image Gallery - Solo Developer</title>

    <link rel="stylesheet" href="style.css">

<style>
.image-container{
margin: 0 auto;
  position:relative;
  width:200px;
  height:200px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}
.image-container span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
}
.image-container span img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  border-radius: 5px;
}
.btn-container{
  position:relative;
  margin: 0 auto;
  width:80%;
}
.btn{
  position: absolute;
  bottom:-80px;
  background-color: orangered;
  color:white;
  padding:10px 20px;
  border-radius: 5px;
  border:none;
  cursor: pointer;
}
.btn:hover{
  filter:brightness(1.5);
}
#prev{
  left:20%;
}
#next{
  right:20%;
}

</style>

</head>
<body>
 
  <div class="image-container">
  <span style="--i: 1">
    <img src="https://i.servimg.com/u/f86/15/11/07/63/elzove10.jpg" title="image">
  </span>
  <span style="--i: 2">
    <img src="https://i.servimg.com/u/f86/15/11/07/63/retour10.jpg" title="image">
  </span>
  <span style="--i: 3">
    <img src="https://www.jqueryscript.net/dummy/3.jpg" title="image">
  </span>
  <span style="--i: 4">
<img src="https://i.servimg.com/u/f86/15/11/07/63/fille10.jpg" title="image">
  </span>
  <span style="--i: 5">
    <img src="https://www.jqueryscript.net/dummy/5.jpg" title="image">
  </span>
  <span style="--i: 6">
    <img src="https://www.jqueryscript.net/dummy/6.jpg" title="image">
  </span>
  <span style="--i: 7">
    <img src="https://www.jqueryscript.net/dummy/7.jpg" title="image">
  </span>
  <span style="--i: 8">
    <img src="https://www.jqueryscript.net/dummy/8.jpg" title="image">
  </span>
</div>
  <div class="btn-container">
  <button class="btn" id="prev">Précédent</button>
  <button class="btn" id="next">Suivant</button>
</div>
<script type="text/javascript" charset="utf-8">
  const imageCon = document.querySelector(".image-container");
const prevEl = document.getElementById("prev");
const nextEl = document.getElementById("next");
let x=0;
let timer=0;
prevEl.addEventListener("click",()=>{
  x=x+45;
  clearTimeout(timer);
  updateImage();
});
nextEl.addEventListener("click",()=>{
  x=x-45;
  clearTimeout(timer);
  updateImage();
});
function updateImage(){
  imageCon.style.transform=`perspective(1000px) rotateY(${x}deg)`;
  timer=setTimeout(()=>{
      x=x-45;
      updateImage();
  },2000);
}
updateImage();
</script>
</body>
</html>
Bonjour,
exactement comme l'autre jour sur le sujet "ajouter un lien sur un bouton". En entourant l'ensemble du code pour l'image avec un <a ....... et à la fin de l'image un </a> qui ferme.
En dehors du fait que je ne vois pas l'utilité de mettre un bouton sur les images d'un slider, vous allez devoir indiquer que les images sont un lien. Ça se fait en mettant un nom juste avant la fermeture </a>. Ce nom ne sera cependant pas sur l'image. Il faudra un peu travailler dessus. Sans indication de lien, il sera difficile pour le visiteur de savoir qu'il y en a un. Et il faudra aussi voir l'accessibilité d'un tel lien.
Je vous laisse chercher un peu en ne donnant pas de code, sinon vous n'allez jamais progresser sur un point élémentaire du html. Il y a des exemples partout. Comme le dit casper2, il faudra mettre une balise Alt sur les images, plus importante que la balise title. Pour le src, c'est fait, à ce que je vois. C'est un avis personnel, mais un carrousel qui ne s'arrête pas énerve vite un visiteur. Un bouton d'arrêt serait le bienvenu.
Smiley attention Travaux
Prévenir un modérateur
Répondre au sujet
Aller à