Ajouter des effets à votre site grâce à javascript

Il est souvent nécessaire d'ajouter des effets à votre site. Il s'agit souvent d'effets d'animation, de transition ou autres. Le javascript est un langage de programation qui permet, en s'insérant dans le code HTML de vos pages, de produire un certain nombre de ces effets.

Très souvent, il faut lier votre fichier HTML à un fichier javascript externe, un peu comme pour les css. Ce fichier au format .js peut être directement en ligne ou placé dans votre dossier racine, dans un dossier nommé js. Si vous trouvez ce genre de fichier sur internet, il faudra donc souvent le télécharger pour pouvoir l'utiliser.

Il existe aujourd'hui de nombreuses "bibliothèques" javascript, c'est-à-dire de fichiers javascript contenant le code nécessaire à de nombreux effets. L'une des plus connues est la bibliothèque jQuery. Pour actionner ces effets, il faut toujours lier votre page au fichier javascript externe et rajouter dans votre page un peu de code javascript qui va faire le lien avec le fichier externe.

Je vous propose, en vrac, quelques effets souvent attendus(certains de ces effets sont aujourd'hui possibles directement en CSS3, sans utiliser javascript, mais ne sont pas compatibles avec tous les navigateurs) :

Drag & Drop

C'est un effet qui permet de déplacer avec la souris un objet posé sur votre page. L'objet sur lequel vous cliquez pour le déplacer passe alors au premier plan. Voir un exemple ici >

1. Dans un premier temps, vous devez créer une nouvelle page dans laquelle vous placerez les images à déplacer chacune dans une div identifiée par un ID "objet1', "objet2', etc. Pour une meilleure superposition, les images seront détourées sur fond transparent et enregistrées en gif pour conserver la transparence. Vous devez placer un lien virtuel (#) sur les images pour faire apparaître le doigt au survol. Vous devez obtenir le code suivant dans body :

<div id=objet1 ><a href="#"><img src="javascript_img/js_drag_01.gif" width="358" height="409" /></a></div>
<div id=objet2 ><a href="#"><img src="javascript_img/js_drag_02.gif" width="497" height="211" /></a></div>

2. Puis il faut télécharger le fichier javascript contenant le code nécessaire. Ici, il s'agit d'un fichier se nommant "wz_dragdrop.js". Vous pouvez le télécharger ici > (Clic droit et "Enregistrer le fichier lié sous…" ou "Enregistrer la cible du lien sous…")
Vous devez créer un dossier que vous nommerez "js" au premier niveau du site et mettre le fichier dedans (voir illustration plus haut)

Il faut ensuite lier votre page à ce fichier. Dans la partie head de votre page vous ajouterez le code suivant (dans l'argument src, prenez soin d'indiquer le bon chemin relativement à votre document; ce chemin peut varier selon le contexte de votre site) :

<script type="text/javascript" src="js/wz_dragdrop.js"></script>

3. Le code javascript qui va permettre d'activer le fichier externe devra se placer dans body, à la suite des balises div concernées. Il est à noter que vous devez ici indiquer les mêmes identifiants que ceux que vous avez choisi pour les différentes dvi, en nombre identique. Ici, nous avons choisi les identifiants "objet1", objet2", etc. mais vous pourriez bien choisir autre chose.

<script type="text/javascript">
<!--
SET_DHTML("objet1", "objet2");
//-->
</script>

4. Enfin, il faut mettre en forme vos balises div par des styles css. Les balises doivent être dimensionnées (à l'identique des images qu'elles contiennent) et placées sur la page par un positionnement absolu. Voici l'exemple du code css pour la div "objet1" :

#objet1 {
height: 409px;
width: 358px;
position: absolute;
left: 346px;
top: 217px;
}

5. Remarque : vous noterez que la zone réactive est le rectangle de chaque div et non pas la partie non transparente des images. Cela peut être gênant mais cela indique que c'est la div qui réagit et non pas son contenu. De fait, vous pouvez placer dans les div déplaçables autre chose que des images, du texte ou un mélange des deux par exemple.

