Voici l'un de nos premiers tutoriel spécialisé dans les petites astuces qui rendent un webdesign original et tendance. Le tout accessible facilement et rapidement pour tous ! Bonne lecture.Dans ce premier numéro, nous allons vous montrer "Comment intégrer une image aléatoire dans un webdesign !", facilement et sans connaissances en programmation PHP.
Pourquoi intégrer une image aléatoire dans le design d'un site ou de son portfolio ?
Premièrement l'aléatoire c'est tendance ...ou pas ! Tout dépend du point de vue. Personnellement j'aime ce concept car cela permet à un site de devenir vivant avec une interactivité simple. A chaque nouvelle visite, nous découvrons une nouveauté. A l'aide d'un simple code PHP, nous pouvons rendre une image, un texte, une couleur ou une animation aléatoire !Exemple :
Voici comme exemple mon portfolio, on l'on peut voir à chaque page une nouvelle image apparaître dans le header. www.ginetvincent.com
Intégrer une image aléatoire !
(+) Voir la démo
Structure HTML
Pour commencer, vous devez créer votre structure HTML afin d'avoir une base.
Voici celle de l'exemple :
<body> <div id="header"> <h1><img src="images/logo_1.png" title="BlogDuWebdesign" alt="BlogDuWebdesign"/></h1> </div> <div id="contenu"> <a id="bt_Retour" href="http://www.blogduwebdesign.com/"> < Retour au blog</a> <p><a id="bt_Recharge" href="/tutoriels/image_aleatoire/">Recharger la page (F5)</a></p> </div> </body> Pour le moment rien n'est dynamique. Intéressons-nous à l'image que l'on charge, on remarque quelle se nomme "logo_1.png". Nous devons préparer les autres images qui seront chargées en PHP, pour rester simple nous les nommerons comme ceci :
Rendre le tout dynamique, à chaque chargement !
Désormais il nous reste à rendre dynamique le chargement de l'image, pour cela nous allons utiliser 2 lignes de code PHP qui servirons à définir les possibilités entre les numéros d'images. Ces lignes sont à coller avant tout code HTML, tout en haut du fichier.
<?php $first_image=1; $last_image=5; ?> Enfin, il reste à remplacer dans l'attribut src de notre balise image, la chiffre "1" par <?php echo mt_rand($first_image,$last_image); ?> qui permet de sélectionner un chiffre au hasard entre 1 et 5. <h1><img src="images/logo_<?php echo mt_rand($first_image,$last_image); ?>.png" title="BlogDuWebdesign" alt="BlogDuWebdesign"/></h1> Et voilà ! Vous venez de réaliser un webdesign qui évolue à chaque visite ;) Vous pouvez utiliser cette technique des images mais égalmeent des animations et le tout adaptable sur n'importe quels CMS (Wordpresse, Drupal, Joomla, ...). A vous d'imaginer les différentes possibilités !
Les fichiers
Voici les liens pour voir la démo en ligne et télécharger le dossier zip.
(+) Voir la démo
(+) Télécharger le dossier image_aleatoire.zip (47 Ko)
Aller plus loin !
Avec cette méthode, il est possible de faire des combinaisons, c'est à dire lier plusieurs éléments ensemble.
Exemple : l'apparition d'une image et d'un lien de même couleur.
Nous verrons dans un prochain tutoriel comment combiner et lier l'apparition de plusieurs éléments !
N'hésitez pas à poser vos questions, et à nous laisser vos réactions sur ce tutoriel. Dites-nous si vous pensez utiliser cet technique dans vos futures créations ?
Jeu de briques
Snake
Pacman
Bubble