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
×
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
... à l'attention de celles & ceux qui veulent s'aventurer en pays coopératif
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érative | Test Javascript et CSS ====== "" <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; max-width: 90%; margin: 5; } .content__image { max-width: 90%; height: auto; margin: 1em 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://picat.drycat.fr/mu8YYNrI.jpg" alt="Archipel" usemap="#workmap"> <svg id="mySvg"> </svg> </div> </body> </html> <script> var jsonObj = { points: [ { x: "18%", y: "75%", title: "Ile de l'histoire & géographie", description: "D'où ça vient, cette idée de coopérer ? C'est nouveau ou quoi ?", link: "https://mensuel.framapad.org/p/histoire-amp-geographie-de-la-cooperation-9kf9?lang=fr", color: "green", link_text: "Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_HistoireGeo_20201210114643_20201210114643.jpg" }, { x: "22%", y: "25%", title: "Un avant goût, pour se laisser tenter et visiter l'archipel coopératif", description: "Visiter l'archipel coopératif demande une dose de motivation et d'envie.Il s'agit en effet d'arriver dans un monde d'innovation, de transformation sociale, de confiance en l'autre et d'intelligence collective... Bref, changer les codes appris à l'école et en société pour oser vivre de nouvelles expériences.", link: "https://mensuel.framapad.org/p/buqe1u6web-pop-intro-9k9u?lang=fr", color: "blue", link_text: "Bienvenue !", image: "https://previews.123rf.com/images/faust84/faust841802/faust84180200026/95080879-traditional-braided-hammock-in-the-shade-on-a-tropical-island.jpg" }, { x: "93%", y: "43%", title: "Ambiance", description: "Once upon a time, a secret island lost in the middle of...", link: "https://ferme.yeswiki.net/POP-T20/?Test3Bis", color: "red", link_text: "Les différentes ambiances", image: "https://previews.123rf.com/images/faust84/faust841802/faust84180200026/95080879-traditional-braided-hammock-in-the-shade-on-a-tropical-island.jpg" }, { x: "48%", y: "52%", title: "L'île de la découverte", description: "Ici vous repérerez les expériences à ne pas manquer. Et last but not least : des petites adresses où se restaurer et boire un verre pour récupérer de vos émotions", link: "https://ferme.yeswiki.net/POP-T20/?Test3Suite", color: "orange", link_text: "Découvrez les bons plans et les bonnes adresses", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_2a8b6fc0d8894e1894447f2f4a40d175_20201210122222_20201210122241.jpg" }, { x: "59%", y: "92%", title: "Le langage de l'archipel coopératif", description: "Entrer en coopération est une invitation au voyage, les mots prennent une autre saveur, d'autres semblent être inventés uniquement pour définir au plus juste cette expérience collaborative ! Il s'agit aussi de redonner ses lettres de noblesse à la collaboration, malheureusement ternie par l'histoire...", link: "https://mensuel.framapad.org/p/pop-animacoop2020-9k93?lang=fr", color: "black", link_text: "A vos dicos !", image: "https://previews.123rf.com/images/faust84/faust841802/faust84180200026/95080879-traditional-braided-hammock-in-the-shade-on-a-tropical-island.jpg" }, { x: "84%", y: "24%", title: "Infobécity", description: "Once upon a time, a secret island lost in the middle of...", link: "https://mensuel.framapad.org/p/pop-animacoop2020-9k93?lang=fr", color: "black", link_text: "Parlez-vous la langue ?", image: "https://previews.123rf.com/images/faust84/faust841802/faust84180200026/95080879-traditional-braided-hammock-in-the-shade-on-a-tropical-island.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> <div style= "display: table-cell;"> <a class="content__link" href="${point.link}" target="_blank"> <img class="content__image" src="${point.image}" alt="some_alt"/> </a> </div> <div style="display: table-cell;"> <class="content__description">${point.description}</class> <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> "" Partenaire : La [[https://seo-maxime-guinard.fr/mon-concept/ collaboration avec nos partenaires]] est au cœur de notre stratégie, nous permettant de proposer des [[https://seo-maxime-guinard.fr/mes-valeurs/ solutions complètes et adaptées aux besoins SEO]] de nos clients.
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 Test3
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
×