nyroBlog
Ban NyroBlog, by Jean-François
Image by Jean-François - ?

Tag: CSS


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.

Sorties Imminentes : Firefox2 et IE7

Les nouvelles versions des 2 navigateurs web les plus utilisés ont été faites quasiment en même temps.

D'un côté on s'apprête à fêter ça autour de quelques verres à Paris, et de l'autre, on va avoir une mise à jour de haute sécurité dans Windows Update.

Bref, attendons de voir ce que nous réserve chacun d'entre eux.

Je pense que l'avancement le plus intéressant sera celui de IE7 : avec le retard qu'il avait pris, il faut bien qu'il se rattrape.

  • Firefox2 : prévu aux alentours du 1er novembre
  • IE7 : prévu pour bientôt ?

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 ?