POP-T20 : CarteDécouverte

Notre guide de voyage (cartes)
Notre guide de voyage (textes)
C'est quoi ce POP ?
Archives
Aide

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

File

Cancel Failed

Upload file

Download link text

Image alignment

align-left

Left

align-center

Center

align-right

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

Cancel this upload

======Archipel coopératif / Île de la découverte ======

- Pour info : Correspondances carte=>texte : champs de idées => auberge des observators; port de la rétrospective => où manger, phare de l'espérance => où boire
- Reste à faire : textes & images pour ces 3 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/files/CarteD%C3%A9couverte_le_de_la_dcouverte_20201214114400_20210113220611.jpg" alt="Archipel" usemap="#workmap">
			<svg id="mySvg">
			</svg>
		</div>
	</body>
</html>

<script>
	var jsonObj = {
			points: [
				{ x: "19%", y: "34%", title: "La station des décisions", description: "Impossible ... une décision prise collectivement ? Détrompez-vous : différentes méthodes existent !", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#stationdesdecisions", color: "green", link_text:"Chaussez vos skis !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_Fraitve_ski_trail__panoramio_vignette_300_209_20201210145137_20201210145253.jpg" },
				
				{ x: "40%", y: "53%", title: "Animacoop", description: "Parfois il nous faut du calme pour collaborer. Et parfois, il nous faut de l'ébullition pour avancer : c'est le bon moment pour vous plonger dans la vie trépidante d'Animacoop !", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#capitaleanimacoop", color: "blue", link_text:"Prêt pour la capitale ?", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_capitale_20201210142611_20201210143205.jpg" },
				
				{ x: "50%", y: "45%", title: "Lac des communs", description: "Texte : La découverte paisible du Lac des Communs va vous faire rentrer dans le monde des biens communs où le collectif est la meilleure solution pour gérer les ressources", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#lacdescommuns", color: "red", link_text:"Les différentes ambiances", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_lac_vignette_300_209_20201210135139_20201210135557.jpg" },
				
				{ x: "69%", y: "52%", title: "Fôret des outils", description: "Un petit guide est à votre disposition pour découvrir la diversité des espèces d'outils", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#foretdesoutils", color: "blue", link_text:"Venez vous balader !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_foret_vignette_300_209_20201210140642_20201210142044.jpg" },
				
				{ x: "85%", y: "52%", title: "Les ruines du monde pyramidal", description: "Venez vous plonger dans le passé où la hiérarchie primait sur les décisions collectives", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#ruinesdumondepyramidal", color: "orange", link_text:"Le monde d'avant !", image: "https://ferme.yeswiki.net/POP-T20/files/ImagesPop_ruines_pyramide_20201210143849_20201210144114.jpg" },
		      
		      { x: "50%", y: "66%", title: "Champs des idées : Auberge des observatoros", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#aubergedesobservators", color: "black", link_text:"Parlez-vous la langue ?", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" },
		      
		      { x: "80%", y: "75%", title: "Port de la rétrospective : Où manger?", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#oumanger", color: "purple", link_text:"A table !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=noir.jpg" },
		      
		      { x: "96%", y: "58%", title: "Phare de l'espérance : Où boire?", description: "...", link: "https://ferme.yeswiki.net/POP-T20/?D%C3%A9couverte/#ouboire", color: "purple", link_text:"Tchin !", 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="#">&times;</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> ""

Theme

Antispam protection activated

{{ actionGroup.label }}

Pick a form

{{ needFormField ? 'How do you want to display the data' : 'Actions' }}

{{ selectedAction.hint }}

{{ panel.params.title ? panel.params.title : 'Paremeters'}}

Code to insert in the page

Edit this page Modified on : 13.01.2021 at 22:06:42 Share

Site construit grâce au wiki coopératif et open source YesWiki

image 88x31.png (1.5kB) — CC-By-SA

Le contenu de cette plateforme, sauf mention contraire, est publié sous licence Creative Commons BY-SA, et a pour auteur : Collectif Animacoop . Session Toulouse 2020.

×

Appearance of page CarteDécouverte

Theme

Template

Style

Advanced parameters

Page's language

Choose a page for:

the horizontal menu

fast access on top right corner

the header (banner)

the footer

the vertical menu

Configuration graphique ×

Cancel Apply