Voici pour conclure, le code complet de la page :

Menu/Sous-menu déroulant avec effet d'animation

Le plus simple pour faire un sous-menu déroulant animé, encore appelé menu accordéon, est d'utiliser jQuery. La technique qui suit permet de faire un menu accordéon vertical basique mais fonctionnel. Pour fonctionner correctement, un menu accordéon combine trois parties :

1. Menu accordéon vertical simple

Je vais transposer la ressource disponible à l'URL suivante : http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/ en l'adaptant légèrement car les explications sont un peu rapides et il manque un peu de code (supposé évident par les auteurs de la ressource).

Le code HTML est celui d'un menu-sous-menu classique avec des ul et li imbriqués. Ici, la seule particuralité (c'est ce qui en fait la simplicité) est de donner un ID au menu par la balise <ul> principale :

<ul id="nav">

Pour le reste du code HTML, c'est un menu-sous-menu classique. Par exemple :

Le code javascript doit d'une part faire appel à la bibliothèque jQuery et d'autre part appeler la fonctions slide de jQuery pour animer le menu. Voici donc le code javascript complet que vous devez copier dans la partie <head> de votre page :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
/*$('#nav li a').removeClass('active');
$(this).addClass('active');*/
}
});
});
</script>

Enfin, le code CSS doit être réalisé pour la mise en forme du menu. Cependant, un fragment de code minimum est nécessaire au fonctionnement du menu. Il faut en effet cacher les sous-menus. Pour cela, utiliser le css

<style type="text/css">
#nav li ul {display: none; // used to hide sub-menus}
</style>

 

2. Menu accordéon horizontal simple

à venir…

 

Diaporama simple

Voici deux techniques simples pour réaliser un diaporama sur une page. Le principe consiste à établir une liste d'images constituant le diaporama, celui-ci étant activé au clic de souris. Il y aura toujours une partie du code jacvascript dans la partie head de la page, dans une balise script et une autre dans body, pour déclencher le diaporama, avec usage d'un événement du type onClick (clic souris).

Il est possible d'améliorer ce diaporama avec des boutons avant/arrière.

1. Diaporama simple, méthode 1

Vous pouvez voir l'exemple ici >.

Dans un premier temps, vous devez copier dans la partie head de votre page html, le code javascript qui va faire fonctionner le diaporama. Copiez intégralement le code ci-dessous dans head :

<script type="text/javascript">
function SlideShow(slideList, image, speed, name) {
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
//this.timer = 0;
}
SlideShow.prototype.play = SlideShow_play;
function SlideShow_play() {
with(this){
if(current++ == slideList.length-1) current = 0;
switchImage(image, slideList[current]);
//clearTimeout(timer);
//timer = setTimeout(name+'.play()', speed);
}
}
function switchImage(imgName, imgSrc) {
if (document.images)
{
if (imgSrc != "none"){
document.images[imgName].src = imgSrc;
}
}
}
</script>

Dans un deuxième temps, dans body, vous devez placer la première image du diaporama et un script de déclenchement. La première image est, dans notre exemple, placée dans une div nommée "diaporama", mais cette image s'inscrira dans votre site selon la structure que vous avez décidée.

Ici, nous avons nommé nos images "exemple_01.jpg", "exemple_02.jpg", etc. et les avons placées dans un dossier images nommé "javascript_img". Vous adapterez bien sûr les noms et chemins à votre propre structure de site.

Commencez par placer votre image dans body. Voir ci-dessous le code correspondant à notre exemple. Vous noterez le chemin de l'image dans src; à vous de l'adapter :

