Bonjour à tous, je souhaite créer un organigramme. Voilà ce que j'ai pu faire pour le moment en m'inspirant de certains sites visités.
Seul problème c'est que ça bug que ce soit sous IE ou Firefox.
Au passage de la souris je souhaite que l'image de la fonction ne disparaisse pas et donc qu'aucun décalage ne se creé.

Voici le javascript :

function switchImg(elmt) {
	defaut = elmt.src;
	if (defaut.match('-on.gif')) { 	
		org = defaut.substring(0, defaut.indexOf('-on.gif'));	
		elmt.src=org+'.gif';
	}
	else {
		org = defaut.substring(0, defaut.indexOf('.gif'));	
		elmt.src=org+'-on.gif';
	} 
}

orga = new Array ('', 'pt', 'vpte', 'vpt', 'mc');

function switchDisplay(tab, id) {
	for (i = 1; i < eval(tab).length; i++) {
		document.getElementById(eval(tab)[i]).style.display = 'none';
	}

	if (id > 0)
		document.getElementById(eval(tab)[id]).style.display = 'block';
}

et le xhtml :

<ul>
<li><img src="images/btn_orga_pt-on.gif" style="cursor: pointer;" onMouseOver="switchImg(this); switchDisplay('orga', 1);" onMouseOut="switchImg(this);"/></li>
<li><img src="images/btn_orga_vpte.gif" style="cursor: pointer;" onMouseOver="switchImg(this); switchDisplay('orga', 2);" onMouseOut="switchImg(this);"/></li>
<li><img src="images/btn_orga_vpt.gif" style="cursor: pointer;" onMouseOver="switchImg(this); switchDisplay('orga', 3);" onMouseOut="switchImg(this);"/></li>
<li><img src="images/btn_orga_mc.gif" style="cursor: pointer;" onMouseOver="switchImg(this); switchDisplay('orga', 4);" onMouseOut="switchImg(this);"/></li>
</ul>

<div id="pt" style="display: block;"><img src="images/photo_orga_pt.gif"/>
<p>Albert</p>
</div>

<div id="vpte" style="display: none;"><img src="images/photo_orga_vpte.gif"/>
<p>Roger</p>
</div>

<div id="vpt" style="display: none;"><img src="images/photo_orga_vpt.gif"/>
<p>Bernard</p>
</div>

<div id="mc" style="display: none;"><img src="images/photo_orga_mc.gif"/>
<p>François</p>
</div>

Donc si jamais quelqu'un pouvait m'éclairer dans la faille du code ça serait super sympa.
Merci

J'ai pas bien compris ce qu'il devait se passer au survol...

Mais utiliser eval() c'est pas super, donc pourquoi n'utilises-tu pas directement la variable... ?

var orga = new Array ('', 'pt', 'vpte', 'vpt', 'mc');

function switchDisplay(id) {
	for (i = 1; i < orga.length; i++) {
		document.getElementById(orga[i]).style.display = 'none';
	}

As-tu vraiment besoin d'envoyer le nom de l'array en paramètre ?

Au survol de la souris un div différent s'affiche avec le carré de couleur et le prénom. Le bug se situe dans la liste lorsque la souris survole un bouton, celui-ci clignote et/ou ne s'affiche pas (en fonction du navigateur). Pour le code en javascript c'est du copier coller avec un peu de bidouille (ne connaissant pas ce langage, j'ai peut être fait une erreur).

Mais quand on survole cette image :
images/btn_orga_pt-on.gif
C'est bien celle-ci qui doit alors apparaître, non ?
images/btn_orga_pt.gif

Quand tu survoles images/btn_orga_pt-on.gif c'est images/photo_orga_pt.gif qui s'affiche en dessous de la liste (à noter que c'est l'affiche par defaut de la page), ensuite quand tu survoles images/btn_orga_vpte.gif c'est images/phot_orga_vpte.gif qui s'affiche à la place de la précédente

Mais dans ton code, tu modifies le src de l'image survolée... alors qu'apparemment, ce n'est pas ce que tu recherches...

Mea culpa, je viens de m'apercevoir de l'erreur grâce à ta remarque. Les img de la liste sont des boutons et changent au survol. Or je n'avais pas créé les boutons au survol du coup tout se décalait.
Désolé pour la faute d'étourderie et encore merci

Je me disais aussi Mais t'inquiète, y'a pas de mal !

Pense à mettre le sujet en résolu (grâce au lien en bas de page ! )