HTML - Boîte Information (2)
"Survol... informations à lire ..." Dans le précédent article sur les boîtes d'informations, j'indiquais d'autres possibilités d'applications du système ou un peu différent. Dans l'article "QUOI de NEUF", je présente une boîte s'affichant directement dans l'article.
CSS - Les règles de style.
Pour ces boîtes, j'ai créé une autre règle de style, pour me donner la possibilité d'afficher plusieurs boîtes dans le même article. Donc il faut remplacer le ID représenté par "#", par une CLASS représentée par ".", puis un nom différent boxaide.
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).
/* =================================================
************ Boites d'aide CLASS boxaide **********
------------------------------------------------- */
.boxaide { /* taille boîte visible */
width:350px;
height:80P=px;
}
.boxaide a { /* paramètres boîte contenant lien */
color:#FF9900;
background: #333399;
font:bold Italic 16px "Comic Sans MS", sans-serif;
text-decoration:none;
display:block;
padding:5px;
margin-bottom:20px;
border:3px inset yellow;
}
.boxaide a span { /* texte dans span invisible */
display:none;
}
.boxaide a:hover span { /* texte dans span affiché */
color:#333399;
background: #FFFF99;
font:bold Italic 14px "Comic Sans MS", sans-serif;
border: 3px outset #FF3300;
width:350px;
height:200px;
padding:10px;
display:block;
position:relative;
top:10px;
left:10px;
z-index: 1;
overflow:auto;
}
HTML - Le code source.
Le code suivant place et affiche cette boîte d'information ou d'aide. Il est à insérer dans le HTML d'un article ou de la page d'accueil, à l'emplacement que vous souhaitez.
Le CSS positionne le texte à afficher selon les valeurs attribuées à "top" et "left" avec la valeur de "position" qui est "relative" par rapport à la boîte visible, avec l'image et ou le texte, "#boxaide".
Cette boîte est également placée dans une division "div", de façon à pouvoir régler son positionnement dans le texte.
<Div style="width: 360px; margin: 10px auto 30px auto;">
<DIV class=boxaide><A style="cursor:help">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_753326_201004154530864.gif" border="0" vspace="0" hspace="5" />"Survol... informations à lire ..." <SPAN><BIG><B>Informations</B></BIG><BR>
<P>Voilà cette deuxième boîte a pu être créée grâce au changement de règle par rapport à celle "FLASH" que je fait flotter sur ma page d'accueil.</P>
<P>Je peux maintenant sur une même page me servir de ces 2 règles, soit avec une image différente ou du texte.</P>
<P>Vous trouverez sur mon Bric à Brac quand vous reviendrez certainement d'autres utilisations de ces codes. </P>
<DIV align=right><BIG><B>PapyClic</B></BIG> ...</DIV>
</SPAN></A>
</DIV>
</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. 
