nyroBlog
Bannière NyroBlog, par Dal's
Image par Dal's - ?

Tag : Standards


JavaScript : Faire une infobulle

Pour un site en construction, j'ai du mettre en place une infobulle sur des images.

J'ai d'abord commencé par chercher à droite à gauche ce qui se faisait, pour voir si je ne pouvais pas trouver un script à réutiliser tout simplement.

Après bien des tests, aucun ne fonctionnait dans mon cas, dans un site tout en Div/CSS.

Donc, j'ai commencé par rechercher comment déplacer une div par rapport à la souris. J'ai trouvé ce dont j'avais besoin sur Tout Javascript. Enfin presque : le seul soucis de ce code, c'est qu'il ne tient pas compte des barres de défilement; autrement dit, si vous descendez dans votre page, votre 'infobulle' changera de place, mais en haut, et donc vous ne la verrez pas. Voici donc le code modifié :

function mouseMove (evt) {
	var x = 0;
	var y = 0;
	var plusX = 0;
	var plusY = 0;
	if (document.layers) {
		x = evt.x;
		y = evt.y;
		plusX = window.pageXOffset;
		plusY = window.pageYOffset;
	} else	if (document.all) {
		x = event.clientX;
		y = event.clientY;
		plusX = document.body.scrollLeft;
		plusY = document.body.scrollTop;
	} else if (document.getElementById) {
		x = evt.clientX;
		y = evt.clientY;
		plusX = window.pageXOffset;
		plusY = window.pageYOffset;
	}
	document.getElementById("popBox").style.left = (x+plusX+15)+"px";
	document.getElementById("popBox").style.top = (y+plusY+5)+"px";
} 
if (document.layers)
	document.captureEvents(Event.MOUSEMOVE); 
if (document.layers || document.all) 
	document.onmousemove = mouseMove; 
if (document.addEventListener) 
	document.addEventListener('mousemove', mouseMove, true);

Vous l'aurez compris, j'ai placé juste derrière mon une div vide avec comme id popBox, qui a comme attribut CSS position: absolute (et d'autres si vous en avez besoin...)

C'est quasiment fini. En effet, j'ai à ma disposition une div qui suit la souris tout le temps. Il ne me reste plus qu'à la cacher par défaut, et à l'afficher au survol des éléments qui doivent avoir une infobulle, et à y insérer le contenu que je veux. Dans mon cas, il s'agissait d'afficher un zoom sur une image au survol de sa vignette. J'ai donc décider d'afficher cette image dans une div invisible; de cette façon, le chargement de l'image commence avant que la personne passe dessus l'image. Et lorsque je dois afficher le contenu, je copie simplement le contenu de la div cachée dans ma div popbox. Le code :

function montre(id) {
 var elt = document.getElementById('popBox');
 elt.style.display = "block";
 elt.innerHTML = document.getElementById(id).innerHTML;
}
function cache() {
 var elt = document.getElementById('popBox');
 elt.style.display = "none";
}

La fonction montre est appellée sur le onMouseOver de l'image, avec en paramètre l'id de la div à recopier. La fonction cache est quant à elle appelée sur le onMouseOut de la même image.

Et voilà, une belle infobulle qui fonctionne super bien avec IE et FireFox.

Etat du développement Web 2006/2007

Dans une étude récente publiée par SitePoint et Ektron, on voit qu'Ajax prend de plus en plus de place, et qu'il tendrai même à être plus utliser que Flash.

On peut y voir aussi que plus de la moitié valide la majeure partie de leur création, près de 40% utilisent DreamWeaver (Ouch...) 67% utilise le PHP, 26% ont un blog, etc...

Bref, consultez l'extrait gratuit en ligne, 25 pages de graphiques de ce style, pour savoir quelles sont les tendances...

Via le monde informatique

FireFox 2 Beta 2 est sorti

La dernière version Beta de FireFox 2 est sortie cette nuit.

La version finale est prévue pour très bientôt, ce mois-ci ?...

Edit : Je viens de lire que suite à la découverte de pas mal de bug, la sortie est prévue pour le 24 octobre.

IE7 respectra mieux les CSS

Du moins, c'est qu'ils annoncent, en disant :

We understand that we are far from being done and we know we have still a lot of work ahead of us. IE 7 is a stepping stone in our effort to improve our standards compliance (especially around CSS)

(Nous comprenons bien que nous sommes loins d'en avoir fini et qu'il nous reste beaucoup à faire. IE 7 est un premier pas en vue d'améliorer notre conformité aux standards, en particulier en ce qui concerne CSS)

Pourra-t-on enfin utiliser les CSS, sans être obliger de vérifier l'aspect du site sur IE et Firefox ?