Changement de div au passage de la souris

bonjour,

Le but de ce petit bout de code c'est que quand je passe sur une image une info apparaisse en haut de l'image.

pour faire simple j'ai deux id, monbloc, infobloc.

"monbloc" contient l'image et "infobloc" contient l'info sur l'image (par défaut "infobloc" est en "visibility:hidden" dans mon css).

j'ai créer une fonction javascript qui m'affiche avec un petit effet "infobloc" quand je passse avec la souris sur "monbloc".

le soucis c'est quand je passe avec la souris sur "infobloc" il me relance l'effet et quand je retourne sur l'image il me relance encore une fois l'effet.

Moi je veux juste que quand je passe avec ma souris sur l'image il m'affiche l'info et que quand je passe sur l'info il reste afficher sans me relancer la fonction afficher.

Au final quand je quitte avec la souris l'id "monbloc", "infobloc" disparait et ça sa marche.

ex html :

<div id="monbloc" onmouseover="javascript:afficher('infobloc')">
<div id="infobloc">moninfo</div>
</div>

function afficher(id)
{
var id;
document.getElementById(id).style.visibility="visible";
}

Si vous comprenez pas dites-moi.

Merci ^^

Du CSS suffit:

<dl id="monbloc">
	<dt><img /></dt>
	<dd>Description</dd>
</dl>

dl>dd{
	display:none;
}

dl:hover>dd{
	display:block;
}

Le javascript est juste utile pour la compatibilité avec IE6 et moins qui ne supportent pas la pseudo-class :hover sur d'autres balises que a. Donc un petit commentaire conditionnel pour masquer le code suivant a tous ce qui est inférieur à IE7 :

var init(){
	var display=function(dl, display){
		return function(){
			var dd=dl.getElementsByTagName('dd')[0];
		
			if(dd){
				if(display) dd.style.display='block';
				else dd.style.display='none';
			}
		}
	}

	var items=document.getElementById('monbloc');
	var maxItems=items.length

	for(var i=0; i<maxItems; i++){
		items[i].attachEvent('onmouseover', display(items[i], true));
		items[i].attachEvent('onmouseout', display(items[i], false));
	}
}

window.attachEvent('onload', init);

[/i][/i][/i][/i]
Modifié par MacIntoc (09 Oct 2008 - 11:08)