Comment faire une bannière extensible avec javascript

javascript peut être utilisé pour développer dynamiquement des bannières de page Web.

L`une des caractéristiques les plus utiles de programmes côté client comme javascript est qu`ils peuvent être utilisés pour modifier dynamiquement les interfaces utilisateur de la page Web. Bien que les programmes côté serveur comme PHP ou Perl peuvent également être utilisés pour modifier des éléments de page Web, leur utilisation nécessite une demande de serveur, un processus qui interrompt généralement l`expérience utilisateur. éléments de page dynamiques, tels que l`expansion des bannières, l`extension du texte et des mises en page sont bien changer adaptés à une langue immédiatement et répond directement à l`interaction de l`utilisateur avec les changements de page.

Ouvrez un éditeur de texte, et créer un nouveau fichier nommé expandBanner.html. Dans la plupart des éditeurs de texte, créer de nouveaux fichiers en sélectionnant « Nouveau » dans le menu « Fichier ». Ajouter des balises HTML de base dans le fichier, y compris «,» «,» «,» «,» «" et ".»

Ajouter un "

Video: Créez votre premier jeu en javascript avec Phaser Partie 1

» Tag entre expandBanner.html de «" et "" Mots clés. Affectez les attributs suivants à la

tag: id- "mybanner," style- "fond: bleu," "border: 1px solid," "hauteur: 30px" et "largeur: 100px." Ajouter une fermeture «

» Tag pour compléter la bannière. Tandis que le "ça" attribut doit être "mybanner," les valeurs d`attributs de style peuvent être modifiés en fonction de l`interface utilisateur.

Ajouter une balise d`ancrage ( «« ) Après la clôture «

» Tag. Définir l`attribut « href » de la balise d`ancrage « #, » donner l`ancre texte « Cliquez pour afficher bannière, » et fermer la balise « ».

Cliquez pour afficher Bannière

Ajouter un événement « onclick » à la balise d`ancrage qui appelle une fonction nommée « expandBanner. »

Cliquez pour afficher Bannière

Ajouter un delimiter javascript open ( « ») à expandBanner.html. Placez les délimiteurs entre le «" et "" Mots clés.

Ajouter une fonction nommée « expandBanner » entre expandBanner.html de « » tags. Ces ensembles de fonctions axées vers et élargit la div « de mybanner » en changeant sa largeur de 100px à 200px. Enregistrer et fermer expandBanner.html. Après l`étape 6, expandBanner.html apparaît comme indiqué ci-dessous:

Cliquez pour afficher Bannière

Ouvrir expandBanner.html dans un navigateur Web. Cliquez sur le lien « Cliquez pour afficher Banner » et vérifier que la bannière bleue se développe de 100px à 200px.

Conseils

L`expansion des bannières avec javascript ne se limite pas aux caractéristiques de largeur. javascript peut changer pratiquement tout attribut de bannière, y compris sa couleur, la taille ou de référence d`image.
Les bannières peuvent être développées en utilisant une variété d`événements tels que onmouseover, onchange ou onblur.
Les bannières qui utilisent des graphiques peuvent être étendus pour adapter les graphiques en utilisant les propriétés des attributs de débordement.

Attention

L`expansion des éléments de page peut modifier l`emplacement des éléments environnants et détruire la mise en page de la page.

Video: [Tuto Minute #1] Comment faire la bannière de la Triforce

Articles Tu auras besoin de

Les références

BucaroTecHelp: facile expansion code bannière
tizag: javascript getElementById
Dev.Opera: 48: Dynamic Style - manipulation CSS avec javascript
W3Schools: Événements javascript

A propos de l`auteur

Cathlene S. Baptista a commencé à écrire professionnellement en 2010, spécialisé dans les sujets techniques. Elle a également travaillé à McGraw-Hill comme un écrivain et rédacteur en chef. Baptista est titulaire d`un baccalauréat ès arts en psychologie de l`Université du Maryland et une maîtrise en sciences dans les systèmes d`information de l`Université George Washington.