HTML - Boîte Information (1)
Boîte Information
Boîte Information
Utilisation du CSS pour faire afficher une note d'information en survolant une image "FLASH" en haut à gauche de l'écran.
CSS - Les règles de style.
Copier le CSS ci-dessous et le coller en fin du fichier de la feuille de style dans l'espace de gestion >>> Votre Blog >>> Modèle graphique, en dessous des vignettes "Modifier le fichier CSS (feuille de style).
/* =================================================
************ Boîtes d'informations ***************
------------------------------------------------- */
#box {
position:absolute; top:50px; left:50px;
z-index:10;
}
#box a {
color:#FF9900;
background:#333399;
font:bold Italic 16px "Comic Sans MS", sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:2px inside black;
}
#box a:hover {
color:black;
background: #FFCC00;
width:450px;
}
#box a span {
display:none;
}
#box a:hover span {
color:#333399;
background:#ffffff;
font:normal 14px "Comic Sans MS", sans-serif;
border:1px solid black;
display:block;
padding:10px;
}
HTML - Le code source.
Le code suivant est un exemple pour se rendre compte du placement et de l'affichage de cette boîte d'information. Il est à insérer dans le HTML d'un article ou de la page d'accueil, en principe au début, le CSS positionne l'image selon les valeurs attribuées à "top" et "left". Suivant la valeur de "position" l'image défilera avec la page "absolute" ou restera fixe à l'écran "fixed".
<div id="box"><a style="cursor:help"><img border="0" src="https://static.blog4ever.com/2006/01/490/artimage_490_818940_201004153721319.gif">
<span><big><b>Informations</b></big><br>
<b>Cette page contient le code pour afficher une boite d'information.</b><br><br>
Sélectionner tout le code CSS, pour le coller dans la feuille de style de ton
modèle graphique.<br><br>
Sélectionner tout le code HTML après avoir modifier ce texte exemple, pour le
coller dans le code source de la page d'un de des articles ou dans la page d'accueil.
<div align="right"><big><b>PapyClic</b></big> ...</div>
</span></a>
</div>
Pour les plus curieux je communique mes sources car il y a beaucoup de possibilités d'application avec des adaptations de ces codes, selon les besoins de chacun. Personnellement je vais bientôt présenter d'autres codes. En attendant ce [lien] est à suivre pour plus d'explications.à suivre...
