IntroductionIn cet article, je vous montrerai comment écrire du code pour une galerie d'images. Une galerie d'image est juste une collection d'images. Habituellement, ces images sont petites. Lorsque vous cliquez sur celui que vous voyez une forme élargie de it.You besoin des connaissances de base en HTML, CSS, JavaScript et DOM pour comprendre cet article. Remarque: Si vous ne pouvez pas voir le code ou si vous pensez que quelque chose manquait dans cet article (lien brisé, l'image absente), contactez-moi au [email protected].
Voilà, me contacter pour le moindre problème que vous avez à propos de ce que vous êtes reading.Some CSS et JavaScript PrinciplesOne l'image peut être affichée sur la même page Web en plus d'un balises d'image. Ce qui importe pour afficher une image particulière est la valeur (URL) de l'attribut source. Vous pouvez utiliser JavaScript (et DOM) pour changer cette valeur pour une balise d'image. Une balise image peut avoir de nombreux attributs et les valeurs. Si vous modifiez uniquement la valeur, de l'attribut source de la balise de l'image, l'image l'étiquette affiche va changer.
Cependant, la nouvelle image aura les mêmes propriétés CSS (taille, par exemple) que la précédente image.ExampleThere existe différents modèles pour une galerie d'images. Je vais utiliser un exemple simple ici. Ensuite, vous pouvez modifier le code en fonction de votre projet commercial. Dans cet exemple, il existe cinq petites images dans une page Web. Lorsque vous cliquez sur une petite image, sa forme élargie apparaît plus haut dans la page. Les cinq images sont dans une rangée.
LayoutWhenever les éléments de votre page web sont sous la forme d'une grille, ligne ou une colonne, vous pouvez utiliser l'élément de tableau HTML. Donc pour cet exemple, vous avez besoin de deux tables. Le premier plus haut dans la page Web a une ligne et trois cellules. La première cellule peut avoir un peu de texte. La seconde cellule a l'image agrandie, et la troisième cellule peut avoir un peu de texte. Le deuxième tableau comporte une ligne mais avec cinq cellules pour les cinq petites images. Toutes les petites images sont de la même taille.
Il ya une seule grande image, qui est l'image agrandie. Ceci est le code HTML pour les éléments de table: Du texte peut aller texte here.Some peut aller here.src = "img2.jpg" onclick = "agrandir (événement)"