11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onglet rétractable sur une image

Hello!

Après de nombreuses recherches et essais sans grand succès je me suis dit qu'il était temps de venir demander de l'aide!

Je souhaite mettre en place ce que j'appelle un "onglet rétractable" sur une image.
J'ai fait un montage vite faite histoire que ce soit plus clair

Onglet fermé
http://img11.hostingpics.net/pics/968678exemple.jpg
Onglet ouvert

http://img11.hostingpics.net/pics/713913exemple2.jpg


Superposer le texte sur l'image j'ai réussi mais je bloque au niveau de l'animation. Je ne sais pas comment m'y prendre...si une âme charitable peut m'aiguiller et m'indiquer la marche à suivre/quelles fonctions utiliser ça serait cool ! Smiley smile
Modifié par A-M (17 May 2013 - 17:57)
Si tu arrive déjà à superposer le texte sur l'image au hover (déplacer la div qui contient le texte vers la droite), il ne te reste plus qu'à ajouter une animation css:
#element-dont-les-proprietes-changent {
-webkit-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
}
Merci !! J'ai presque résolu mon problème par contre j'ai oublié de le préciser dans mon premier post mais je voudrais que l'onglet s'ouvre non pas au survol de l'image mais lorsqu'on clique dessus. Il me semble que ce n'est pas gérable en CSS et qu'il faut passer par du Javascript, correct ?
hello,
simple précision, les préfixes utilisés en ce qui concerne les transitions pour IE ne servent à rien, vu qu'elles ne sont implémentées qu'à partir de IE10 et le sont sans préfixes.
Par contre il ne faudrait pas négliger FF, Chrome, Safari Opéra.

-moz-transition:.5s ease;
-webkit-transition:.5s ease;
-o-transition:.5s ease;
transition:.5s ease;

Pour ta seconde question, tu peux passer simplement par :focus en ajoutant l'attribut tabindex à l'élément qui sera cliqué. Seul hic (ou pas) c'est que IE7 ne le prend pas en compte:

<div tabindex=1>
	<span></span>
</div>



div {width:200px;height:200px;border:1px solid;}
span {display:block;width:0;height:100%;background:#f00;}
div:focus span {width:70px;}

Voilà simplement pour expliquer le principe.
Justement Zelalsan, il me semblait avoir lu que les préfixes pour Opera et Firefox n'étaient plus d'actualités, pour ie je ne savais pas mais tu as sans doute raison.

Après, A-M, tu peut utiliser la technique de Zelalsan, ou comme tu l'as suggérer, utiliser javascript:
document.getElementById('id_de_mon_element').onclick=function() {
   if(document.getElementById('id_de_mon_element').className=='ouvert')
      document.getElementById('id_de_mon_element').className='';
   else
       document.getElementById('id_de_mon_element').className='ouvert';
}

Avec la classe "ouvert" qui défini les propriétés de ton onglet lorsqu'il est ouvert.
Modifié par juliendargelos (21 May 2013 - 10:09)
@juliendargelos > Oui en effet plusieurs propriétés sont maintenant supportées par tous les navigateurs et plus besoin de préfixes pour qu'ils les reconnaissent, cela dit, ces préfixes sont plus destinés aux anciennes versions qui existent toujours et qui sont encore utilisées. C'est pour cela par exemple qu'on utilisera encore -moz-box-shadow et -webkit-box-shadow alors qu'elles sont reconnues depuis bien longtemps déjà.
Pour tous les doutes que tu pourrais avoir, il existe un très bon site qui regroupe tout ça :
http://caniuse.com/
Modifié par Zelalsan (21 May 2013 - 17:55)
Sujet clos
Aller à