Personnalisez vos boîtes de message (x)html

Soyez le premier à donner votre avis sur cette source.

Vue 5 225 fois - Téléchargée 325 fois

Description

Cette page est la traduction de l'article : CSS Message Boxes for different message types.
Dans cette page, nous allons visualiser des boîtes de message personnalisées en fonction du type de message.
j'etulise pur ca le VBscript & CSS

Source / Exemple :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> 
<HTA:APPLICATION
      Application ID = "MsgPerso"
      APPLICATIONNAME = "MsgPerso"
      BORDER = "Thick"
      BORDERSTYLE = "Complex"
      CAPTION = "Yes"
      CONTEXTMENU = "no"
      ICON = ""
      INNERBORDER = "yes"
      MINIMIZEBUTTON = "no"
      NAVIGABLE = "Yes"
      SCROLL = "No"
      SCROLLFLAT = "Yes"
      SELECTION = "No"
      SHOWINTASKBAR = "Yes"
      SINGLEINSTANCE = "Yes"
      SYSMENU = "yes"
      VERSION = "1.0"
      WINDOWSTATE = "Normal"
      />
  <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <style type="text/css"> 
#element1 {
position:absolute;
background-color:#FFBABA;
top:224px;
right:210px;
}
#element2 {
position:absolute;
background-color:#BDE5F8;
top:355px;
right:210px;
}
#element3 {
position:absolute;
background-color:#FEEFB3;
top:155px;
right:1px;
}
#element4 {
position:absolute;
background-color:#DFF2BF;
top:224px;
right:14px;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:100px;
background-color:#33FF99;
}
div#menuhaut {
width:100px;
height:200px;
}
div#menubas {
width:100px;
height:200px;
}
.TA_Etapeencours {color:#990000; font-family:Impact, Arial; font-size:18px;border-bottom:1px dotted #666666;margin-left:10px;margin-right:4px;}
.TA_Fiche_ChapoAst2 {font:normal 14px verdana;color:#000000;line-height:24px; padding-bottom:20px;}
.ImgTitre_text2{ display:block; position:absolute; font-family: Impact, Arial, Helvetica  ; font-size:46px; color:#666666; text-decoration:none; background:#FFFFFF; padding-right:10px;}
.TA_Fiche_ChapoAst2 {font:normal 14px verdana;color:#000000;line-height:24px; padding-bottom:20px;}
</style> 
<!-- Insertion de scripts JavaScript -->
<script language="javascript"> 
/*
Script Texte défilant pour tous les navigateurs-
© Dynamic Drive (www.dynamicdrive.com)
Pour le code source complet, les instructions d'installation,
des centaines d'autres scripts DHTML et les modalités d'utilisation,
visitez dynamicdrive.com

  • /
//Spécifiez la largeur du texte défilant (en pixels) var marqueewidth=330; //Spécifiez la hauteur du texte défilant (en pixels, se rapporte uniquement à Netscape) var marqueeheight=20; //Spécifiez la vitesse de défilement du texte défilant (plus grand nombre = plus grande vitesse) var speed=6; //Spécifiez le contenu du texte défilant var marqueecontents='<div class="TA_Etapeencours"><font face="Arial"><strong><big>Un grand merci à Janko Jovanovic (Auteur) Didier Mouronval (Traducteur) pour l´article :Personnalisez vos boîtes de message (X)HTML </big></strong></font></dive>'; if (document.all) document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>'); function regenerate(){ window.location.reload(); } function regenerate2(){ if (document.layers){ setTimeout("window.onresize=regenerate",450); intializemarquee(); } } function intializemarquee(){ document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>'); document.cmarquee01.document.cmarquee02.document.close(); thelength=document.cmarquee01.document.cmarquee02.document.width; scrollit(); } function scrollit(){ if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){ document.cmarquee01.document.cmarquee02.left-=speed; setTimeout("scrollit()",100); } else{ document.cmarquee01.document.cmarquee02.left=marqueewidth; scrollit(); } }</script> <title>Boite message perso</title> </head> <body> <div id="bandeau" style="width: 1240px; height: 125px;"> <span class="ImgTitre_text2">Personnalisez vos boîtes de message (X)HTML<br> <div class="TA_Fiche_ChapoAst2">Cette page est la traduction de l'article :<a href="http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx"> CSS Message Boxes for different message types.</a><br> Dans cette page, nous allons visualiser des boîtes de message personnalisées en fonction du type de message. </div></span> </div> </div> <div id="contenu" style="width: 1240px; height: 458px;"> <div id="element1"> <div class="TA_Fiche_ChapoAst2" style="width: 520px; height: 116px;"> <img src="error.ico" alt="texte alternatif" height="32" width="32"> Les messages d'erreur devraient être affichés lorsque l'opération n'a pas pu se réaliser du tout. Par exemple : "Votre profil n'a pas pu être créé." La couleur rouge est appropriée pour ces messages car les gens l'associent à tous les types d'alerte.</div> </div> <div id="element2"> <div class="TA_Fiche_ChapoAst2" style="width: 520px; height: 95px;"> <img src="info.ico" alt="texte alternatif" height="32" width="32"> Le but de ce type de message est d'informer l'utilisateur de quelque chose d'important. Cela peut être présenté en bleu car les gens associent souvent cette couleur à une information, indépendamment du contenu. Cela peut correspondre à n'importe quelle information concernant les actions de l'utilisateur. </div> <div id="element3" style="width: 130px; height: 76px;"> <div class="TA_Fiche_ChapoAst2" style="width: 520px; height: 95px;"> <img src="warning.ico" alt="texte alternatif" height="32" width="32"> Les messages d'alerte devraient être affichés lorsqu'une opération n'a pas pu se terminer complètement. Par exemple "Votre profil a bien été enregistré, mais nous n'avons pas pu envoyer de mail à votre adresse" ou "Si vous ne créez pas votre profil, vous ne pourrez pas chercher d'emploi". Habituellement, ces messages sont affichés en jaune avec un point d'exclamation. </div> </div> </div> <div id="element4" style="width: 123px; height: 38px;"> <div class="TA_Fiche_ChapoAst2" style="width: 189px; height: 324px;"> <img src="success.ico" alt="texte alternatif" height="32" width="32"> Les messages de réussite devraient être affichés après le succès d'une action de l'utilisateur. J'entends par là une opération complètement terminée, pas partiellement terminée et sans erreur jusque là. Le message pourrait dire par exemple : "Votre profil a été enregistré avec succès et un mail de confirmation vous a été adressé à l'adresse que vous avez indiquée". Ce qui signifie que toutes les étapes ont été effectuées avec succès (enregistrement du profil et envoi de mail). </div> </div> <div id="menuhaut" style="width: 380px; height: 167px;"> <div class="TA_Etapeencours">Ajoutez un message personnalisée ici</div> <br> <form name="txtCommentaires"> <textarea name="message" rows="10" cols="30" dir="ltr">Par exemple Votre profil n'a pas pu être créé.</textarea></form> </div> <div id="menubas" style="width: 314px; height: 209px;"> <div class="TA_Etapeencours">Choisissez un type de boite message</div> <!--==--==--==--==--==--==--==--==-- Radio Button --==--==--==--==--==--==--==--> <fieldset width="" 290px=""><legend><font face="Verdana">Icône...</font></legend> <table style="text-align: left; width: 398px; height: 186px;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="width: 32px; height: 32px;"><font face="Verdana"><img style="width: 32px; height: 32px;" alt="" src="error.ico"></font></td> <td style="height: 32px; width: 264px;"><font face="Verdana"><input name="optMsg" value="MsgErr" onclick="MsgErr()" type="radio">Message d'erreur </font> </td> </tr> <tr> <td style="width: 32px; height: 24px;"><font face="Verdana"><img style="width: 32px; height: 32px;" alt="" src="Info.ico"></font></td> <td style="height: 24px; width: 264px;"><font face="Verdana"><input name="optMsg" value="MsgInfo" onclick="MsgInfo()" type="radio">Message d'information</font></td> </tr> <tr> <td style="width: 32px; height: 32px;"><font face="Verdana"><img style="width: 32px; height: 32px;" alt="" src="success.ico"></font></td> <td style="width: 264px; height: 32px;"><font face="Verdana"><input name="optMsg" value="MsgReust" onclick="MsgReusit()" type="radio">Message de réussite</font></td> </tr> <tr> <td style="width: 32px; height: 48px;"><font face="Verdana"><img style="width: 32px; height: 32px;" alt="" src="warning.ico"></font></td> <td style="width: 264px; height: 48px;"><font face="Verdana"><input name="optMsg" value="MsgAlert" onclick="MsgAlert()" type="radio">Message d'alerte</font></td> </tr> </tbody> </table> </fieldset> </div> </div> <div id="piedpage" style="width: 1240px; height: 160px;"></div> <!--#################[ Ajoute script code]######################--> <SCRIPT LANGUAGE="VBScript"> sub MsgErr() img="error.ico" x=document.txtCommentaires.message.value document.write("<style type=""text/css"">") document.write ("body{") document.write ("font-family:Arial, Helvetica, sans-serif;") document.write ("font-size:13px;") document.write ("}") document.write (".info, .success, .warning, .error, .validation {") document.write ("border: 1px solid;") document.write ("margin: 10px 0px;") document.write ("padding:15px 10px 15px 50px;") document.write ("background-repeat: no-repeat;") document.write ("background-position: 10px center;") document.write ("}") document.write (".error {") document.write ("color: #D8000C;") document.write ("background-color: #FFBABA;") document.write("background-image: url(" & img & ")") document.write ("}</style>") document.write("<div class=""error"">" & x & "</div>") end sub sub MsgInfo() img="info.ico" x=document.txtCommentaires.message.value document.write("<style type=""text/css"">") document.write ("body{") document.write ("font-family:Arial, Helvetica, sans-serif;") document.write ("font-size:13px;") document.write ("}") document.write (".info, .success, .warning, .error, .validation {") document.write ("border: 1px solid;") document.write ("margin: 10px 0px;") document.write ("padding:15px 10px 15px 50px;") document.write ("background-repeat: no-repeat;") document.write ("background-position: 10px center;") document.write ("}") document.write (".info {") document.write ("color: #00529B;") document.write ("background-color: #BDE5F8;") document.write("background-image: url(" & img & ")") document.write ("}</style>") document.write("<div class=""info"">" & x & "</div>") end sub sub MsgAlert() img="warning.ico" x=document.txtCommentaires.message.value document.write("<style type=""text/css"">") document.write ("body{") document.write ("font-family:Arial, Helvetica, sans-serif;") document.write ("font-size:13px;") document.write ("}") document.write (".info, .success, .warning, .error, .validation {") document.write ("border: 1px solid;") document.write ("margin: 10px 0px;") document.write ("padding:15px 10px 15px 50px;") document.write ("background-repeat: no-repeat;") document.write ("background-position: 10px center;") document.write ("}") document.write (".warning {") document.write ("color: #9F6000;") document.write ("background-color: #FEEFB3;") document.write("background-image: url(" & img & ")") document.write ("}</style>") document.write("<div class=""warning"">" & x & "</div>") end sub sub MsgReusit() img="success.ico" x=document.txtCommentaires.message.value document.write("<style type=""text/css"">") document.write ("body{") document.write ("font-family:Arial, Helvetica, sans-serif;") document.write ("font-size:13px;") document.write ("}") document.write (".info, .success, .warning, .error, .validation {") document.write ("border: 1px solid;") document.write ("margin: 10px 0px;") document.write ("padding:15px 10px 15px 50px;") document.write ("background-repeat: no-repeat;") document.write ("background-position: 10px center;") document.write ("}") document.write (".success {") document.write ("color: #4F8A10;") document.write ("background-color: #DFF2BF;") document.write("background-image: url(" & img & ")") document.write ("}</style>") document.write("<div class=""success "">" & x & "</div>") end sub </script> </body> </html>

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.