Toggle navigation
POP-T20 -
OkiCom
-
PasCherMontres
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
×
Se connecter
×
Se connecter
Email ou NomWiki
Mot de passe
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
-
AubergeDeCannedda
Guide de voyage
... à l'attention de celles & ceux qui veulent s'aventurer en pays coopératif
-
OkiCom
Activer JavaScript pour joindre des fichiers.
Fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
======Archipel coopératif / Île des ambiances ====== "" <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/files/CarteAmbiances_lambiance_20201214112834_20210113220513.jpg" alt="Archipel" usemap="#workmap"> <svg id="mySvg"> </svg> </div> </body> </html> <script> var jsonObj = { points: [ { x: "26%", y: "45%", title: "Alternatives", description: "Nombreuses sont les personnes qui ont décidé de vivre autrement. Sont apparus ainsi des Eco-villages, des villages démocratiques, des Tiers-lieux, etc. qui s’inspirent toutes de démarches coopératives.", link: "https://ferme.yeswiki.net/POP-T20/?Ambiances/#ambianceecovillages", color: "green", link_text:"En savoir plus !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Ambiance_ecohameau_20201214110501_20201214111834.jpg" }, { x: "27%", y: "76%", title: "Entreprise", description: "Le travail c’est la santé ! Enfin, de moins en moins. Certain·es vivent des contraintes hierarchiques et de reconnaissance importante. Mais il existe des Entreprise où les décisions sont partagées, les bénéfices re-distribués...", link: "https://ferme.yeswiki.net/POP-T20/?Ambiances/#ambianceentreprise", color: "blue", link_text:"Travailler autrement, c’est possible !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Entreprise_libre_20201214105341_20201214105938.jpg" }, { x: "86%", y: "48%", title: "Politique", description: "La démocratie est par essence philosophique coopérative. Mais le jeu de la représentativité en a fait perdre la saveur. Comment ré-instaurer de la participation citoyenne à l’échelle des municipalités ?", link: "https://ferme.yeswiki.net/POP-T20/?Ambiances/#ambiancepolitique", color: "red", link_text:"Découvrir le municipalisme", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Ambiance_politique_20201211171410_20201214104955.jpg" }, { x: "50%", y: "53%", title: "Associations", description: "S’associer pour un projet commun, c’est le but de toute association. Qu’es-ce qui différencie une association d’une association collaborative ?", link: "https://ferme.yeswiki.net/POP-T20/?Ambiances/#ambianceassociation", color: "orange", link_text:"Des exemples à suivre !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Ambiance_association_20201214110501_20201214111706.jpg" }, { x: "69%", y: "82%", title: "Ecole", description: "Des écoles collaboratives, c’est possible ! Il existe différentes expériences où les parents sont impliqués dans la gestion de l’école, et où les élèves donnent leur avis sur l’organisation et choisissent leurs apprentissages… Vous avez de mauvais souvenir de l’école ?", link: "https://ferme.yeswiki.net/POP-T20/?Ambiances/#ambianceecole", color: "black", link_text:"Rêver d’autres façons d’apprendre", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Ecole_democratique_20201214110501_20201214111738.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> ""
Sauver
Annuler
Thème
Protection anti-spam active
×
{{ actionGroup.label }}
Choisissez un Formulaire
{{ name }}
{{ needFormField ? 'Sous quelle forme voulez-vous afficher les données?' : 'Actions' }}
{{ action.label }}
{{ selectedAction.hint }}
{{ panel.params.title ? panel.params.title : 'Paramètres'}}
Code à include dans la page
×
Apparence de la page CarteAmbiances
Thème
base
bootstrap3
city
colibris
enercoop
far
margot
organic
pactecivique
yeswiki
Squelette
1col.tpl.html
2cols-left.tpl.html
2cols-right.tpl.html
Style
city.css
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour:
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
Configuration graphique
×