Tutoriel - Création PopUp

 

 

 

Cliquez sur le lien texte popup, pour ouvrir une fenêtre. Dans mon exemple c'est un fichier texte contenant du code CSS, mais vous pouvez y mettre bien d'autres choses(exemples), ce qui éviterait les problèmes engendrés par du copier/coller ou des soucis de taille de tableau, image ou autres.

 

 

 

 

 

Une fois la Popup crée, par curieusité après un clic-droit sur le lien sélectionné, ouvrez l'éditeur de lien et regardez l'onglet "Evenements".

onclick".

 

window.open('https://static.blog4ever.com/2008/05/205392/artfichier_205392_109483_201004134630212.css','CodeSourceCSS','scrollbars=yes,resizable=yes,width=450,height=400,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-200)+'');return false;

Tout ce charabia créé automatiquement pour vous et sans souci, c'est quand même formidable!!!

 

 

Il est également possible en faisant un lien sur une image d'ouvrir une popup...

 

 

 

 

 

 

 

Petit avatar PapyClicCette image réactive utilise également les événements Javascript, passez la souris sur mon avatar et regardez le code ci-dessous.

<img style="margin: 5px; border: 0pt none; float: left;" title="Sans pr&eacute;tention, juste pour tester le syst&egrave;me {;-(o)))))" onmouseover="this.src='http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/042.gif';" onmouseout="this.src='http://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/papyclic_32.jpg';" src="https://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/papyclic_32.jpg" alt="Petit avatar PapyClic" width="32" height="32" />

Dans ce code vous avez, 2 événements, au survol de la souris "onmouseover" et quand la souris sort de la zone de l'image "onmouseout".

 

Voir la procédure détaillée sur mon article lien

 

J'ai également utilisé ces événements dans la présentation des étapes de la création de PopUp(en haut), avec un script que je détaillerai plus tard. Au cours de la rédaction de mes articles sur le nouveau composeur, j'essaie de tester tout ce que l'on peut faire avec cet outil ou tout ce qu'il permet de faire, en espérant décider ceux qui hésitent encore à l'adopter.

 

Une de mes demos Un fichier PDF

 

 

Petite précision!!! si vous regardez la "FAQ Blog4ever" et que votre gestion est ouverte, vous serez dans votre gestion... pas de problème, vous êtes le seul à pouvoir être dans votre gestion, chacun de mes visiteurs sera dans sa gestion ou celle qui sera ouverte sur son ordinateur et dans le même navigateur.

 

Voilà d'autres exemples viendront et des explications complémentaires.

 


 



28/09/2010
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso