POP-T20 : CarteLangues

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

======[[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="#">&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 : 24.12.2020 at 13:19:27 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 CarteLangues

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