HTML - Présentation Accueil St Valentin
Présentation de la page d'accueil du concours St Valentin
Comme promis je vous livre dans cet article mes astuces de présentation, ce qui fait suite à l'article sur la décoration :
HTML - Sources décoration.
Au cours du concours de la St Valentin j'ai créé une galerie d'images défilantes dans des sens différents, ceci en employant une balise HTML <marquee> peu utilisée pour des images, en général elle est utilisée pour des textes défilants. Cette galerie est toujours dans mon album photos en cliquant sur l'image de droite les "Amoureux de Peynet" vous la lancerez.
Cette galerie comprend 3 éléments défilants:
- de droite à gauche sur Peynet
- de gauche à droite sur Betty Boop
- de bas en haut sur les Poulbots
<div id="peynet" style="position:relative; width:450px; height:510px;">
<h3>PEYNET - Les amoureux </h3>
<MARQUEE direction="left">
<img style="margin:5px" src="https://*** adresse image 1 ***">
<img style="margin:5px" src="https://*** adresse image 2 ***">
<img style="margin:5px" src="https://*** adresse image 3 ***">
</MARQUEE></div><br><br><a href="#betty">Suite</a><br><br>
<div id="betty" style="position:relative; width:450px; height:510px;">
<h3>BETTY BOOP</h3>
<MARQUEE direction="right">
<img style="margin:5px" src="https://*** adresse image 1 ***">
<img style="margin:5px" src="https://*** adresse image 2 ***">
<img style="margin:5px" src="https://*** adresse image 3 ***">
</MARQUEE></div><br><br><a href="#poulbots">Suite</a><br><br>
<div id="poulbots" style="position:relative; width:300px; height:400px;">
<h3>Les Poulbots</h3>
<MARQUEE direction="up" width="254" height="350">
<img style="margin:5px" src="https://*** adresse image 1 ***">
<img style="margin:5px" src="https://*** adresse image 2 ***">
<img style="margin:5px" src="https://*** adresse image 3 ***">
</MARQUEE></div><br><br>
<a href="http://***Nomdevotre***.blog4ever.com/blog/index-******.html" target="_self"><big>Retour Accueil</big></a>
Dans le code de la galerie le CSS est uniquement en direct c'est à dire avec l'attribut style="" incorporé dans la balise, ceci pour
- déterminer alignement du titre
- la position sur l'écran,la largeur, la hauteur
- les marges entre les images
Il vous restera à mettre les adresses des images, à la place de "*** adresse image # ***", puis ajouter une ligne pour chaque image, de modifier les valeurs (width, height) et de créer un article en rentrant ce code dans le composeur en mode HTML
Pour vous aider à employer cette balise <marquee> suivez ce : [lien]ou cliquez sur l'un de ces attrribut ci-dessous :
Sur la gauche de ma page d'accueil pour la St Valentin, une cascade d'images de petits coeurs, en utilisant également la même technique avec un défilement vers le bas, peu d'espace entre les images et une hauteur qui permettait de voir 2 à 3 images.
L'idée met venue d'utiliser ce système avec la liste des gagnants du concours. Mais pour pouvoir cliquer les liens pour rendre visite aux sites, il fallait 2 scripts (pas utilisables en version gratuite):
- pour arrêter le défilement au survol de la souris : onmouseover="this.stop()"
- pour que le défilement reprenne après que la souris se retire : onmouseout="this.start()"
Voilà le résultat sur la droite de l'article et le code source ci-dessous.
<div style="RIGHT:1px; POSITION:fixed; TOP:1px">
<div style="border:4px inset #FF6600; background:#CCFFFF; width:180px; padding:1px; text-align:center; font-size:10pt">
Concours - St VALENTIN<br />
<a href="http://test.blog4ever.com/blog/forum_msg-2-55480-118937.html" target="_blank">Résultats complets</a><br />
</div>
<div style="border:4px inset #FF6600; background:#CCFFFF; width:187px; height:75px; padding:1px">
<marquee direction="up" width="140" height="70" scrollamount="1" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<ol style="margin:1px; padding:1px">
<li><a href="http://moi7fille2foyer.blog4ever.com/" target="_blank">moi7fille2foyer</a></li>
<li><a href="http://unamoursecret.blog4ever.com/" target="_blank">unamoursecret</a></li>
<li><a href="http://tallulah.blog4ever.com/" target="_blank">tallulah</a></li>
<li><a href="http://demonange.blog4ever.com/" target="_blank">demonange</a></li>
<li><a href="http://ana-struggle.blog4ever.com/" target="_blank">ana-struggle</a></li>
<li><a href="http://chezangeljojo.blog4ever.com/" target="_blank">chezangeljojo</a></li>
<li><a href="http://pretty-and-thin.blog4ever.com/" target="_blank">pretty-and-thin</a></li>
<li><a href="http://melanieloisir.blog4ever.com/" target="_blank">melanieloisir</a></li>
<li><a href="http://world-in-drama.blog4ever.com/" target="_blank">world-in-drama</a></li>
<li><a href="http://naruto-news.blog4ever.com/" target="_blank">naruto-news</a></li>
<li><a href="http://cynd1972.blog4ever.com/" target="_blank">cynd1972</a></li>
<li><a href="http://sylviebarras.blog4ever.com/" target="_blank">sylviebarras</a></li>
<li><a href="http://leptimondedesofiane.blog4ever.com/" target="_blank">eptimondedesofiane</a></li>
<li><a href="https://bricabrac.blog4ever.com/" target="_blank">Bric à Brac</a></li>
<li><a href="http://laboiteabidules.blog4ever.com/" target="_blank">laboiteabidules</a></li>
</ol>
</marquee>
</div></div>
