11548 sujets

JavaScript, DOM et API Web HTML5

Hello
je souhaiterai faire un onglet qui se déroule depuis le bas d'un calque DIV pour afficher des informations au passage de la souri puis cacher cette onglet quand la sourie ressort:
voila ce que j'ai fait :
Le xhtml:

<div class="element">
	<p>
	titre
	bla bla bla 
	bla bla bla 
	bla bla bla 
	</p>
</div>
<div class="element">
	<p>
	autre titre
	bli bli bli
	bli bli bli
	bli bli bli
	</p>
</div>


le CSS:

div.element{
	float:left;
	width:132px;
	height:181px;
	float:left;
	position:relative;
	left:5px;
}

div.element p{
	position:absolute;
	bottom:0;
	left:0;
	width:127px;
	height:25px;
	background:transparent url(boite/fond_titre_element.gif) no-repeat top left;
	margin:0;
	overflow:hidden;
}


le javascript:

function fnAfficheInfoElement()
{
	aPinfo=this.getElementsByTagName('p');
	// la première balise P contenu dans le DIV
	aPinfo[0].style.height="105px";
}
function fnCacheInfoElement(sId)
{
	aPinfo=this.getElementsByTagName('p');
	// la première balise P contenu dans le DIV
	aPinfo[0].style.height='25px';
}

window.onload=function()
{
	var sDiv="";
	// récupération des elements DIV de la Page
	aDiv=document.getElementsByTagName('div');
	for(var i=0;i<aDiv.length;i++)
	{
		// on recherche les balises DIV ayant pour class "element"
		if(aDiv[i].className=="element")
		{	oDivTemp=aDiv[i];
			// on attribue les comportement
			oDivTemp.onmouseover=fnAfficheInfoElement;
			oDivTemp.onmouseout=fnCacheInfoElement;
		}
	}

}


ca marche tres bien sauf que j'aimerai que l'ouverture et la fermeture se fasse progressivement pas d'un coup sec comme actuellement.
j'imagine qu'il faut utiliser un setInterval ou setTimeout mais je seche.
si vous avez une idée.
je sais qu'il existe des bibliotheque mais je ne veux pas surchrger mon site

Amicelement Smiley lol [/i][/i]
Modifié par khoudj (08 Jan 2008 - 19:57)
Salut,
je ne sais pas si cet effet et trés adapté a un onglet, si tu passes rapidement d'un onglet à l'autre il faut que le premier finisse de disparaitre pour que la second apparaisse sinon il vat y avoir une drôle de superposition. Donc cela risque d'être un peu long surtout si le changement se fait avec un evenement aussi sensible que onmouseover / onmouseout.

Peut-être qu'un effet de transition "fade-in" / "fade-out" (transparence progressive) rapide serait plus adapter au format onglet.
Modifié par matmat (08 Jan 2008 - 21:48)
peu importe l'effet, ce qui m'intéresse c'est plutôt son coté "progressif".
de toute façon, la durée d'ouverture et fermeture sera tres courte et c'est juste pour afficher des informaions complementaire genre 2 à 3 lignes
Amicalement