Sujet Précédent Sujet Suivant

Défilement d'images

Résolu/Fermé
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 - Modifié par The Dead T le 14/10/2011 à 19:53
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 - 17 janv. 2012 à 00:32
Bonjour,
Je suis en train de me créer un site internet et je suis à la recherche de comment faire pour créer une zone (avec une couleur de fond légèrement transparente) sur une image où, par exemple, l'on peut cliquer dessus pour faire défiler l'image. Je souhaiterai, si possible, ne pas avoir recours au javascript, jQuery, etc... mais simplement faire avec du CSS (je pense que cela soit possible avec la propriété "transition" et quelques autres).
Comme par exemple sur le site http://www.wat.tv (juste sous la barre de menu) ou sur le site de Xbox live href= http://www.xbox.com/fr-FR/' target='_blank' rel='nofollow'>http://https://www.xbox.com/fr-FR/</a> (juste sous la barre de menu également).

Est-ce que quelqu'un voit comment peut-on créer ça?

Merci d'avance pour vos réponses!


4 réponses

Réponse 1 / 4
Mani
14 oct. 2011 à 19:55
Hello,

L'animation est possible en CSS3, mais la gestion des events n'est possible qu'en Javascript (en l'occurence le onclick).
0
Réponse 2 / 4
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
14 oct. 2011 à 20:00
Je vois, merci à toi pour ta réponse si rapide! J'utiliserai donc du javascript pour la gestion des events ;)
Mais sais-tu comment faire en sorte qu'une zone soit placée sur le bas d'une image comme sur les deux sites que j'ai donné en exemple?
Parce que j'ai essayé pas mal de chose et, a part en positionnement absolu, je ne parvient pas à placer une bande sur le bas de mon image...
0
Réponse 3 / 4
Mani
Modifié par Mani le 15/10/2011 à 10:11
Re !

Voici un ptit bout de code (fortement améliorable) pour te guider un peu vers ce que tu veux faire: 

<html> 
<head> 
 <title> 
  CSS3 & JS Slider 
 </title> 
 <style type="text/css"> 
  body{ 
   background-color:#202020; 
   text-align:center; 
   -webkit-transition: all 1s ease-in-out; 
   -moz-transition: all 1s ease-in-out; 
   -o-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   transition: all 1s ease-in-out; 
  } 
  #slider{ 
   background-color:#999; 
   width:500px; 
   height:350px; 
   margin:50px auto; 
   position:relative; 
   overflow:hidden; 
   border:#555 solid 1px; 
  } 
  nav{ 
   display:block; 
   position:absolute; 
   bottom:0; left:0; 
   background-color:#888; 
   width:480px; 
   opacity:.8; 
   padding:10px; 
  } 
  nav #leftArrow{float:left;} 
  nav #rightArrow{float:right;} 
  nav .arrow{font-size:20pt; padding:0 10px; background-color:#ccc; border-radius:100px;} 
  nav .arrow:hover{background-color:orange;} 

  #gallery{ 
   -webkit-transition: all 1s ease-in-out; 
   -moz-transition: all 1s ease-in-out; 
   -o-transition: all 1s ease-in-out; 
   -ms-transition: all 1s ease-in-out; 
   transition: all 1s ease-in-out; 
   overflow:hidden; 
  } 
  #gallery img{float:left;} 
 </style> 
 <script type="text/javascript"> 
  function setCurrent(value){ 
   var margin = parseInt(document.getElementById('gallery').style.marginLeft); 
   var nbImg = document.getElementById('gallery').getElementsByTagName('img'); 
   var newMargin = margin + value; 
   var galleryWidth = 500; 
   //@TODO mettre en onload pour éviter la réinterpretation à chaque appel de la fonction 
   document.getElementById('gallery').style.width = nbImg.length * galleryWidth + 'px'; 
   if(newMargin >0){ 
    return false; 
   } 
   if(newMargin < (nbImg.length - 1) * -(galleryWidth)){ 
    return false; 
   } 

   document.getElementById('gallery').style.marginLeft = newMargin; 
  } 
  document.onload=function(){alert('okok');} 
 </script> 
</head> 
<body> 
 <div id="slider"> 
  <div id="gallery" style="margin-left:0; width:500px"> 
   <img src="http://images.ados.fr/bd-manga/photo/hd/7725296772/kiss-manga/image-kiss-manga-11886127f4.jpg"/> 
   <img src="http://image-gratuit.com/_images-gratuites/image-gratuit-images-gothiques-p.jpg"/> 
   <img src="http://mainecoon33.free.fr/images-droles-d-animaux/img/images/images-droles-d-animaux%20(49).jpg"/> 
   <img src="http://images.ados.fr/bd-manga/photo/hd/7725296772/kiss-manga/image-kiss-manga-11886127f4.jpg"/> 
   <img src="http://image-gratuit.com/_images-gratuites/image-gratuit-images-gothiques-p.jpg"/> 
   <img src="http://mainecoon33.free.fr/images-droles-d-animaux/img/images/images-droles-d-animaux%20(49).jpg"/> 
  </div> 
  <nav> 
   <div class="arrow" id="leftArrow" onclick="setCurrent(-500);"><</div> 
   <div class="arrow" id="rightArrow" onclick="setCurrent(500);">></div> 
  </nav> 
 </div> 
</body> 
</html>


Ps: le positionnement absolu sert justement à ça
++
0
Réponse 4 / 4
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
Modifié par The Dead T le 15/10/2011 à 10:25
Merci infiniment! Je vais regarder tout ça et le personnaliser un peu ;)
Je suis juste pas sur de bien comprendre comment le positionnement absolu fait que la bande se place a left:0 et bottom:0 de l'image et non pas de la page entière.

Merci encore à toi, bonne journée!

PS: Les hots dogs sont géniaux! :)
A+
0
Mani
Modifié par Mani le 15/10/2011 à 10:30
Le positionnement absolu (edit: comme tous les autres types de positionnements) prend comme référence le premier élément parent dans le DOM dont le type de position est défini. En l'occurence, mon div #slider est en position:relative, son enfant, #gallery, va donc se positionner en fonction de lui. Si tu enlève le position:relative de #slider, #gallery va se positionner en fonction du body.

J'espère avoir été compréhensible =)
0
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
15 oct. 2011 à 10:33
Ah c'est pour ca que lorsque j'essayais dans mon document cela me le plaçait par rapport a la fenêtre! (c'est ça d'être autodidacte et de louper quelques chapitres de théorie =P)

Oui tu as été très compréhensible, merci beaucoup de ton aide!
0
Mani
15 oct. 2011 à 10:40
De rien, ca s'rait cool que tu postes le résultat une fois que tu auras terminé =)

bon dev' !
0
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
Modifié par The Dead T le 15/10/2011 à 10:49
Merci! Je t'enverrai le lien avec plaisir! :D
(mais je pense pas l'avoir terminé d'aussi tôt =P)
0
The Dead T Messages postés 80 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 19 janvier 2012 17
17 janv. 2012 à 00:32
Tiens, je repassais par là et je viens de voir que tu m'avais demandé de poster le résultat une fois que j'avais terminé (je sais, ca fait un moment déjà... ^^).
Tu peux aller jeter un oeil ici : http://www.generic-provider.ch/index.php?page=home si ca t'intéresse! C'est pas tout a fait terminé et le site pour lequel j'ai fait ca est encore en construction.
Mais encore merci infiniment!
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Excel 365 + Windows 10 Arrêt défilement flèches
VALBRISE -
VALBRISE -

5 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
Où est la touche arrêt défil sur mon clavier ?
munette -
inconnusoldat -

48 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses