Vous êtes sur la page 1sur 48

ARCHI VES POUR LA CATGORI E TECHNI QUE WEB

Raliser une animation en CSS3


Publi le 15 mai 2013 par MULTI SM

Voici un tutoriel pour expliquer le principe danimation en css.
Celle-ci se dclare en deux tapes dont lordre na pas dimportance :
La premire consiste indiquer, au minimum, le nom que lon donne lanimation
(animation-name), sa dure (animation-duration) et le nombre de boucles
(animation-iteration-count) ;
pour la seconde, dclare laide dune rgle intitule de @keyframes laquelle
on accole le nom de lanimation, on notie les effets voulus aux moments voulus,
ces derniers tant indiqus en pourcentage du temps total dclar.
Lanimation se dclenche toujours au focus ou au survol de la souris, consiste faire
aller et venir la petite main devant le lien. Quant la modication de transparence du
background, elle va suivre le dplacement de limage.

Code HTML
<p id= effet >
<a href= #effet >Voici une animation de texte</a>
</p>
Imagination Trip
BTS B9 Multimdia
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
1 sur 48 24/03/14 10:03

Code CSS
/* premire tape */
p#effet a:hover, p#doigt a:focus {
background-color:#ff8c00; /* pour les vieux navigateurs */
color: black;
animation-name: effet; /* nom de lanimation */
animation-duration: 4s; /* temps de lanimation (4s) */
animation-iteration-count: innite; /* nombre de boucles (innie) */
animation-timing-function: linear; /* accelration de lanimation (constant) */
}
/* deuxime tape */
@keyframes effet {
0% {background:rgba(255,140,0,0.4) url(/images/monimage.png) no-repeat 5px 10px;}
50% {background:rgba(255,140,0,1) url(/images/monimage.png) no-repeat 50px 10px;}
100% {background:rgba(255,140,0,0.4) url(/images/monimage.png) no-repeat 5px
10px;}
}
La version raccourcie de la rgle pour animation est la suivante :
animation: effet 4s innite linear;
Mais l encore il faudra les prxes propritaires, ceux du @keyframes sinsrant entre le
@ et keyframe. Exemple : @-moz-keyframe.
Publi dans Technique Web | Laisser une rponse
Cours : corriger les erreurs de
ottements avec la proprit
clear
Publi le 24 janvier 2013 par MULTI SM
Comprendre le comportement de float implique une comprhension globale des
CSS, notamment celle du ux. Les CSS sont en effet conues pour afcher les
lments au sein dun ux : pour simplier, les lments en ligne, ou inline, sont afchs
les uns la suite des autres, tandis que les lments conteneurs, ou block, amnent un
retour la ligne aprs leur afchage.
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
2 sur 48 24/03/14 10:03
Le texte et les balises de prsentations (b, i, span, ) sont des lments inline, les
images et balises de regroupement (p, div, form, ) sont des lments block. Le ux
fait en sorte que ces lments safchent naturellement, les uns la suite des autres, en
respectant les spcicits de chaque type.

float permet de sortir un lment du ux, en cela que lon peut prciser si llment
cibl, par exemple une image ou une colonne de contenu, safche gauche ou
droite. Et cest ici que les pbs commencent : les webdesigners voient souvent
uniquement cette caractristique de oat, savoir lafchage de llment gauche ou
droite. Ce faisant, ils oublient une autre caractristique, implicite mais peut-tre plus
importante encore : le reste du ux, lui, sera dcal droite de llment ottant, et
poursuivra en dessous selon sa longueur.
De fait, si lon peut facilement dduire le comportement de llment ottant, celui du
reste du ux devra tre devin par le designer, qui devra prvoir lcoulement des
lments inline et block bien lavance. Cest pourquoi il est ncessaire de prciser la
taille dun lment ottant, ainsi que de prvoir la place prise par le reste du ux.
Du code XHTML avec les bordures styles
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
3 sur 48 24/03/14 10:03





Le comportement inattendu du reste du ux se retrouve souvent sous la forme dautres
lments ottants qui noccupent pas la place voulue. Cest ici que la
proprit clear entre en jeu. Celle-ci contrle le comportement des lments qui
suivent, dans le ux, un lment ottant. Par dfaut, llment standard suivant un
lment ottant safchera dans lespace laiss par la largeur du ottant. Ce
comportement ntant pas forcment voulu, clear a t conue pour prciser que cet
lment ne sera pas inuenc par le comportement dun ottant. Cette prcision peut
se faire sur chaque ct ou sur les deux la fois. clear permet de librer llment de
linuence du ottant. Tout le contenu situ entre le ottant et le libr restera sous
linuence du ottant.
Le mme code, avec la proprit oat:left
applique au tout premier bloc de texte

Une ligne de texte a maintenant le proprit oat:right.


Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
4 sur 48 24/03/14 10:03


Voici le code CSS :
span {
border: red 2px solid;
}
div {
border: blue 2px solid;
}
.left {
border: green 5px solid;
float:left;
height: 100px;
width: 100px;
}
.right {
border: green 5px solid;
float:left;
height: 100px;
Mme code, cette fois avec la proprit clear:both
applique au dernier bloc de texte

Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...


5 sur 48 24/03/14 10:03
width: 100px;
}
.clear {
clear: both;
}
Voici le code HTML:
<div class="left">Bloc de texte avec un float:left</div>
<span>Ligne de texte</span>
<div>Bloc de texte dans un DIV</div>
<span>Ligne de texte</span>
<div>Bloc de texte dans un DIV</div>
<span>Ligne de texte</span>
<div>Bloc de texte dans un DIV</div>
<span>Ligne de texte</span>
<div class="clear">Bloc de texte avec un clear:both</div>
<span>Ligne de texte</span>
Publi dans Technique Web | Laisser une rponse
TP : Les textes en multiples
colonnes
Publi le 22 janvier 2013 par MULTI SM
Les CSS3 prsentent un nouveau module mal connu en tant que mise en page en
multi-colonnes. Il permet de spcier en combien de colonnes le texte doit tre divis et
comment celles-ci doivent apparatre.
Actuellement, cette proprit est disponible sur Firefox et Safari 3 et Chrome. Quand le
module sera nalis dans les spcications du CSS3, il sera adopt par dautres
navigateurs et inclus dans leurs mises jour.
Il y a quatre proprits qui se rapportent la mise en page de multiples colonnes en
CSS3, permettant de dnir le nombre de colonnes, la largeur, lespace entre chaque
colonne et une bordure entre chacune delles :
column-count
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
6 sur 48 24/03/14 10:03
column-width
column-gap
column-rule

Le module CSS multi-colums permet de diviser un long ux de texte en plusieurs
colonnes de manire automatique. Et donc nous navons pas besoin, par exemple,
pour 3 colonnes de crer 3 conteneurs.
Ainsi de larges blocs de texte peuvent tre diviss facilement en sous-colonnes pour
offrir une meilleure lecture et amliorer lesthtisme dun site. Cest un avantage aussi
dun point de vue smantique, car on se passe de balises supplmentaires ncessaires
pour avoir le mme rendu sans CSS3.
Dun autre ct la lisibilit dun site peut tre compltement ruine avec une mauvaise
utilisation de ce module. Un site web ntant pas forcment statique comme le serait la
page dun magazine.

UTI LI SATI ON
Il y a deux faons de crer des colonnes, on peut dune part spcier un nombre xe de
colonnes laide de la proprit column-count ou alors spcier la largeur des colonnes
laide de column-width (pixels ou ems, mais pas de pourcentage). Les deux
proprits peuvent tre cumules, mais le navigateur choisira lune ou lautre suivant les
cas. Il existe bien sur dautre proprits :
column-gap pour grer lespacement entres les colonnes
column-rule, column-rule-width, column-rule-style, column-rule-color pour grer
lapparence de la sparation des colonnes
break-before, break-after, break-inside permet par exemple de forcer le passage
dun lment sur la colonne suivante. Plus dinfos sur le site du w3c.
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
7 sur 48 24/03/14 10:03

CODE
.deuxcolonnes {
column-count: 2;
column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
-o-column-count: 2;
-o-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}

Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
8 sur 48 24/03/14 10:03
CODE
.troiscolonnes {
column-count: 3;
column-gap: 10px;
column-rule-color: #ccc;
column-rule-style: dotted;
column-rule-width: 2px;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 2px;
-o-column-count: 3;
-o-column-gap: 10px;
-o-column-rule-color: #ccc;
-o-column-rule-style: dotted;
-o-column-rule-width: 2px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 2px;
}

Tlcharger le chier source
Autre exemple :
Actuellement, un prxe propre au navigateur est galement ncessaire pour dnir
comment Safari et Firefox doivent afcher la proprit. Le code employer pour crer
une mise en page de deux colonnes espaces de 1px serait :
.multiplecolumns
{
-moz-column-width: 130px;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
9 sur 48 24/03/14 10:03
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Dans certain cas, vous voudriez peut-tre quun lment enjambe plus dune colonne
(un titre, une table ou une image par exemple). Ceci est facilit par lutilisation de :
h2
{
column-span: all
}

Vous pouvez galement utiliser des chiffres pour permettre llment denjamber un
certain nombre de colonnes. Actuellement cette proprit nest utilise sur aucun
navigateur connu, mais devrait fournir une exibilit apprciable pendant la conception
dun site. Il permettra de raliser des effets comme :
>>> Plus dinfos :
http://www.w3.org/TR/css3-multicol/


>>> Retrouver des exemples cette adresse :
http://www.csscripting.com/css-multi-column

Publi dans Technique Web | Laisser une rponse
TP : faire un menu droulant en
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
10 sur 48 24/03/14 10:03
css
Publi le 22 janvier 2013 par MULTI SM
Attributs utiliss :
background-color
color
display
oat
height
list-style-type
padding
position
margin
text-align, text-decoration
width

CODE HTML
<div id="menu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

CODE CSS
Dans un premier temps, on transforme donc cette liste puces verticale en une
liste horizontale.

Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
11 sur 48 24/03/14 10:03
CODE ( X) HTML
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item plus long</a></li>
</ul>
Ce code html va donc tre stylis an dobtenir un menu horizontal, soit sous
forme de boutons simples sans images, soit avec des images de fond qui
changeront au survol de la souris par effet rollover.

Mise en forme de boutons CSS simples
Le principe est donc de transformer cette liste puces verticale en liste (sans
puces) horizontale. Pour commencer, on va donc dclarer la liste (ul ; list-style-
type:none) sans puces et mettre mes marges extrieures (margin) et intrieures
(padding) zro.
Chaque item (li) devra nanmoins tre lgrement cart de son voisin, on va
donc dclarer une marge droite 2 pixels (margin-left:2px).
Vient ensuite le comportement des liens de cette liste (ul li a).
Le display:block va permettre de donner une largeur xe et identique chaque
item, et pour ne pas quils sempilent les uns sur les autres, on dclare les
diffrents lment ottants gauche oat:left ce qui va permettre aux items
suivants daller se mettre droite.
Reste dclarer laspect du bouton : sa taille (width) ; sa couleur de fond
(background-color) ; la couleur du texte, son aspect, et son positionnement
dans le bouton (color ; text-decoration ; text-align ; padding) ; laspect des
bordures (border-width ;border-style ; border-color).
Et pour gnoler le tout, on dnit laspect que prendra ce mme bouton lors du
survol de la souris (ul li a:hover).

CODE CSS

Ici chaque item occupera une largeur de 100 pixels, aura un fond noir, et lcriture
blanche deviendra jaune au survol de la souris.
#menu ul {
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
12 sur 48 24/03/14 10:03
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
A ce stade, le rsultat est le suivant :
Pour faire disparatre les sous-items, on rajoute un display:none la sous-liste (on lit en
remontant : le ul inclus dans le li du ul du cadre id= menu ) :
#menu ul li ul {
display:none;
}
Les sous-items ont disparus !
Il faut maintenant raliser deux choses :
Remettre en vertical le sous menu (car pour linstant, il est toujours horizontal, vu
quil a hrit des proprits de la liste principale)
Faire en sorte quau survol de litem 2, les sous-items se droulent.
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
13 sur 48 24/03/14 10:03
Pour le comportement au survol, on utilise la pseudo-classe :hover sur le li de la liste
principale, auquel on va attribuer un display:block qui va contrarier le display:none
prcdemment dclar.
Et pour perdre la disposition en ligne qui tait due au oat:left, on va tout
simplement dclarer un oat:none
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
BUG : en se droulant, la sous liste occupe son espace, tout ce qui est en dessous se
trouve donc dcal vers le bas.
Pour viter ce dsagrment, il faut attribuer une position:absolute la sous liste. Elle
viendra se superposer aux lments situs en dessous, et non plus les faire sauter .
#menu li ul {
position:absolute;
}

