Salut,
Je te laisse un exemple un peu plus accessible... même si ce n'est pas forcémment le top...
Ca évitera que tu te rencardes sur des bibliothèques un peu trop lourdes pour ce genre de chose...
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
@media screen, projection {
form { background-color: #DDD; color: #000; width: 38em; }
form label { line-height: 2em; margin: 0 10px; }
}
/*]]>*/</style>
<script type="text/javascript">//<![CDATA[
/**
* Test du script
*/
try {
/**
* Création d'un objet
*/
var oO =
{
/**
* Chargement rapide
* @param func: (object) Fonction chargée au chargement de la page
*/
_FastLoadEvent:
function(func)
{
if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);
/*@cc_on @*/
/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function()
{
if(this.readyState === 'complete') func();
};
/*@end @*/
if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
},
/**
* Attache une fonction à un événement
* @param oElem: (object) Element générateur
* @param sEvType: (string) Evénement déclencheur
* @param fn: (function) Fonction attachée
* @param bCapture: (boolean) Mode de transmission
*/
_Connect:
function(oElem, sEvType, fn, bCapture)
{
oElem.addEventListener?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent?
oElem.attachEvent('on' + sEvType, fn):
false;
},
/**
* Obtention de l'élément qui génère l'événement
* @param e: (object) Evénement
* @return Element souhaité
*/
_GetTarget:
function(e)
{
var oTarget = e.target || e.srcElement;
if(oTarget.nodeType === 3) oTarget = oTarget.parentNode;
return oTarget;
},
/**
* Annulation de la transmission de l'événement au clic sur un élément
* @param e: (object) Evénement
* @return Annulation de la transmission de l'événément aux autres éléments
*/
_CancelClick:
function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
},
/**
* Contrôle d'affichage/masquage d'un élément à partir d'un lien
* @param sIdCont: (string) id du conteneur
* @param sId: (string) id de l'élément
*/
_CtrlDisplay:
function(sIdCont, sId)
{
var oElem = document.getElementById(sId),
oA = document.createElement('a'),
oTxt = document.createTextNode('Montrer');
oA.href = '#montrer';
oA.appendChild(oTxt);
document.getElementById(sIdCont).insertBefore(oA, oElem);
oO.HautTot = oElem.offsetHeight + 10;
oElem.style.height = 0;
oElem.style.overflow = 'auto';
oO._Connect(oA, 'click', function(e) { oO._Display(oElem, e); return oO._CancelClick(e); }, false);
},
/**
* Affichage/masquage d'un élément
* @param oElem: (object) Element
* @param e: (object) Evénement
*/
_Display:
function(oElem, e)
{
var oTarget = oO._GetTarget(e);
if(oTarget.firstChild.data === 'Montrer')
{
oTarget.firstChild.data = 'Cacher';
oTarget.href = '#cacher';
oO._Deroule(oElem.id, 0, oO.HautTot, 5);
oO._ChgOpak(oElem.id, 0, 100, 200);
}
else
{
oTarget.firstChild.data = 'Montrer';
oTarget.href = '#montrer';
oO._Deroule(oElem.id, oO.HautTot, 0, 5);
oO._ChgOpak(oElem.id, 100, 0, 200);
}
},
/**
* Cross-browser sur l'opacité d'un élément
* @param opak: (integer) Valeur de l'opacité
* @param id: (string) id de l'élément
*/
_CrossOpak:
function(opak, id)
{
var oElemStyle = document.getElementById(id).style;
oElemStyle.opacity = (opak / 100);
oElemStyle.MozOpacity = (opak / 100);
oElemStyle.KhtmlOpacity = (opak / 100);
oElemStyle.filter = "alpha(opacity=" + opak + ")";
},
/**
* Modification de l'opacité d'un élément
* @param id: (string) id de l'élément
* @param opakStart: (integer) Opacité de départ
* @param opakEnd: (integer) Opacité d'arrivée
* @param ms: (integer) Temps
*/
_ChgOpak:
function(id, opakStart, opakEnd, ms)
{
var speed = Math.round(ms / 100);
var timer = 0;
var i;
if(opakStart > opakEnd)
{
for(i = opakStart; i >= opakEnd; i--)
{
setTimeout("oO._CrossOpak(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
else if(opakStart < opakEnd)
{
for(i = opakStart; i <= opakEnd; i++)
{
setTimeout("oO._CrossOpak(" + i + ",'" + id + "')", (timer * speed));
timer++;
}
}
},
/**
* Variation de hauteur progressive d'un conteneur
* @param id: (string) id de l'élément
* @param initHeight: (integer) hauteur de départ
* @param finalHeight: (integer) hauteur d'arrivée
* @param interval: (integer) Intervalle de répétition
*/
_Deroule:
function(id, initHeight, finalHeight, interval)
{
var oElem = document.getElementById(id);
if(!oElem) return;
if(typeof(initHeight || finalHeight || interval) != 'number') return;
if(oElem.movement) clearTimeout(oElem.movement);
if( !oElem.style.height ) oElem.style.height = parseInt(initHeight) + 'px';
var iDimY = parseInt(oElem.style.height);
if(iDimY == finalHeight) return;
if(iDimY < finalHeight)
{
var dist = Math.ceil((finalHeight - iDimY)/10);
iDimY = iDimY + dist;
}
if(iDimY > finalHeight)
{
var dist = Math.ceil((iDimY - finalHeight)/10);
iDimY = iDimY - dist;
}
oElem.style.height = iDimY + 'px';
var repeat = "oO._Deroule('" + id + "'," + initHeight + "," + finalHeight + "," + interval + ")";
oElem.movement = setTimeout(repeat, interval);
return;
}
};
/**
* Lancement du script
*/
oO._FastLoadEvent(function() { oO._CtrlDisplay('mondoc', 'monform'); });
}
/**
* Annulation du script s'il y a une erreur
*/
catch(e) {};
//]]></script>
</head>
<body>
<div id="mondoc">
<h3>Formulaire de connexion</h3>
<form id="monform" action="" method="post">
<div>
<label for="pseudo">Pseudo : </label>
<input type="text" id="pseudo" name="pseudo" />
<label for="mdp">Mot de passe : </label>
<input type="text" id="mdp" name="mdp" />
<input type="submit" id="submit" value="transmettre" />
</div>
</form>
</div>
</body>
</html>
<edit>J'ai rajouté un peu de doc dans le script et corrigé l'affichage sur IE... A première vue, ça paraît lourd mais ça pèse 15 fois moins que Prototype...</edit> Modifié par koala64 (08 Jan 2007 - 19:21)
, il faut adapter les temps de modification de l'opacité :
A moins que le compteur ne se soit emballé, je n'ai pas vu pire jusqu'alors... (le plus gros travail à mener étant du côté de tes images)
, c'est vraiment que j'aimerait qu'on me dise exactement quel code il faut mettre et ou, mais je veut bien essayer, comme tu dis quitte a faire des erreurs.