new!
|
|
|
 |
| > DIV déroulante à l'affichage |
[ Posté par RPGamer ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 17-06-2008 à 21:22 | 1 messages ]
|
Bonjour à tous,
J'ai récupéré un script permettant d'afficher une div puis de la masquer avec un effet de déroulement grâce à un clique de souris.
Seulement, j'aimerais pouvoir faire en sorte que cette div se déploie à l'affichage de la page avec son animation.
Voici le code JavaScript concerné.
function showBento(bento){
var objet = document.getElementById('box');
if(objet.style.display == "none" || !objet.style.display){
objet.innerHTML = '<table align="center" width="592" height="170" cellspacing="0"><tbody><tr>
<td align="center"><a href="javascript:;" onclick="javascript:window.open(\'http://www.otaku-attitude.net/aisuki/aisuki.php\',\'Radio\',\'toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no,copyhistory=no,top=30,left=0,width=389,height=60\')">
<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/aisuki.jpg" alt="Aisuki" border="0" /></a></td>
<td align="center"><a href="http://www.otaku-attitude.net/site/index-283-0.html">
<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/faq.jpg" alt="FAQ" border="0" /></a></td></tr>
<tr><td align="center"><a href="http://www.otaku-attitude.net/forum/forum-71-1.html">
<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/demande.jpg" border="0" alt="Demande" /></a></td>
<td align="center"><a href="http://www.otaku-attitude.net/site/index-284-0.html">
<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/aidez-nous.jpg" border="0" alt="Aidez-nous" /></a></td></tr></tbody></table>';
objet.style.display = "block";
objet.style.overflow = "hidden";
bento.innerHTML = '<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/masquer.jpg" border="0" alt="Masquer" />';
var hFinal = 160;
var hActuel = 0;
var timer;
var fct = function ()
{
hActuel += 10;
objet.style.height = hActuel + 'px';
if( hActuel > hFinal)
{
clearInterval(timer);
objet.style.overflow = 'inherit';
}
};
fct();
timer = setInterval(fct,10);
} else if(objet.style.display == "block"){
var hFinal = 0;
var hActuel = 160;
var timer;
var fct = function ()
{
hActuel -= 10;
objet.style.height = hActuel + 'px';
if( hActuel <= 10)
{
clearInterval(timer);
objet.style.display = "none";
}
};
fct();
timer = setInterval(fct,10);
objet.innerHTML = '';
bento.innerHTML = '<img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/afficher.jpg" border="0" alt="Afficher" />';
}
} |
|
Et son appel dans XHTML :
<div align="center" style="border: 1px dashed #587b9e; width: 592px;">
<div style="cursor: pointer;" onclick="showBento(this)"><img src="http://www.otaku-attitude.net/site/themes/v2/images/accueil/masquer.jpg" border="0" alt="Afficher" /></div>
<div id="box" style="display: none;"></div>
</div> |
|
Le résultat donne ça : http://www.otaku-attitude.net/site/
J'ai testé le code suivant : <body onload="showBento('bento');"> après avoir modifié la div appelante pour : | <div align="center" style="border: 1px dashed #587b9e; width: 592px;"><div style="cursor: pointer;" onclick="showBento(this)" id="bento"> |
|
J'ai aussi testé | document.onload = showBento('bento'); |
|
sans succès.
Est-ce que vous auriez une idée pour règler ce problème ?
[Message édité par RPGamer le 17-06-2008 à 21:29]
________________
Merci d'avance,
RPGamer
|
|
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