Tlcharger le code source
Publi dans Technique Web | Laisser une rponse
TP : Insrer un plan Google
Maps sur votre page web
Publi le 22 janvier 2013 par MULTI SM
Tout dabord, Google Maps est une plate-forme, dveloppe par le gant amricain
Google, qui gnre une carte mondiale. Vous pouvez rechercher un lieu dans le monde
entier ou encore tracer des trajets entre deux lieux. Mais il ne sarrte pas l, en
proposant des vues diffrentes comme :
la vue plan ;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
14 sur 48 24/03/14 10:03
la vue satellite ;
la vue relief.
Les cartes de Google Maps peuvent vous tre dune grande utilit pour rendre
dynamique votre site et gadgeter un peu votre page web !
Mthode
1 Rendez-vous sur le site Google Map : http://maps.google.fr.
2 Dans le champ de recherche, saisissez ladresse postale pour laquelle vous
souhaitez raliser un plan. Par exemple, pour afcher lemplacement de lOpra Garnier,
on tape son adresse : 8 rue Scribe 75009 Paris .
3 Si ladresse est correcte, Google afche directement la carte du lieu et indique
lemplacement prcis de ladresse avec une tiquette : .
4 Cliquez sur Lien dans le menu du haut de la carte
5 Une boite de dialogue apparait. Elle vous permet de copier le code HTML destin
afcher la carte dans un email ou une page Web. On peut copier immdiatement le
code destin la page Web ou cliquer sur Personnaliser et prvisualiser la carte .
Choisissez cette seconde option pour pouvoir explorer la personnalisation.
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
15 sur 48 24/03/14 10:03
6 Une fentre safche qui permet de :Choisir les dimensions de la carte
Avoir un aperu dynamique de la carte telle quelle sera afche :
De copier le code HTML insrer dans la page Web :
7 Lorsque la carte correspond vos attentes, copiez le code HTML et collez-le dans
votre page Web.
Publi dans Technique Web | Laisser une rponse
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
16 sur 48 24/03/14 10:03
Devoir Not : Site portfolio
Publi le 9 janvier 2013 par MULTI SM
Travail rendre :
Faire un site portfolio sur votre travail
- Une page daccueil (slideshow)
- Une page bio (visuel + texte)
- Une page ralisation avec des liens vers les galeries de vos travaux
- Une page cv & prol
- Une page contact (adresse/lien fb/ twitter)
Etape 1 :
Suivre le document ci-dessous pour respecter les balises et la construction du site.
Valider votre code html avant de commencer la mise en page des css.
Validateur html : http://validator.w3.org/
Tlcharger les mockups

Recommendations :
- gabarit impos (suivre la construction du pdf)
- images en 72 dpi, RVB
- chiers bien nomms comme sur lintitul : index.html, propos.html, portfolio.html,
cv.html, contact.html
- donner un nom la page html avec la balise title

Etape 2 :
Construire le css
Publi dans Technique Web | Laisser une rponse
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
17 sur 48 24/03/14 10:03
TP : Faire une box avec des
onglets dynamiques
Publi le 12 dcembre 2012 par MULTI SM
1- CRER LES FI CHI ERS DE BASE
- Crer un dossier : box
- Crer un dossier : css
- Crer le chier html : index.html
- Crer le le chier css : styles.css
2- STRUCTURER L I NFO
Crer les div
div id="menuDynamique
div id= "menu1!
div id= "menu2!
div id= "menu3!
3 AJOUTER LES TI TRES DE NI VEAU 1 DANS CHAQUE DI V MENU
<div id= menuDynamique >
<div id= menu1!>
<h1>Menu 1</h1>
</div>
<div id= menu2!>
<h1>Menu 1</h1>
</div>
<div id= menu3!>
<h1>Menu 1</h1>
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
18 sur 48 24/03/14 10:03
</div>
</div>
4 CRER LE MENU ET AJOUTER LES LI ENS
Exemple :
<div id= menuDynamique >
<div id= menu1!>
<h1>Menu 1</h1>
<ul>
<li><a href= # >Element 1</a></li>
<li><a href= # >Element 2</a></li>
<li><a href= # >Element 3</a></li>
<li><a href= # >Element 4</a></li>
</ul>
</div>
5 VRI FI ER VOTRE MENU, PLACER LA FEUI LLE DE STYLE
<link href= css/styles.css rel= stylesheet type= text/css />
Crer les classes
>>> Dnir la balise body pour le texte en gnral
Exemple :
font-family: Palatino Linotype , Book Antiqua , Palatino, serif;
font-size:12px;
color:#000;
background-color:#9CF;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
19 sur 48 24/03/14 10:03
>>> Crer lidentiant menuDynamique pour la box (#menuDynamique )
Positionnement relatif : En position relative, un lment peut tre dcal verticalement
et/ou horizontalement.
position:relative;
taille en largeur
width:320px;
>>> Crer la classe pour les titres (menuDynamique h1 )
Hauteur delement
height:30px;
Hauteur de ligne
line-height:30px;
Marge
padding:0;
Marge
margin:0;
taille de la police
font-size:14px;
Alignement du texte
text-align:center;
>>> Crer la classe pour lencadre des listes (.listeMenu )
.listeMenu {
padding:20px;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
20 sur 48 24/03/14 10:03
margin:0;
width:240px;
background:#fff;
}
>>> Crer la classe pour les listes (.listeMenu li )
Pas de puce
list-style:none;
>>> Crer la classe pour les liens de listes
(.listeMenu li a )
Couleur du texte
color:#000;
Hauteur delement
height:20px;
Hauteur de ligne
line-height:20px;
Pas de dcoration
text-decoration:none;
>>> Crer la classe pour les liens de listes au survol
(.listeMenu li a:hover )
texte soulign
text-decoration:underline;
>>> Crer la classe pour les ordres des listes
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
21 sur 48 24/03/14 10:03
(#menu1 .listeMenu, #menu2 .listeMenu, #menu3 .listeMenu )
On va placer les lments les uns sur les autres en mettant le lments de (listeMenu)
en positionnement absolu
Ordre dafchage
z-index:3;
La proprit CSS z-index permet de spcier le niveau dempilement de chaque menu :
avec un z-index suprieur celui du menu 1et un arrire-plan opaque, le menu en
position absolue masquera temporairement.
Position absolu
position:absolute;
Postion gauche
left:0;
Position en haut
top:40px;
Couleur de fond
background:#fff;
>>> Crer la classe pour les effets donglet dynamique
(#menu1 .listeMenu, #menu2 .listeMenu, #menu3 .listeMenu )
Ordre dafchage se superpose. z-index est un nombre soit positif soit ngatif. Plus il
est lev, plus il est en avant.
un z-index:1 sera toujours place devant un z-index:0.
On dnit donc lordre dafchage
#menu2 .listeMenu {
z-index:2;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
22 sur 48 24/03/14 10:03
}
#menu3 .listeMenu {
z-index:1;
}
>>> Crer la classe pour les onglets n*1
(#menu1 h1 )
ordre dafchage
z-index:3;
taille
width:80px;
Position
position:absolute;
placement
left:0;
placement
top:0;
fond
background:#fff;
>>> Crer la classe pour les onglets n*1
(#menu1 h1 )
ordre dafchage
z-index:3;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
23 sur 48 24/03/14 10:03
taille
width:80px;
Position
position:absolute;
placement
left:0;
placement
top:0;
fond
background:#fff;
>>> Crer la classe pour les onglets 2 et 3
( #menu2 h1 et #menu3 h1 )
#menu2 h1 {
width:80px;
position:absolute;
Placement 80 px
left:80px;
top:0;
}
#menu3 h1 {
width:80px;
position:absolute;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
24 sur 48 24/03/14 10:03
Placement 160 px
left:160px;
top:0;
}
>>> Crer la classe pour la dynamique lors du passage de la souris pour le menu 1
(#menu1:hover h1, #menu1:focus h1, #menu1:active h1)
Lui donner un ordre 4 pour le placer par dessus les autres
z-index:4;
background:#fff;
>>> Crer la classe pour afcher la liste de longlet actif
(#menu1:hover .listeMenu, #menu1:focus .listeMenu, #menu1:active .listeMenu)
placer la liste sur le meme calque que longlet H1 (z-index:4)et faire ede meme avec les
deux autres
z-index:4;
EXEMPLE :
#menuDynamique:hover h1, #menuDynamique:focus h1, #menuDynamique:active h1 {
background:none;
}
#menu1:hover h1, #menu1:focus h1, #menu1:active h1 {
z-index:4;
background:#fff;
}
#menu1:hover .listeMenu, #menu1:focus .listeMenu, #menu1:active .listeMenu {
z-index:4;
}
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
25 sur 48 24/03/14 10:03
#menu2:hover h1, #menu2:focus h1, #menu2:active h1 {
z-index:4;
background:#fff;
}
#menu2:hover .listeMenu, #menu2:focus .listeMenu, #menu2:active .listeMenu {
z-index:4;
}
#menu3:hover h1, #menu3:focus h1, #menu3:active h1 {
z-index:4;
background:#fff;
}
#menu3:hover .listeMenu, #menu3:focus .listeMenu, #menu3:active .listeMenu {
z-index:4;
}

