HtmlToText
papasti rubriques accueil a propos du blog actu contact vos droits communication logiciels hors sujet détente scripts, html et css sur eklablog pages manipuler les pdf configurer un serveur murmur derniers articles un nouveau blog. tuto: une boite déroulante en css3 + javascript faire un tooltip évolué générateur de css hadopi de flop en flop ! derniers visiteurs scripts bouton rv derniers commentaires meshlya : merci beaucoup pour cet article bien rédigé et très... kaya_nifaflobe : franchement c'est super simple avec ton tuto et j'ai appris... théo b : merci beaucoup pour cette explication !!! c'est très bien... guillaume geek : super tuto ! merci ! zen26 : bonsoir, un grand merci pour ce tuto parfaitement clair! je... statistiques 288202 pages vues tags site style rendre transform serveur zonage pirate rotate tete sketchup reference tetes telephone realiser simples vectoriel utilise word referencement rie google trouver tooltip javascript portable sismique blog vocal div possibilite voir tous les tags test ff commentaires un nouveau blog. par papasti dans accueil le 1 janvier 2014 à 22:14 voilà, me rendant compte qu'il m'est très plaisant de faire des tutos en particulier sur le javascript, j'ai décidé de recréer un blog qui ne sera axé que sur le html, le css et surtout le javascript. je vais essayer de le rendre ludique, sobre et clair. il comportera différentes rubriques consacrées à ces trois langages mais aussi une foire aux questions, un forum pour les demandes d'aide ainsi qu'une boite à outils que vous pourrez exploiter à loisir. (avec des codes prêts à l'emploi, des formulaires en ligne etc.) j'attends de le remplir un peu avant de le rendre public mais je ne manquerai pas de vous tenir informés de son avancement. 23 commentaires tuto: une boite déroulante en css3 + javascript par papasti dans accueil le 17 octobre 2011 à 15:31 une animation façon mootools, c'est ce que je vous propose aujourd'hui. on va pour cela utiliser les propriétés de transition du css3. ( ne fonctionne pas avec internet explorer ) mais le plus simple pour se rendre compte des possibilites est de tester. alors, passez votre souris sur les barres grisées ci-dessous. passez la souris ici pour voir le résultat une animation qui donne un effet plutôt sympa et réalisée sur la base de css3. a priori, cela n'est pas fonctionnel avec ie. j'ai ajouté un peu de javascript pour assurer le déroulé et l'enroulé de la zone de texte, le tout avec une unique fonction. un peu d'explications a chaque titre correspond une balise div qui contient 2 autres balises selon la structure suivante: <div id="zone1"> <div id="bandeau1">.....</div> <div id="textederoule1">...</div> </div> <div id="zone2"> <div id="bandeau2">.....</div> <div id="textederoule2">...</div> </div> la hauteur de premierezone est définie au départ avec la même valeur que celle de bandeau1 afin que l'on ne puisse pas voir le texte. au survol de la souris, (avec onmouseover ) on appelle la fonction deroule qui active l'animation. le premier paramètre de la fonction est une valeur correspondant à bandeau1 et le second la hauteur déroulée en pixels. dès que l'on quitte le bandeau avec la souris ( onmouseout ), on rappelle cette même fonction en réduisant sa hauteur de déroulé. bien entendu vous pouvez fixer les autres propriétés css du bandeau, du texte et de la zone (couleurs, fond etc.) retrouvez ci-dessous le code de l'exemple de cet article. <script type="text/javascript">// <![cdata[ function deroule(champ,valeur) { /*valeur est la hauteur en pixel de la zone*/ switch (champ) { case 1: /*si champ vaut 1 alors on change la hauteur de zone1*/ document.getelementbyid("zone1").style.height=valeur+'px'; break; case 2: /*si champ vaut 2 alors on change la hauteur de zone2*/ document.getelementbyid("zone2").style.height=valeur+'px'; break; } } // ]]></script> <div id="zone1" style="width: 100%; height: 20px; background: white; border: 1px solid dimgrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;"> <div id="bandeau1" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(1,100);" onmouseout="deroule(1,20);">passez la souris ici pour voir le résultat </div> <div id="texte1" style="float: left;">texte1 /*remplacez par le texte de la première zone*/ </div> </div> <div id="zone2" style="width: 100%; height: 20px; background: white; border: 1px solid dimgrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;"> <div id="bandeau2" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(2,350);" onmouseout="deroule(2,20);">un peu d'explications </div> <div id="texte2" style="float: left;">texte2 /*remplacez par le texte de la deuxième zone*/ </div> </div> 15 commentaires faire un tooltip évolué par papasti dans scripts, html et css sur eklablog le 13 octobre 2011 à 17:06 un tooltip ? késaco ? vous savez c'est cette petite fenêtre qui s'ouvre pour vous donner une information lorsque vous passez sur un élément avec la souris. le tooltip est souvent utile et basique. il est pourtant assez facile d'en réaliser un plus évolué. mais rien de tel qu'un exemple. pp pp passez votre souris sur moi alors comment ça marche? le principe: l'article contient une balise <div>(que j'ai appelé tooltip ) qui est rendue invisible grâce à la propriété display. cette balise a la couleur et la bordure choisie. sous ce <div> , j'ai placé trois autres balises (une pour le titre, une pour le corps du texte et enfin une pour l'image). lorsque l'on passe avec la souris sur l'élément choisi ( onmouseover ), cela appelle une fonction javascript ( show_tooltip ) qui: - définit la taille de la balise invisible - positione cette balise en haut et à droite de la souris - affiche la balise dès que l'on quitte l'élément avec la souris ( onmouseout ), une autre fonction ( unshow) est appelée qui rend la balise invisible. comment l'utiliser ? il faut placer dans la partie html de votre page le script suivant: <script type="text/javascript">// <![cdata[ function show_tooltip(event,larg,haut,coul,titre,baratin) { var x=event.clientx; var y=event.clienty; document.getelementbyid("tooltip").style.width =larg+'px'; document.getelementbyid("tooltip").style.height =haut+'px' document.getelementbyid("tooltip").style.backgroundcolor = coul; if (titre !='') {document.getelementbyid("titretooltip").innerhtml=titre} if (baratin !='') {document.getelementbyid("corpstooltip").innerhtml=baratin} document.getelementbyid("tooltip").style.left =(x+10)+'px'; document.getelementbyid("tooltip").style.top =(y-haut -10)+'px'; document.getelementbyid("tooltip").style.display ='block'; } function unshow() { document.getelementbyid("tooltip").style.display ='none'; } // ]]></script> puis il faut définir la <div> qui va vous servir de tooltip. celle ci-dessous correspond au tooltip de cette page: <div id="tooltip" style="display: none; padding: 5px; border: 1px solid black; border-radius: 10px; position: fixed; float: none; width: 60px; "> <h3 id="titretooltip">pp</h3> <p id="corpstooltip" style="float: left; width: 150px;">pp</p> <p style="float: right;"><img src="http://ekladata.com/q97ltr67ftdn0mdaop2hw7sniei/227407.jpg" alt="" width="50" height="50" /></p> </div> maintenant il ne reste plus qu'à l'appeler quand vous en avez besoin. dans l'exemple ci-dessous, 250 est la largeur de la div et 120 sa hauteur . <a onmouseover="show_tooltip(event,250,120,'lightblue','super tooltip','vous ne trouvez pas ? on peut y placer quasiment tout, texte, images etc.')" onmouse
Informations Whois
Whois est un protocole qui permet d'accéder aux informations d'enregistrement.Vous pouvez atteindre quand le site Web a été enregistré, quand il va expirer, quelles sont les coordonnées du site avec les informations suivantes. En un mot, il comprend ces informations;
%%
%% This is the AFNIC Whois server.
%%
%% complete date format : DD/MM/YYYY
%% short date format : DD/MM
%% version : FRNIC-2.5
%%
%% Rights restricted by copyright.
%% See https://www.afnic.fr/en/products-and-services/services/whois/whois-special-notice/
%%
%% Use '-h' option to obtain more information about this service.
%%
%% [2600:3c03:0000:0000:f03c:91ff:feae:779d REQUEST] >> eklablog.fr
%%
%% RL Net [##########] - RL IP [########..]
%%
domain: eklablog.fr
status: ACTIVE
hold: NO
holder-c: W4650-FRNIC
admin-c: W4650-FRNIC
tech-c: GR283-FRNIC
zone-c: NFC1-FRNIC
nsl-id: NSL13550-FRNIC
registrar: GANDI
Expiry Date: 23/06/2018
created: 24/10/2007
last-update: 04/04/2017
source: FRNIC
ns-list: NSL13550-FRNIC
nserver: a.dns.gandi.net
nserver: b.dns.gandi.net
nserver: c.dns.gandi.net
source: FRNIC
registrar: GANDI
type: Isp Option 1
address: 63-65 boulevard Massena
address: PARIS
country: FR
phone: +33 1 70 37 76 61
fax-no: +33 1 43 73 18 51
e-mail: reg.afnic-notification@gandi.net
website: http://www.gandi.net
anonymous: NO
registered: 09/03/2004
source: FRNIC
nic-hdl: W4650-FRNIC
type: ORGANIZATION
contact: Webedia
address: Webedia
address: 2, rue Paul Vaillant Couturier
address: 92300 Levallois Perret
address: 11
country: FR
phone: +33 8 11 96 41 42
e-mail: beab1a6964c2946daf7c3e64943cad85-3126204@contact.gandi.net
registrar: GANDI
changed: 25/01/2017 nic@nic.fr
anonymous: NO
obsoleted: NO
source: FRNIC
nic-hdl: GR283-FRNIC
type: ROLE
contact: GANDI ROLE
address: Gandi
address: 15, place de la Nation
address: 75011 Paris
country: FR
e-mail: noc@gandi.net
trouble: -------------------------------------------------
trouble: GANDI is an ICANN accredited registrar
trouble: for more information:
trouble: Web: http://www.gandi.net
trouble: -------------------------------------------------
trouble: - network troubles: noc@gandi.net
trouble: - SPAM: abuse@gandi.net
trouble: -------------------------------------------------
admin-c: NL346-FRNIC
tech-c: NL346-FRNIC
tech-c: TUF1-FRNIC
notify: noc@gandi.net
registrar: GANDI
changed: 03/03/2006 noc@gandi.net
anonymous: NO
obsoleted: NO
source: FRNIC
REFERRER http://www.nic.fr
REGISTRAR AFNIC
SERVERS
SERVER fr.whois-servers.net
ARGS eklablog.fr
PORT 43
TYPE domain
RegrInfo
DISCLAIMER
%
% This is the AFNIC Whois server.
%
% complete date format : DD/MM/YYYY
% short date format : DD/MM
% version : FRNIC-2.5
%
% Rights restricted by copyright.
% See https://www.afnic.fr/en/products-and-services/services/whois/whois-special-notice/
%
% Use '-h' option to obtain more information about this service.
%
% [2600:3c03:0000:0000:f03c:91ff:feae:779d REQUEST] >> eklablog.fr
%
% RL Net [##########] - RL IP [########..]
%
REGISTERED yes
ADMIN
HANDLE W4650-FRNIC
TYPE ORGANIZATION
CONTACT Webedia
ADDRESS
Webedia
2, rue Paul Vaillant Couturier
92300 Levallois Perret
11
COUNTRY FR
PHONE +33 8 11 96 41 42
EMAIL beab1a6964c2946daf7c3e64943cad85-3126204@contact.gandi.net
SPONSOR GANDI
CHANGED 2017-01-25
ANONYMOUS NO
OBSOLETED NO
SOURCE FRNIC
TECH
HANDLE GR283-FRNIC
TYPE ROLE
CONTACT GANDI ROLE
ADDRESS
Gandi
15, place de la Nation
75011 Paris
COUNTRY FR
EMAIL noc@gandi.net
TROUBLE
-------------------------------------------------
GANDI is an ICANN accredited registrar
for more information:
Web: http://www.gandi.net
-------------------------------------------------
- network troubles: noc@gandi.net
- SPAM: abuse@gandi.net
-------------------------------------------------
ADMIN-C NL346-FRNIC
TECH-C
NL346-FRNIC
TUF1-FRNIC
NOTIFY noc@gandi.net
SPONSOR GANDI
CHANGED 2006-03-03
ANONYMOUS NO
OBSOLETED NO
SOURCE FRNIC
OWNER
HANDLE W4650-FRNIC
TYPE ORGANIZATION
CONTACT Webedia
ADDRESS
Webedia
2, rue Paul Vaillant Couturier
92300 Levallois Perret
11
COUNTRY FR
PHONE +33 8 11 96 41 42
EMAIL beab1a6964c2946daf7c3e64943cad85-3126204@contact.gandi.net
SPONSOR GANDI
CHANGED 2017-01-25
ANONYMOUS NO
OBSOLETED NO
SOURCE FRNIC
DOMAIN
STATUS ACTIVE
HOLD NO
SPONSOR GANDI
EXPIRY DATE 23/06/2018
CREATED 2007-10-24
CHANGED 2017-04-04
SOURCE FRNIC
HANDLE NSL13550-FRNIC
NSERVER
A.DNS.GANDI.NET 173.246.98.1
B.DNS.GANDI.NET 213.167.229.1
C.DNS.GANDI.NET 217.70.179.1
NAME eklablog.fr
Go to top
papasti.eklablog.fr rapport :
Visitez le site