Il faut modifier les arguments de la balise img de sorte à supprimer les informations de dimension. En effet, dans ce cas, les images du diaporama ont des dimensions différentes et il ne faut pas indiquer de dimension à la première image pour ne pas déformer les suivantes. Par ailleurs, il faut nommer l'image avec name = "slide1". Enfin, il faut intégrer l'événement onClick qui va déclencher le diaporama (un clic sur l'image). Cette partie de code javascript pourrait être intégrée dans une autre image ou balise si on voulait créer un bouton indépendant.

Il faut également ajouter à la fin du code dans body, un script supplémentaire qui va appeler les fonctions nécessaires au bon déroulement du diaporama.
Le script à rajouter dans body est donné ci-dessous en version texte, afin que vous puissiez le copier/coller dans votre propre page. Attention, vous devez adapter le contenu de la variable mySlideList1 de sorte à intégrer la liste de vos images avec leur chemin exact :

<script>
var mySlideList1 = ['javascript_img/exemple_01.jpg', 'javascript_img/exemple_02.jpg', 'javascript_img/exemple_03.jpg'];
var mySlideShow1 = new SlideShow(mySlideList1, 'slide1', 3000, "mySlideShow1");
</script>

Le code final dans body doit ressembler à la copie d'écran ci-dessous :

2. Diaporama simple, méthode 2

Vous pouvez voir l'exemple ici >.

Dans ce second exemple, l'inconvénient est que vous devez indiquer la liste des images à afficher, non plus dans une variable (mySlideList comme précédemment dans la partie body du code), mais dans un tableau (Array) présent dans un script placé dans la partie head de votre page.

Le code à insérer dans la partie head de votre page est présenté ci-dessous. Copiez-le dans votre page en ajustant les chemins des images concernées en modifiant le contenu de Array :

<script type="text/javascript">
var tabImg = new Array(
"javascript_img/typo_01.jpg",
"javascript_img/typo_02.jpg",
"javascript_img/typo_03.jpg",
"javascript_img/typo_04.jpg");
var n = 1;
function avance_img(source)
{
document.getElementById(source).src = tabImg[n];
n++;
if (n >= tabImg.length)
n = 0;
}
</script>

Il reste à faire comme précédemment, c'est-à-dire placer la première image du diaporama sur la page, dans la partie body du code. Voir ci-dessous une copie d'écran du code correspondant. L'image est placée dans une balise span, elle-même placée dans une div, nommée diaporama. C'est la balise span qui reçoit ici le code javascript permettant de déclencher le diaporama (action onClick). Vous constaterez qu'on y ajoute un morceau de code permettant l'affichage du curseur au survol des images style="cursor: pointer".

Ici aussi l'image de base ne comporte pas de dimensions, bien que dans cet exemple les images soient toutes exactement de la même dimension, ce qui donne une certaine cohérence à votre diaporama.

Reproduisez dans le body de votre page le code ci-dessous en adaptant le chemin et le nom de la première image, dans la zone src :

3. Utiliser des boutons de navigation

Reprenons la méthode précédente. Vous pouvez ajouter des boutons avance et recule pour contrôler le diaporama. Voir l'exemple ici >.

Pour ce faire vous devez d'abord ajouter des images qui serviront de bouton. Nous avons légèrement modifié notre code dans body pour cela. Chaque image (dans notre cas des flèches) est placée dans un span spécifique déclenchant une fontion différente.Voir ci-dessous la copie d'écran du code correspondant :

La flèche de droitre déclenchera la fonction avance_img comme précédemment. La flèche de gauche déclenchera une fonction recule_img qu'il nous faut rajouter à notre code dans la partie head. Voir ci-dessous le code complet à copier :

<script type="text/javascript">
var tabImg = new Array(
"javascript_img/typo_01.jpg",
"javascript_img/typo_02.jpg",
"javascript_img/typo_03.jpg",
"javascript_img/typo_04.jpg");
var n = 1;
function avance_img(source)
{
document.getElementById(source).src = tabImg[n];
n++;
if (n >= tabImg.length)
n = 0;
}
function recule_img(source)
{
document.getElementById(source).src = tabImg[tabImg.length-n];
n++;
if (n > tabImg.length)
n = 1;
}
</script>