>>> Corriger un bug dafchage
#menuDynamique:hover h1, #menuDynamique:focus h1, #menuDynamique:active h1 {
background:none;
}
7 VALI DER VOTRE CSS
http://jigsaw.w3.org/css-validator/validator
8 VALI DER LE HTML
http://validator.w3.org/
Telecharger la source : 3-Box
Publi dans Technique Web | Laisser une rponse
TP : Crer des boutons en css3
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
26 sur 48 24/03/14 10:03
Publi le 12 dcembre 2012 par MULTI SM
Nous allons utiliser diffrentes techniques CSS qui vont nous permettre de raliser un
bouton, sans utilisation dimages.
Tout dabord, commenons par le code HTML ncessaire.
Dans cet exemple, un simple paragraphe suft :
<p class= "boutonGris">Mon bouton</p>
Appliquons-lui quelques styles par dfaut : une taille, une police, une couleur, un
alignement.
.boutonGris {
font-family:Arial,sans-serif;
font-size:1.6em;
width:200px;
height:43px;
padding-top:7px; /*permet le centrage vertical*/
text-align:center;
color:#000;
background:#444;
}
Un dgrad grce aux css :
.boutonGris {

background:#444;
background:-moz-linear-gradient(top,#555,#2C2C2C);
background:-webkit-gradient(linear, left top, left bottom, from(#555), to(
}
Ici nous appliquons donc un dgrad partant du haut vers le bas, avec un gris #555 en
haut et un gris #2C2C2C en bas.
Il faut la valeur background:#444 pour les navigateurs ne grant pas encore les css3 et
le degrad.
Des coins arrondis en css :
Pour cela, il faut ajouter la rgle border-radius, avec quelques petits amnagement pour
navigateurs :
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
27 sur 48 24/03/14 10:03
.boutonGris {

-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
Du volume en css3 :
Pour ajouter un peu de volume et de ralisme, nous allons ajouter plusieurs ombres.
Tout dabord, une ombre sur le texte lui mme avec text-shadow, puis deux ombres
diffrentes sur la boite avec box-shadow.
Lombre du texte tout dabord. Notre ombre sera blanche et dcale de 1px vers la bas,
sans aucun ou. Cela a pour incidence un texte incrust.
.boutonGris{

text-shadow:0px 1px 0px white;
}
Cependant, leffet tant fort avec du blanc, utilisons plutt la fonction rgba qui a un
rendu plus n.
Notre code CSS sera :
.boutonGris {

text-shadow:0px 1px 0px rgba(255,255,255,0.2);
}
Cela nous permet donc dutiliser un blanc transparent pour un effet beaucoup plus rel.
Aprs lombre sur le texte, ajoutons les ombres sur la boite avec box-shadow.
Pour ce bouton, nous avons besoin de 2 ombres :
La premire derrire le bouton avec un ou de 5px, de couleur noire avec une
transparence de 50%.
La deuxime pour crer le haut du bouton est une ombre blanche avec une
transparence de 40%.
.boutonGris {

-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
28 sur 48 24/03/14 10:03
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
box-shadow:0 0 5px rgba(0,0,0,0.5),
0 -1px 0 rgba(255,255,255,0.4);
}
Avec cette criture, nous ciblons tous les navigateurs rcents.
Ltat initial de votre bouton est termin.
Ajoutons prsent ce bouton diffrents tats.
Un peu dinteraction grce hover et active
Nous allons ajouter deux tats diffrents :
hover : nous allons claircir le dgrad.
active : nous allons simul ltat enfonc du bouton.
Tout dabord, gestion du hover, donc savoir, lorsque lutilisateur passe sa souris sur le
bouton.
Voici le code :
.boutonGris :hover{
color:#222;
background:#555;
background:-moz-linear-gradient( top, #777, #333);
background:-webkit-gradient( linear, left top, left bottom, from(#777), to(#33
}
Ensuite, pour leffet active, savoir donc lorsque llment est cliqu, nous allons crer
un effet de bouton enfonc.
Pour cela, nous appliquons le mme dgrad qu ltat initial mais nous modions les
ombres de la boite pour les appliquer lintrieur, avec le mot-cl inset.
.boutonGris :active{
color:#000;
background:#444;
background:-moz-linear-gradient( top, #555, #2C2C2C);
background:-webkit-gradient( linear, left top, left bottom, from(#555), to
-webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4)
-moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4)
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
29 sur 48 24/03/14 10:03
box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4)
}
Il y a galement une deuxime ombre qui se trouve vers le bas du bouton. Celle-ci est
blanche avec une transparence de 40%.

Tlcharger les sources
Publi dans Technique Web | Laisser une rponse
Cours : Le Reset dEric Meyer
Publi le 12 dcembre 2012 par MULTI SM
La technique du reset
Le reset CSS est une technique qui consiste rinitialiser 0 la valeur de certains
lments HTML an dviter une partie des diffrences dafchage sur les divers
navigateurs.
Les navigateurs nutilisent pas toujours les mmes marges et padding par dfaut pour
les diffrents lments HTML. Cela peut reprsenter un problme, par exemple
lorsquon veut supprimer le retrait gauche dune liste avec un margin-left: 0; et que
certains navigateurs conservent ce retrait car ils utilisent un padding plutt quune
marge. Ajoutez quelques diffrences de ce type entre les styles par dfaut des
navigateurs, et la solution qui semble simposer est la suivante: supprimer toutes les
marges et retraits internes des lments.
Il est donc conseill dutiliser un Reset CSS plus prcis, qui vise plus prcisment les
diffrents lments HTML et leur applique les styles ncessaires. On peut citer le reset
CSS de Reference : Eric Meyer
Eric Meyer est connu en tant de gourou du css , il a co-ecrit des livres sur le sujet ou
son blog :
http://meyerweb.com/.
Code CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
30 sur 48 24/03/14 10:03
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
31 sur 48 24/03/14 10:03
Publi dans Technique Web | Laisser une rponse
TP : crer un slideshow simple
avec Jquery
Publi le 12 dcembre 2012 par MULTI SM
Prsentation Jquery
jQuery est une petite bibliothque JavaScript facilitant lcriture de scripts.
Ses principaux avantages sont:
la compatibilit avec tous les navigateurs: pas besoin de surcharger votre code
de tests pour ladapter au navigateur, jQuery soccupe de tout;
jQuery est compacte (pas plus de 15ko, a ne surcharge pas vos pages)
et rapide (son crateur, John Resig est le spcialiste dieu du JavaScript. Cest un
des principaux dveloppeurs du moteur JavaScript de Firefox);
sa syntaxe est lgante, puissante, et sapprend trs rapidement;
jQuery est extensible: des centaines de plugins existent, en particuliers de trs
nombreux effets graphiques;
JQuery est devenu rapidement un framework de dveloppement javascript
indispensable, trs pratique que ce soit pour dvelopper de simples fonctionnalits ou
des sites complets.
Souvent, lors de la cration dun site internet, on rencontre les mmes fonctionnalits
de base (des rollover sur les images, un menu droulant, un diaporama ), et pour
chacun dentre eux, il existe quasiment un plugin JQuery qui rpond ces attentes.
Il peut tre galement utile de dvelopper un plugin pour une fonctionnalit simple
mais laquelle on se trouve souvent confront et dont on veut matriser le
fonctionnement. Cela demande une certaine dextrit au niveau du code.

Etape 1 : la partie HTML
Nous allons crer un dossier Diaporama, avec un sous-dossier images (et un dossier
galerie linterieur), un sous dossier js et notre chier index.html
Avant tout, il convient dinclure la librairie JQuery dans notre page html. Vous pouvez la
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
32 sur 48 24/03/14 10:03
trouver ici : Librairie JQuery.
Nous allons tlcharger la dernire version de js : jquery-1.3.2.min, le chier de plugin
diaporama : jquery.jDiaporama.js et le script : script.js
Tlcharger les chiers Jquery ici
Nous allons appeler la bibliothque Jquery dans la page HTML en placant les liens vers
les chiers js dans la balise head
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
Ensuite nous plaons les liens vers la feuille de style dans la balise head
<!-- Cascading Style Sheets -->
<link href="style.css" rel="stylesheet" type="text/css" />
Cela nous donne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un Slideshow Simple avec JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- Casca
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- Javascript -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jDiaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>

Ensuite, nous allons crire notre page HTML avec la liste de photos.
Pour cela, nous allons crer des images de mme taille : 512!288 px en 72dpi, toutes
ces images seront places dans le dossier images/galerie/.
Pour crer notre liste, nous allons placer la balise ul et les elements de liste li. Dans
chaque elements, nous plaons le lien vers limage dsire ainsi que son nom (alt) et sa
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
33 sur 48 24/03/14 10:03
description (title).
<ul class="diaporama1">
<li><img src="images/galerie/image1.jpg" alt="Typo 1" title="Description 1" />
<li><img src="images/galerie/image2.jpg" alt="Typo 2" title="Description 2" />
<li><img src="images/galerie/image3.jpg" alt="Typo 3" title="Description 3" />
<li><img src="images/galerie/image4.jpg" alt="Typo 4" title="Description 4" />
<li><img src="images/galerie/image5.jpg" alt="Typo 5" title="Description 5" />
</ul>
Etape 2 : la partie Images
Pour cela, nous allons placer les images (512!288) dans le dossier images/galerie/.
Et mettre les images pour contrler le slideshow.
Tlcharger les images pour le controleur
Etape 3 : partie CSS
Le principe de base du diaporama est de superposer les images pour ensuite les faire
dler. Nous allons donc crer une feuille de style avec les proprits suivantes.
A Pour le style gnral de la page html :
body{
padding:50px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#bbb;
background:#666
}
a{
outline:none
}
ul{
margin:0;
padding:0;
}
p{
font-style:normal;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
34 sur 48 24/03/14 10:03
}

B - Pour le style gnral du diaporama
.jDiaporama{
position:relative;
}
La position du diaporama se met en relative, on peut prciser la taille des photos.
.jDiaporama ul{
-moz-box-shadow:1px 1px 0.5em #222;
overflow:hidden;
}
On place une ombre au diaporama, et un overow cach.

.jDiaporama li{
list-style-type:none;
overflow:hidden;
position:absolute
}
Avec la position absolute, Les images seront positionnes toutes au mme endroit et un
overow cach.
.jDiaporama li img{
display:block
}
Les images safchent en bloc et non en ligne
.jDiaporama li .desc{
position:absolute;
bottom: 0; left: 0;
display:none;
margin:0;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
35 sur 48 24/03/14 10:03
color:#fff;
font-size:12px;
font-family: Arial;
padding:5px;
background:url(images/back_desc.png) repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.p
width:100%;
height:30px
}
On place le texte de description en absolu et en bas gauche du contenu diaporama,
avec une marge extrieur a 0 et intrieur 5 px, ainsi quun texte blanc en Arial et dune
taille de 12px.
On lui donne une largeur de 100% et une hauteur de 30 px et une image de fond :
back_desc.png
.jDiaporama li .title{
position:absolute;
top: 0; left: 0;
display:none;
margin:0;
color:#fff;
font-size:12px;
font-family: Arial;
padding:5px;
}
On place le titre de la photo en absolu et en haut gauche du contenu diaporama, avec
une marge extrieur a 0 et intrieur 5 px , ainsi quun texte blanc en Arial et dune taille
de 12px.
On place le style des boutons du Contrleur du diaporama. Attention ne pas changer
le titre des balises si vous voulez que cela soit li au chier js.
.jDiaporama li .count{
position:absolute;
top: 0; right: 0;
display:none;
margin:0;
color:#fff;
font-size:12px;
font-family: Arial;
padding:5px;
}
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
36 sur 48 24/03/14 10:03
.jDiaporama_controls{
display:none;
}
.jDiaporama_controls a{
font-weight:normal;
width:10px;
height:13px;
text-indent:-9999px;
display:block;
margin:0 3px;
position:absolute;
}
.jDiaporama_controls .prev{
background:url(images/controls2.png) no-repeat bottom;
_background:url(images/controls.gif) no-repeat bottom;
top:50%;
margin-top:-16px;
height:32px;
width:32px;
left: 0px
}
.jDiaporama_controls .next{
background:url(images/controls2.png) no-repeat top;
_background:url(images/controls.gif) no-repeat top;
top:50%;
margin-top:-16px;
height:32px;
width:32px;
right: 0px
}
.jDiaporama_controls .pause{
background:url(images/playpause.png) no-repeat top;
_background:url(images/playpause.gif) no-repeat top;
width:64px;
height:48px;
left:50%;
top:50%;
margin-left:-32px;
margin-top:-24px;
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
37 sur 48 24/03/14 10:03
}
.jDiaporama_controls .play{
background:url(images/playpause.png) no-repeat bottom;
_background:url(images/playpause.gif) no-repeat bottom;
width:64px;
height:48px;
left:50%;
top:50%;
margin-left:-32px;
margin-top:-24px;
}
Etape 4 : la partie Jquery
A Fonctionnalits
Listes des fonctionnalits de ce diaporama Jquery :
Contrle du diaporama grce aux touches directionnelles du clavier
Dlement automatique ou non
Gestion de la direction du diaporama (de gauche droite ou inversement)
Pause par dfaut possible
Arrt du diaporama aprs un nombre dni de boucles
Afchage du titre
Afchage de la lgende
Afchage dun compteur (image actuelle sur nombre dimages)
Possibilit daccder une image directement en cliquant sur les boutons ronds
Ajustement automatique en fonction de la taille des images du diaporama
Compatibilit sur tous les navigateurs
B Explications
Dclaration des nouvelles options
var defaults = {
auto: true, // Le diaporama est en mode automatique
delay: 3, // La dure d'affichage est de 3 secondes
animationSpeed: "normal", // La dure de transition est normale
controls: true, // Les boutons de contrle sont affichs par dfaut
keyboard: true, // La navigation au clavier est active
infos: true, // Les informations (lgende, titre) sont affiches
currentimage: true, // Le compteur d'image est affich
paused: false, // Le diaporama dmarre automatiquement
boucles: 0, // 0 = Illimit, le diapo ne s'arrtera jamais
sens: "right" // Le sens du dfilement est vers la droite par dfaut
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
38 sur 48 24/03/14 10:03
onrollover: true // Les infos ne s'affichent qu'au survol de la souris
};
Initialisation & variables
Nous allons voir ici dans un premier temps, comment initialiser notre script, en
dnissant quelques variables et en effectuant quelques actions.

// la variable diapo est un raccourci pour le diaporama courant
var diapo = $(this);
// Variable utilis pour dtecter la prsence de la souris sur le diaporama
var mouseover = false;
// Orientation du dfilement
var sens = options.sens;
var pause = false;
var width = 0;
var height = 0;
// Image par dfaut (position 0)
var current_slide = 0;
// On encapsule notre liste (ul) dans un div avec une classe
diapo.wrap("<div class='jDiaporama'></div>");
var inter = ""; // Variable pour l'interval de temps
// Si le mode est dfini sur "auto" et qu'il dmarre automatiquement
if(options.auto && !options.paused)
// On lance le diaporama (dfilement)
inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000
// On cache les autres images pour n'afficher que la premire
$("li", diapo).hide();
// A noter une diffrence, maintenant on appelle une fonction init() *
// la fin du fondu sur la premire image.
$("li:first-child", diapo).addClass("active").fadeIn(options.animationSpeed, in
// Pour chaque lment
$("li", diapo).each(function(){
elt = $(this);
// On calcule la position de l'image
i = parseInt($("li", diapo).index($(this))+1);
// On lui ajoute un ID avec la position
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
39 sur 48 24/03/14 10:03
$(this).attr("id", "jDiaporama_image_"+i);
// Affichage de la lgende si renseigne et active
if(options.infos)
{
// Y-a-t-il une description ? balise title
var is_desc = ($("img", elt).attr("title") != "");
// Y-a-t-il un titre? balise alt
var is_title = ($("img", elt).attr("alt") != "");
// On affiche ensuite ou non le titre et la description de l'image
if(is_desc)
elt.append("<p class='desc'>"+$("img", elt).attr("title")+"</p>");
if(is_title)
elt.append("<p class='title'>"+$("img", elt).attr("alt")+"</p>");
// On affiche selon le paramtre choisi, le compteur d'image ou non
if(options.currentimage)
// On rcupre ici la position de l'image courante (mthode index())
// qu'on incrmente car la premire position est 0.
// Et on la compare au nombre d'images total
// (nombre d'enfants (li) du diaporama)
elt.append("<p class='count'>"+parseInt($("li", diapo).index(elt)+1)+"/"+diapo
}
})
Le script est maintenant initialis par une fonction.
function init()
{
// On rcupre la taille de la premire image du diaporama
width = $("li:first-child img", diapo).width();
height = $("li:first-child img", diapo).height(); // Sa hauteur
// On ajuste le diaporama la bonne taille
// Ici la liste ul
diapo.width(width);
diapo.height(height);
// Ici son parent .jDiaporama
diapo.parent().width(width);
diapo.parent().height(height);
// Si les contrles sont activs, on affiche les boutons ronds
if(options.controls)
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
40 sur 48 24/03/14 10:03
diapo.siblings(".jDiaporama_status").show();
// Si le diaporama est auto, mais en pause au dbut,
// On lance l'vnement click sur le bouton "pause"
if(options.auto && options.paused)
$(".pause", diapo.siblings()).trigger("click");
// On rend actif le premier bouton rond de la status bar
$("#jDiaporama_bullet_"+(parseInt($("li", diapo).index($("li:first-child", dia
}
Le script est initialis.
Il nous reste maintenant dnir :
les actions utilisateurs pour les rollovers et lafchage des informations 1.
les commandes clavier 2.
les diffrents contrles du diaporama (suivant, prcedent, pause ) 3.
la fonction de rotation dimage 4.
la fonction de rotation automatique 5.
Informations & Rollovers
Par dfaut, les informations ne safchent quau survol de la souris sur une image.
On peut changer ce paramtre dans les options.
Il convient alors de dtecter quand la souris est sur limage courante. Pour cela
nous utilisons les mthode JQuery mouseenter et mouseleave pour respectivement
Entre de la souris dans la zone de limage et sortie .
EVENEMENTS DE LA SOURI S
diapo.parent().mouseenter(function(){
// On indique que la souris est bien au dessus de l'image
mouseover = true;
// On appelle la mthode qui affiche les infos
// pour l'image courante
displayInfos($("li.active", diapo), "show");
// Si les contrles sont activs, on affiche les boutons (flches, pause)
if(options.controls)
diapo.siblings(".jDiaporama_controls").fadeIn();
}).mouseleave(function(){
// La souris n'est plus au dessus de l'image
mouseover = false;
// On cache les infos
displayInfos($("li.active", diapo), "hide");
// Et les boutons
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
41 sur 48 24/03/14 10:03
if(options.controls)
diapo.siblings(".jDiaporama_controls").hide();
});
Grce ces deux mthodes, nous pouvons parfaitement grer lafchage des
informations et des contrles en fonction des vnements souris.
MTHODE D AFFI CHAGE
function displayInfos(elt, display)
{
// Variables pour tester la prsence des balises "title" et "alt"
// Pour respectivement la description et le titre
var is_desc = ($("img", elt).attr("title") != "");
var is_title = ($("img", elt).attr("alt") != "");
if(is_desc)
if(display == "show")
$(".desc", elt).slideDown("fast");
else
$(".desc", elt).slideUp("fast");
if(is_title)
if(display == "show")
$(".title", elt).slideDown("fast");
else
$(".title", elt).slideUp("fast");
if(options.currentimage)
if(display == "show")
$(".count", elt).slideDown("fast");
else
$(".count", elt).slideUp("fast");
}
Cette fonction soccupe simplement de vrier la prsence des bonnes balises,
pour nafcher les informations que lorsquelles sont prsentes. Ainsi on teste les
attributs title et alt pour lancer lanimation dafchage.
Le paramtre display est utilis pour savoir sil faut afcher ou cacher les
informations.
Enn, de la mme manire, on nafche le compteur dimages que si celui-ci est
activ dans les paramtres.
Commandes clavier
Nous utilisons ici une autre mthode JQuery: la fonction keydown qui permet
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
42 sur 48 24/03/14 10:03
de dtecter la pression dune touche du clavier.
Il suft ensuite de reprer le code de la touche correspondant la che
gauche (37) et la che droite (39). Aprs, nous allons rutiliser le
fonctionnement du clic sur les boutons suivant et prcdent (voir plus bas) pour
passer limage suivante ou prcdente (vitant ainsi de rcrire les actions).
// Si la navigation au clavier est active
if(options.keyboard)
$(document).keydown(function(event) {
switch(event.keyCode){
case 37 : // Flche gauche
// On appelle la fonction prev()
prev();
break;
case 39 : // Flche droite
// On appelle la fonction next()
next();
break;
}
});
Boutons de contrle
Nous allons dtailler ici les diffrentes actions effectues par les boutons
de contrle du diaporama.
Il y a pas mal de code alors accrochez-vous !
Il y a quatre tapes dans cette portion de code :
Dnition de la status bar , les boutons ronds qui permettent de suivre le
dlement du diaporama.
1.
Laction du bouton prcdent 2.
Laction du bouton suivant 3.
Laction du bouton lecture/pause 4.
STATUS BAR
// On ajoute le <div> qui contient les boutons ronds
// juste aprs la liste d'images
diapo.after("<div class='jDiaporama_status'></div>");
// Pour chaque image du diaporama
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
43 sur 48 24/03/14 10:03
$("li", diapo).each(function(){
// On calcule la position de l'image
i = parseInt($("li", diapo).index($(this))+1);
// On ajoute dans le <div> un lien vers cette mme image
$(".jDiaporama_status", diapo.parent()).append("<a id='jDiaporama_bullet_"+i+"
})
// On calcule la taille que fait le <div> final avec les liens
// dedans pour pouvoir le placer de manire absolue
// centr en dessous du diaporama.
$(".jDiaporama_status", diapo.parent()).css("margin-left", -($(".jDiaporama_sta
// On dfinit l'action du clic sur un lien de la status bar
$(".jDiaporama_status a", diapo.parent()).click(function(){
// on appelle la mthode de rotation d'image avec
// comme paramtre le lien courant
nextImage(options, $(this));
return false;
})
AJOUT DES BOUTONS DE CONTRLE
On ajoute les boutons de contrle aprs le diaporama (<ul>). A noter quon najoute le
boutonplay/pause uniquement si le mode auto est activ).
// Ajout du <div> .jDiaporama_controls
diapo.after("<div class='jDiaporama_controls'><a href='#' class='prev'>Prec.</a
Action du bouton prcdent
$(".prev", diapo.siblings()).click(function(){
prev();
// On annule l'action originelle (#) du lien
return false;
});
function prev()
{
// Si l'image courante n'est pas la premire
if(!$("li.active", diapo).is(":first-child"))
// l'lment afficher est l'image prcdente
elt = $("li.active", diapo).prev();
else
// Sinon c'est la dernire
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
44 sur 48 24/03/14 10:03
elt = $("li:last-child", diapo);
// On appelle la mthode de rotation avec l'image afficher
nextImage(options, elt);
// On dfinit le sens de dfilement
sens = "left";
}
Action du bouton suivant
La seule diffrence avec le bouton prcdent est le sens de rotation.
$(".next", diapo.siblings()).click(function(){
next();
// On annule l'action originelle (#) du lien
return false;
});
function next()
{
// Si l'image courante n'est pas la dernire
if(!$("li.active", diapo).is(":last-child"))
// l'lment afficher est l'image suivante
elt = $("li.active", diapo).next();
else
// Sinon c'est la premire
elt = $("li:first-child", diapo);
nextImage(options, elt);
sens = "right";
}


Action du bouton lecture/pause
$(".pause", diapo.siblings()).click(function(){
// Si le diaporama est dj en pause (a la classe "pause")
if($(this).hasClass("pause"))
{
// On enlve cette classe et on met la classe "play"
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
45 sur 48 24/03/14 10:03
$(this).removeClass("pause").addClass("play");
// On arrte le dfilement automatique du diaporama
clearInterval(inter);
// On dfinit une variable globale "pause" true
pause = true;
}
// Sinon
else
{
// On remet la classe "pause"
$(this).removeClass("play").addClass("pause");
// On relance le dfilement automatique
inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000
pause = false;
}
return false;
});
}

Fonction de rotation dimage
En effet, avant cette fonction ne soccupait uniquement que dafcher limage suivante
ou prcdente selon le sens de rotation. Maintenant elle afche une image dnie
(passe par paramtre) pour que lon puisse afcher limage souhaite grce la
status bar . Cest donc les boutons de contrle qui dnissent quil faut afcher limage
suivante ou prcdente
// Le paramtre elt correspond l'lment que l'on veut afficher
// Soit l'image suivante au clic sur les boutons suivant/prcdent
// Soit le lien de la status bar
function nextImage(options, elt)
{
// On stoppe le dfilement automatique
clearInterval(inter);
// On cache l'image active et on lui retire sa classe
$("li.active", diapo).fadeOut(options.animationSpeed).removeClass("active");
// On fait de mme pour les liens de la status bar
$(".jDiaporama_status a", diapo.parent()).removeClass("active");
// On rcupre l'identifiant de l'lment (image ou lien status bar)
id = elt.attr("id").split("_")[2];
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
46 sur 48 24/03/14 10:03
// On rend actif et on affiche l'image demande
$("li#jDiaporama_image_"+id, diapo).addClass("active").fadeIn(options.animatio
// On ajoute la classe actif au bon bouton rond de la status bar
$("#jDiaporama_bullet_"+id, diapo.siblings()).addClass("active");
// Si les infos sont actives, le rollover aussi et qu'on est dj sur le diap
// au moment o on change d'image, alors on affiche les infos
if(options.infos && mouseover && options.onrollover)
displayInfos($("li.active", diapo), "show");
// Sinon on les cache
else if(!mouseover && options.onrollover)
displayInfos($("li.active", diapo), "hide");
// Si le diapo est en mode auto et n'est pas en pause
if(!pause && options.auto)
{
// Si l'on est pas arriv au bout du compteur de boucle ou que celui est ci es
if(options.boucles == 0 || (options.boucles > 0 && (diapo.data("current_slide"
// On relance le dfilement automatique
inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000
else
// Sinon on est arriv la fin et on enlve le bouton lecture/pause
$(".pause", diapo.siblings()).remove();
}
}
Fonction de dfilement automatique
Voici la fonction qui est appele intervalle rgulier et qui soccupe de faire dler les
images automatiquement.
On utilise dans cette mthode, une autre fonction JQuery bien pratique, la fonction data,
qui permet dassocier des variables un objet JQuery. En loccurence, nous allons nous
en servir pour stocker la variable current_slide dans lobjet diapo (notre diaporama).

function displayDiaporama(options)
{
// On incrmente le nombre d'images dj affiches
current_slide++;
// On met jour la variable pour le diaporama courant
diapo.data("current_slide", current_slide);
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
47 sur 48 24/03/14 10:03
// Selon le sens de rotation, nous appelons la fonction
// suivante ou prcdente
if(sens == "right")
next();
else
prev();
}
Telecharger le code source

Publi dans Technique Web | Laisser une rponse
Technique Web | Imagination Trip http://efonderie.com/bts/B9/category/support-de-cours/techni...
48 sur 48 24/03/14 10:03