Toggle navigation
POP-T20
Notre guide de voyage (cartes)
Carte générale de l'archipel
Carte de l'histoire & géographie
Carte de l'île des ambiances
Carte de l'île de la découverte
Carte de l'île linguistique
Notre guide de voyage (textes)
1. Introduction
2. Préparer son voyage
3. Itinéraires
4. Histoire & géo
5. Ambiances
6. Découverte, bons plans & bonnes adresses
7. Linguistique
8. Risques, lieux à éviter et précautions à prendre
Guide de voyage complet en pdf
C'est quoi ce POP ?
C'est quoi, cette POP ?
Organisation du groupe
Inspirations
Archives
Guide de voyage en construction - brouillons
Archipel de Coopératif
Ile de la découverte
Ile des ambiances
Avec un outil
Avec libreoffice & pdf
Fonds de cartes
Images pour le POP
Aide
Rechercher
×
Login
×
Login
Email or WikiName
Password
Lost password ?
Remember me
Signup
Aide
Gestion du site
Tableau de bord
Base de données
Guide de voyage ... à l'attention de celles & ceux qui veulent s'aventurer en pays coopératif
Activate JavaScript to upload files.
File
Cancel
Failed
×
Upload file
Download link text
Image alignment
Left
Center
Right
Image size
Thumbnail (140x97)
Medium (300x209)
Big (780x544)
Original size
Caption text
Advanced parameters
Associated link
Graphical effects
White border
Drop shadow
Zoom on hover
Alternative text
======[[https://ferme.yeswiki.net/POP-T20/?PagePrincipale Archipel coopératif]] / Île linguistique====== - Reste à faire : intégrer les textes & images des vignettes "" <style> .img-overlay-wrap { position: relative; display: inline-block; transition: transform 150ms ease-in-out; } .img-overlay-wrap svg { position: absolute; top: 0; left: 0; } @keyframes buttonTransition { from { r: 10; } to { r: 13; } } circle { opacity: 0.5; cursor:pointer; stroke-dasharray: 95; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms ease; transform-origin: 0px 0px 0px; animation-duration: 1s; animation-direction: alternate; animation-iteration-count: infinite; animation-name: buttonTransition; } circle:hover { opacity: 0.7; stroke-dashoffset: 95px; stroke-width: 2.3px; transform="translate(5,14)" } svg { width: 100%; height:100%; } img { width: 100%; height: auto; } .overlay_bg { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay_bg:target { visibility: visible; opacity: 1; } .overlay_exit_link{ width: 100%; height: 100%; position: absolute; z-index: -1000; } .popup_page { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 2s ease-in-out; } .close_button { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #aaa; transition: all 0.2s ease; } .popup_page .popup_content { max-height: 30%; overflow: auto; } .content__title { font-size: 20px; font-family: sans-serif; padding: 1em 0.5em 0.25em 0.5em; text-align: center; color: #111; } .content__description { font-size: 15px; font-family: sans-serif; padding: 1em 0em; text-align: left; margin: 0; max-width: 90%; margin: auto; } .content__image { display: block; max-width: 90%; height: auto; margin: auto; } .content__image:hover { opacity: 0.8; transition: all 0.2s ease; } .close_button:hover { color: #34478b; transition: all 0.2s ease; text-decoration: none; } .content__button { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 2px solid #34478b; border-radius: 0.6em; color: #34478b; cursor: pointer; display: -webkit-box; display: flex; align-self: center; font-size: 1rem; font-weight: 400; line-height: 1; margin: 20px; padding: 1.2em 2.8em; text-decoration: none; text-align: center; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out; max-width: 200px; margin: 2em auto 0.5em auto; justify-content: center; } .content__button:hover, .content__button:focus { color: #fff; outline: 0; box-shadow: 0 0 40px 40px #34478b inset; text-decoration: none; } </style> <html> <body> <div id="myDiv" class="img-overlay-wrap"> <img src="https://ferme.yeswiki.net/POP-T20/?CarteLangues/download&file=cartelinguistique.jpg" alt="Archipel" usemap="#workmap"> <svg id="mySvg"> </svg> </div> </body> </html> <script> var jsonObj = { points: [ { x: "65%", y: "53%", title: "Les essentiels", description: "Le vocabulaire de base de coopératien.nes, ... Ce qui faut savoir pour se lancer", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#lesessentiels", color: "red", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "23%", y: "67%", title: "Découverte de l'archipel", description: "Mais comment s'y prenez-vous pour se lancer ? Quelques pistes à découvrir", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#decouvertedelarchipel", color: "orange", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "38%", y: "80%", title: "Mode de vie", description: "Petit truc d'animation pour débuter une réunion ou accueillir un groupe", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#modedevie", color: "green", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "85%", y: "73%", title: "S'organiser", description: "La collaboration au sain d'une équipe, comment ça marche ?", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#sorganiser", color: "blue", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "33%", y: "51%", title: "Décider", description: "Prendre des décisions ensemble, c'est possible ?", link: "https://ferme.yeswiki.net/POP-T20/?Langue/#decider", color: "purple", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, { x: "18%", y: "77%", title: "Les indispensables", description: "Les outils pratiques à emporter quoi qu'il arrive", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#lesindispensables", color: "black", link_text:"Allons-voir !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" }, ] }; window.onload = function() { var counter = 0; var svg = document.getElementById("mySvg"); var main = document.getElementById("myDiv"); jsonObj.points.forEach(point => { var child = `<a class="button" href="#popup${counter}"> <circle cx="${point.x}" cy="${point.y}" r="10" fill="${point.color}" stroke="#777" stroke-width="1.9"/> </a>`; var popup = `<div id="popup${counter}" class="overlay_bg"> <a href="#" class="overlay_exit_link"/> <div class="popup_page"> <a class="close_button" href="#">×</a> <div class="popup_content"> <h2 class="content__title">${point.title}</h2> <a class="content__link" href="${point.link}"> <img class="content__image" src="${point.image}" alt="some_alt"/> </a> <p class="content__description">${point.description}</p> <a class="content__button" href="${point.link}" target="blank">${point.link_text}</a> </div> </div>` svg.insertAdjacentHTML( 'beforeend', child ); main.insertAdjacentHTML( 'beforeend', popup ); counter++; }) }; </script> ""
Save
Cancel
Theme
Antispam protection activated
×
{{ actionGroup.label }}
Pick a form
{{ name }}
{{ needFormField ? 'How do you want to display the data' : 'Actions' }}
{{ action.label }}
{{ selectedAction.hint }}
{{ panel.params.title ? panel.params.title : 'Paremeters'}}
Code to insert in the page
×
Appearance of page CarteLangues
Theme
base
bootstrap3
city
colibris
enercoop
far
margot
organic
pactecivique
yeswiki
Template
1col.tpl.html
2cols-left.tpl.html
2cols-right.tpl.html
Style
city.css
Advanced parameters
Page's language
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choose a page for:
the horizontal menu
fast access on top right corner
the header (banner)
the footer
the vertical menu
Configuration graphique
×