Code de puissance de mot de passe

22 mai 2007, 10:50

Salut,
j'ai trouver ce code sur un site :

<html>
<head>
<style type="text/css">
#weak, #medium
{
	border-right:solid 1px #DEDEDE;
}

#sm
{
	margin:0px;
	padding:0px;
	height:14px;
	font-family:Tahoma, Arial, sans-serif;
	font-size:9px;
}

#sm ul
{
	border:0px;
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:center;
}

#sm ul li
{
	display:block;
	float:left;
	text-align:center;
	padding:0px 0px 0px 0px;
	margin:0px;
	height:14px;
}

.nrm
{
	width:84px;
	color:#adadad;
	text-align:center;
	padding:2px;
	background-color:#F1F1F1;
	display:block;
	vertical-align:middle;
}

.red
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FF6F6F;
	display:block;
	vertical-align:middle;
}

.yellow
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#FDB14D;
	display:block;
	vertical-align:middle;
}

.green
{
	width:84px;
	color:#FFFFFF;
	text-align:center;
	padding:2px;
	background-color:#A0DA54;
	display:block;
	vertical-align:middle;
}
</style>
<script type="text/javascript">
function evalPwd(s)
{
	var cmpx = 0;
	
	if (s.length >= 6)
	{
		cmpx++;
		
		if (s.search("[A-Z]") != -1)
		{
			cmpx++;
		}
		
		if (s.search("[0-9]") != -1)
		{
			cmpx++;
		}
		
		if (s.length >= 8 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
		{
			cmpx++;
		}
	}
	
	if (cmpx == 0)
	{
		document.getElementById("weak").className = "nrm";
		document.getElementById("medium").className = "nrm";
		document.getElementById("strong").className = "nrm";
	}
	else if (cmpx == 1)
	{
		document.getElementById("weak").className = "red";
		document.getElementById("medium").className = "nrm";
		document.getElementById("strong").className = "nrm";
	}
	else if (cmpx == 2)
	{
		document.getElementById("weak").className = "yellow";
		document.getElementById("medium").className = "yellow";
		document.getElementById("strong").className = "nrm";
	}
	else
	{
		document.getElementById("weak").className = "green";
		document.getElementById("medium").className = "green";
		document.getElementById("strong").className = "green";
	}
}
</script>
</head>

<body>
<form>
<input type="text" size="24" onkeyup="evalPwd(this.value);" /><br />
<div id="sm">
<ul>
<li id="weak" class="nrm">Faible</li>
<li id="medium" class="nrm">Moyen</li>
<li id="strong" class="nrm">Fort</li>
</ul>
</div>
</form>
</body>

voici le lien : http://www.editeurjavascript.com/script ... _3_690.php

Le problème est que je ne voudrais pas mettre des mots tels que : Faible, moyen ou fort. Mais des images tel : pass0.jpg, pass1.jpg, pass2.jpg, pass3.jpg et pass4.jpg

J'explique, ce que je voudrais c'est que au départ, il n'y ai rien qui s'affiche.
Ensuite, au lieu que "faible" devienne rouge, et bien ce soit cette image qui apparaisse : pass0.jpg.
Et ensuite, l'image pass0.jpg disparrait et une autre apparait : pass1.jpg et ainsi de suite jusqu'a : pass4.jpg

Merci de votre aide.

22 mai 2007, 14:07

Personne ne sait?

22 mai 2007, 14:32

Il faut agir sur le style un peu comme c'est déjà le cas.

Voici le même script un peu modifié pour te donner un autre exemple. Pour utiliser des images, tu pourrais utiliser une image d'arrière-plan et modifier cette image selon le degré atteint.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<style type="text/css">
/*<![CDATA[*/
#weak, #medium
{
   border-right:solid 1px #DEDEDE;
}
#sm
{
   margin:0px;
   padding:0px;
   height:14px;
   font-family:Tahoma, Arial, sans-serif;
   font-size:9px;
}
#sm ul
{
   border:0px;
   margin:0px;
   padding:0px;
   list-style-type:none;
   text-align:center;
}
#sm ul li
{
   display: block;
   visibility: hidden;
   float:left;
   text-align:center;
   padding:0px 0px 0px 0px;
   margin:0px;
   height:14px;
}
.nrm
{
   width:84px;
   color:#adadad;
   text-align:center;
   padding:2px;
   background-color:#F1F1F1;
   display:block;
   vertical-align:middle;
}
.red
{
   width:84px;
   color:#FFFFFF;
   text-align:center;
   padding:2px;
   background-color:#FF6F6F;
   display:block;
   vertical-align:middle;
}
.yellow
{
   width:84px;
   color:#FFFFFF;
   text-align:center;
   padding:2px;
   background-color:#FDB14D;
   display:block;
   vertical-align:middle;
}
.green
{
   width:84px;
   color:#FFFFFF;
   text-align:center;
   padding:2px;
   background-color:#A0DA54;
   display:block;
   vertical-align:middle;
}
/*]]>*/
</style>
<script type="text/javascript">
/* <![CDATA[ */
function evalPwd(s)
{
   var cmpx = 0;
   var faible = document.getElementById("weak");
   var moyen  = document.getElementById("medium");
   var fort   = document.getElementById("strong");
   if (s.length >= 6)
   {
      cmpx++;
      if (s.search("[A-Z]") != -1)
      {
         cmpx++;
      }
      if (s.search("[0-9]") != -1)
      {
         cmpx++;
      }
      if (s.length >= 8 || s.search("[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]") != -1)
      {
         cmpx++;
      }
   }
   if (cmpx == 0)
   {
      faible.className = "nrm";
      moyen.className  = "nrm";
      fort.className   = "nrm";
      faible.style.visibility = 'hidden';
      moyen.style.visibility = 'hidden';
      fort.style.visibility = 'hidden';
   }
   else if (cmpx == 1)
   {
      faible.className = "red";
      moyen.className  = "nrm";
      fort.className   = "nrm";
      faible.style.visibility = 'visible';
      moyen.style.visibility = 'hidden';
      fort.style.visibility = 'hidden';
   }
   else if (cmpx == 2)
   {
      faible.className = "yellow";
      moyen.className  = "yellow";
      fort.className   = "nrm";
      faible.style.visibility = 'visible';
      moyen.style.visibility = 'visible';
      fort.style.visibility = 'hidden';
   }
   else
   {
      faible.className = "green";
      moyen.className  = "green";
      fort.className   = "green";
      faible.style.visibility = 'visible';
      moyen.style.visibility = 'visible';
      fort.style.visibility = 'visible';
   }
   document.getElementById('valeurmdp').innerHTML = 'Valeur courante : '+ cmpx +'.';
}
/* ]]> */
</script>
    <title></title>
  </head>
  <body>
    <form action="./" method="post">
      <div id="sm">
        <input type="text" size="24" onkeyup="evalPwd(this.value);" /><br />
        <ul>
          <li id="weak" class="nrm">Faible</li>
          <li id="medium" class="nrm">Moyen</li>
          <li id="strong" class="nrm">Fort</li>
        </ul>
      </div>
    </form>
    <p id="valeurmdp" style="clear: both;">&nbsp;</p>
  </body>
</html>

Code de puissance de mot de passe

Qui est en ligne