fastclemmy.com

Pour faire suite à un article d'Openweb sur des pop-ups intelligentes et accessibles, j'ai voulu pousser un peu plus loin la logique en déclinant une version "non-intrusive".

"Non-intrusif", derrière ce terme barbare se cache une nouvelle philosophie sous-tendant l'utilisation de javascript. Que celui-ci soit activé ou non chez votre visiteur, votre site doit pouvoir fonctionner : javascript pour l'inutile et non pour l'indispensable. L'exemple d'Openweb le démontre bien : l'utilisation d'une pop-up n'est pas indispensable, elle est possible pour les gens utilisant javascript, mais le lien est simplement cliquable pour tous.

Seulement l'article d'Openweb fait l'impasse sur une autre nouvelle approche que tout bon concepteur web doit intégrer dans ses bonnes pratiques : la séparation contenu/interactivité. Vous êtes sans doute déjà familier avec le concept de la séparation structure/présentation : la structure et le contenu d'un document se trouvent dans le fichier HTML tandis que toutes les informations de présentation sont spécifiées dans la feuille de style. Séparer l'interactivité (gérée par javascript) du contenu revient de la même manière à :

  • mettre toutes les fonctions dans un fichier javascript séparé (*.js)
  • retirer tous les appels à ces fonctions dans le fichier HTML (attributs onmouseover, onclick, etc.)

Reprenons donc l'exemple d'Openweb :

<a href="/img/logo.png" onclick="window.open(this.href, 'exemple', 'height=200, width=400, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;">Mon lien</a>

En donnant un id à notre lien, on se donne non seulement la possibilité de le styler avec CSS, mais de le manipuler facilement avec javascript. Notre HTML se résume donc maintenant à :

<a id="monLien" href="/img/logo.png">Mon lien</a>

Pour appeler notre fonction de pop-up, il ne faut pas oublier de rajouter dans la balise <head> de notre document HTML :

<script type="text/javascript" src="outils.js"></script>

Attaquons maintenant la fonction javascript proprement dite que nous enregistrerons dans un fichier "outils.js" :


function zoom() {
	// on récupère l'adresse vers laquelle on pointe dans le lien
	var lienPrecedent = document.getElementById("monLien").href;
	
	// on fixe une taille pour la pop-up
	var largeur = 100;
	var hauteur = 200;
	
	// on fixe les coordonnées pour centrer la pop-up
	var gauche = ( screen.width - largeur ) / 2;
	var haut = ( screen.height - hauteur ) / 2;

	// on ouvre la pop-up avec les bons paramètres
	var urlImage = lienPrecedent;
	var nomFenetre = "zoomModele";
	var options = "left="+gauche+"px,top="+haut+"px,width="+largeur+",height="+hauteur+",toolbar=0,resizable=0";
	window.open(urlImage, nomFenetre, options);
	
	// on empêche le lien de s'ouvrir en double en plus de la pop-up
	return false;
}

function initOnclick() {
	// si la page contient le lien avec l'id "monLien"
	if(document.getElementById("monLien")) {
	
		// on lance la fonction zoom au clic sur l'élément "monLien"
		document.getElementById("monLien").onclick = function () { return zoom();};
	}
}

// on initialise le comportement onclick au chargement de la page
window.onload =	function () {initOnclick()};

Et voilà le résultat ! Bien entendu, l'exemple est ici limité, libre à vous de modifier la fonction pour la rendre plus générique ou plus complète...

#javascript

Vos commentaires

fastclemmy - site -
Un merci à Znarf pour le "return", il comprendra ;-)

Fred Bird - site -
Et vive la semantique...

François - site -
Justement j'allais écrire un commentaire me plaignant du non-crédit ;-)

mauriz - site -
L'utilisation d'un classe "popup" (par exemple) serait bien aussi non? On scanne les liens, on regarde si ce sont des liens "popup" et on leur affecte le comportement si c'est la cas. Ca simplifie les chose s'il y'a plusieurs liens popup dans une même page :)

ElMoustiko - site -
J'avais déjà fait ce système et justement avec l'utilisation des class comme le propose mauriz :
http://www.elmoustikoblog.net/tutoriels/js/lien_extern/
J'ai aussi fait une adaptation qui gère la class popup et la class blank, donc si la class est popup on ouvre une image par exemple dans une nouvelle fenetre aux dimensions de l'image, si la class est blank, on ouvre le lien dans une nouvelle fenêtre à la manière de l'exemple d'openweb mais en extrayant le comportement JavaScript.
Sur cybercodeur, il y a aussi un exemple :
http://www.cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmessage=1088

nima -
Et si on laissait tomber les popup tout simplement ?

ElMoustiko - site -
Bah c'est tout de même interessant dans certains cas ;) Par exemple, tu ouvres une fenêtre popup pour fournir une aide à une action sur la page principale. Pour ouvrir simplement des images d'une galerie on aime ou on aime pas (moi j'aime pas) mais ça peut servir !

Mais dans le fond je suis d'accord, laissons le visiteur choisir !
Mais vu que tout le monde n'est pas d'accord, il peut être interessant de fournir des solutions les plus profitable à tous possible, nan ?

ps > Une petite checkbox "se souvenir des infos" serait appréciable ;)

Nicolas -
Et si t as plusieurs popups sur cette page ?

le id="monlien" est pas ce qu il y a de plus pratique.

et si tu en met plusieurs .... faut gérer ca dans le JS ... Hum pas super pratique.

mais bon l idée est surement à creuser.

Nicolas

Xavier -
C'est bien joli tout ça, mais ceux qui ne veulent pas ouvrir de popups ils font quoi ?

Pourquoi ne pas imaginer une petite checkbox "Ouvrir les liens dans une popup" que le visiteur aurait le loisir de cocher ou non selon ses désirs ? Là on approcherait AMHA sérieusement de la popup idéale : celle désirée et désirable !

Serait-ce si compliqué de laisser le choix au visiteur ?

fastclemmy - site -
@nicolas > Comme je le disais dans mon log, l'exemple donné n'est en effet adapté que dans le cas précis que j'ai rencontré, on peut rendre la fonction plus générique avec un getElementByClassName par exemple...

@xavier > Ceux qui ne veulent pas ouvrir de popups peuvent toujours cliquer avec le bouton du milieu pour ouvrir le lien dans un nouvel onglet que dans une pop-up par exemple. Ce qui n'est souvent pas possible dans les façons de faire les liens vers des pop-ups "à l'ancienne"...

Nicolas -
@clemmy -> no pb j avais bien compris le principe t inquiete :-) c est pour cette raison que je dis que c ets à creuser sans aucun doute. Mais au final - dans l etat actuel des choees - je trouve l implementation de openweb plus pratique et finalement assez voire plus portable.

Je vais y reflechir. Si je trouve plus "mieux" je t en posterai ici mes résultats.

En tout cas merci pour tes reflexions.

Nicolas

Ajouter votre commentaire