[Réglé] Fausse popup mais pas vraiment une infobulle

Bonjour à tous,
J'ai un petit soucis, la réponse doit être simple mais, en vain, je n'arrive pas à trouver.
Je voudrais faire des sortes d'infobulles comme celles présentées ici (une popup accessible) mais à la différence près que je voudrais qu'elle s'affiche dans un endroit fixe de la page, et non pas à coté du pointeur.

Exemple concret sur cette page :
Atelier Territoires et Paysages lien enlevé
Mon "client" voudrais que la description qui s'affiche au survol, s'affiche désormais dans le "blanc" en dessous, et au moment du clic (non plus au survol)

Je pense que la solution doit être simple et présente quelque part sur la toile mais je n'ai pas réussi à la trouver malgré de nombreuses recherches . Si vous avez des idées, même peut-être seulement en CSS par un jeu de caché/pas caché c'est peut-être possible ?

D'avance, merci.
Modifié par Zappe (02 Nov 2007 - 17:58)

Salut Zappe.

Petit topo sur le script en question:
- onmousemove sur document qui execute la fonction à chaque appel (!)
- incompatible xhtml (fonction write)
- "Une popup accessible" ???

Bref jette le, en plus d'après ta demande, il ne t'est d'aucune utilité. Ce que je te conseille, pour rester le plus ciblé et léger possible :
- mettre des div en display none en dessous de tes liens, chacun contenant une description.
- faire une petite fonction globale, répondant au onclick des tes liens qui prend en paramettre l'id du div à afficher.
- facultatif: pour être plus robuste, faire un petit objet qui encapsule ce comportement, et auquel tu peux ajouter des "descriptions" :

// en français ^^
<p><a href="javascript: Descriptions.afficher('ok');">ok</a></p>
<p><a href="javascript: Descriptions.afficher('no');">no</a></p>
<p><a href="javascript: Descriptions.afficher('ko');">ko</a></p>

<div id="ok" style="display: none;">okkkkkkkk</div>
<div id="no" style="display: none;">noooooooo</div>
<div id="ko" style="display: none;">kkkkkoooo</div>

<script type="text/javascript">
	var Descriptions = new function() {
		this.descriptions = [];
		this.actuel = null;
		this.ajouter = function(idElement) {
			var element = document.getElementById(idElement);
			if(element) this.descriptions.push(element);
		}
		this.afficher = function(idElement) {
			if(this.actuel == idElement) {
				document.getElementById(idElement).style.display = 'none';
				this.actuel = null;
				return;
			}
			var element = null;
			for(var i = 0; i < this.descriptions.length; i++) {
				this.descriptions[ i ].style.display = 'none';
				if(this.descriptions[ i ].id == idElement) {
					element = this.descriptions[ i ];
				}
			}
			if(element) {
				element.style.display = 'block';
				this.actuel = idElement;
			}
		}
	};
	
	Descriptions.ajouter('ok');
	Descriptions.ajouter('no');
	Descriptions.ajouter('ko');
</script>

PS: s'agissant d'un singleton, pas la peine de prototyper... On passe directement le comportement dans le constructeur.

En espérant que ça puisse t'aider.

Salut Ze Nex,
En effet ça m'aide beaucoup !
Merci beaucoup. J'ai testé ça vite fait et ça a l'air d'être ce que je cherchais. Je vais regarder ca plus dans le détail dans l'heure.

Edit :: C'est exactement ca : merci infiniement.

Merci encore
Modifié par Zappe (02 Nov 2007 - 17:59)