Passer au contenu

Insufflez du rythme à vos pages

Votre site est terne et ennuyeux ? Dynamisez-le avec un langage de programmation simple : le JavaScript. Quelques codes suffisent. Voici les plus utiles.

Une image qui s’anime au passage de la souris, un message personnel qui apparaît en bas de la fenêtre du navigateur utilisé ou un petit jeu pour détendre les visiteurs… Vous avez créé votre propre site Web, et vous aimeriez lui
donner un coup de fouet, le rendre interactif ou encore l’embellir graphiquement ? Aucun problème ! Avec le JavaScript, c’est à la portée de tous. Il suffit de quelques lignes de code, appelées
‘ scripts ‘, pour dynamiser les pages de votre site. Restent parfois à effectuer d’éventuelles adaptations, par exemple remplacer les liens, chemins et noms des fichiers images par ceux utilisés
réellement sur votre site. Nous avons sélectionné, pour vous, quelques scripts particulièrement utiles.

Prêt à l’emploi

Il est inutile de se plonger dans des bouquins de programmation pour s’initier au langage Java-Script. Comme de très nombreux webmasters ont eu les mêmes besoins que vous, les lignes de code à insérer sont déjà disponibles, en ligne,
prêtes à être réutilisées.Tout ce dont vous avez besoin, c’est de trouver ces lignes, savoir à quelles fonctions elles correspondent, les sélectionner, puis les recopier au bon endroit dans le fichier HTML de votre page Web.

Remplacez une image au passage de la souris

scripts_images_1_52.phpAu passage de la souris, une image est remplacée par une autre. C’est l’un des scripts les plus connus et appréciés. Pour l’utiliser, choisissez préalablement deux fichiers images dont vous aurez entré les noms dans le formulaire de
l’éditeur JavaScript. Insérez ensuite le code JavaScript fourni dans votre page Web, la première partie entre les balises

< HEAD > et < /HEAD >, la deuxième partie à l’endroit où vous désirez placer l’image.

Accélérez le chargement des images

scripts_images_2_2.phpLe navigateur du visiteur charge les images en arrière-plan pour un affichage plus rapide de la page. Dans l’exemple donné, tous les noms d’images et leurs chemins sont, bien entendu, à changer par leurs vraies valeurs.

Modifiez le texte des liens

scripts_textes_1_107.phpComme pour les images, vous pouvez modifier un texte au passage de la souris. En appliquant cette technique à un lien, vous pouvez par exemple afficher des détails supplémentaires sur la page liée.

Faites défiler un texte

scripts_textes_1_71.phpA la manière d’un télex, ce script vous permet de faire défiler un texte en bas du navigateur, dans la barre d’état. Par exemple : ‘ Bienvenue sur le site de Micro Hebdo. ‘ Vous
pouvez choisir le texte à afficher, ainsi que sa vitesse de défilement. Attention, 90 caractères environ seulement sont visibles en même temps, ne forcez donc pas trop sur la longueur du texte.

Effacez le contenu des champs

scripts_formulaires_2_15.phpSi les visiteurs de votre site doivent entrer des informations dans des formulaires, ce script vous sera très utile. Il permet en effet de vider intégralement un champ dès que l’on clique dessus. Vous pouvez ainsi remplir les champs à
l’avance, les internautes n’ont plus qu’à cliquer sur ceux qu’ils souhaitent modifier.

Espionnez vos visiteurs

scripts_visiteurs_2_21.phpIl est très facile de repérer avec quel navigateur un internaute visite votre site. Avec ce script, vous pouvez afficher directement le nom et la version du navigateur utilisé. Ce script ne devient réellement intéressant que si vous
voulez créer plusieurs versions de vos pages adaptées aux différents navigateurs.

Adoptez de bonnes résolutions

scripts_visiteurs_2_20.phpProche du script précédent, celui-ci permet d’indiquer la définition d’affichage choisie par les visiteurs de votre site. Petit gadget amusant, ce script devient indispensable si vous voulez créer un site avec un affichage toujours
adapté à l’écran des visiteurs.

A la bonne heure !

scripts_temps_1_97.phpLes internautes du matin ne ressemblent pas forcément à ceux du soir. Et si vous voulez afficher un message adapté à chacun, ce script est fait pour vous : un message différent s’affiche selon la plage horaire à laquelle vos
visiteurs se connectent sur votre page.

Faites déborder le menu

scripts_navigation_1_114.phpVoici tout un menu pour votre site ! En effet, ce script vous permet de créer un menu qui s’affiche sous la forme d’un petit onglet sur le bord gauche de la page et qui se déploie au passage de la souris. Couleurs du menu et des
textes, police, taille des caractères… toutes les lignes de ce menu sont totalement paramé-trables. Attention toutefois, vous devez recopier le script sur toutes les pages de votre site si vous souhaitez que le menu soit tout le temps
accessible.

Des cadres pour détailler les liens

scripts_navigation_1_109.phpCe script vous permet d’afficher des informations supplémentaires sur des liens dans un cadre texte qui apparaît lorsque la souris survole le texte à détailler. Les réglages par défaut offrent un affichage du plus bel effet, mais vous
pouvez à loisir changer les cadres, couleurs, polices et tailles des caractères.

Clic droit interdit

scripts_autres_2_138.phpSi vous ne voulez pas que vos visiteurs accèdent aux options des menus contextuels disponibles en cliquant avec le bouton droit de la souris, utilisez ce script.Si le visiteur clique avec le bouton droit, un message apparaît l’informant que cette option est interdite. Très pratique pour empêcher, par exemple, que l’on copie les images de votre site. Ne vous en remettez tout de même pas
totalement à ce petit truc, qui est certes pratique, mais très facilement contournable.

Distribuez la détente

scripts_jeux_3_236.phpRien ne vaut une bonne partie de poker pour se détendre ! C’est possible grâce à ce script. Attention, il est assez long à recopier. De plus, il nécessite la création d’un fichier, que vous nommerez poker.
html
et que vous devrez placer dans le même répertoire que votre page, après y avoir collé le script de l’éditeur Java-Script. Mais le jeu en vaut la chandelle…

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.


Stéphane Viossat