• Développement

Astuce : Créer un header aléatoire

Publié le
Astuce : Créer un header aléatoire

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

 
Pour intégrer une image aléatoire dans un webdesign, il n’y a rien de compliqué ! Il suffit de coller quelques lignes en PHP qui feront le travail. 
 
Il faut savoir que le PHP est un langage serveur, donc si vous travaillez en local vous ne verrez pas le résultat. Vous devez travailler directement sur un site en ligne ou installer un logiciel comme Wamp (Windows) ou Mamp (Mac) afin de simuler un serveur.

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 ?

By Vincent

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *