POP-T20 : CarteHistoireGéo

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 l'histoire & géographie======

"" <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/?CarteHistoireGéo/download&file=cartehistoiregeo.jpg" alt="Archipel" usemap="#workmap">
			<svg id="mySvg">
			</svg>
		</div>
	</body>
</html>

<script>
	var jsonObj = {
			points: [
				{ x: "16%", y: "63%", title: "Dans la nature", description: "La loi de la jungle, c'est bien la compétition, non?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#danslanature", color: "red", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Nature.jpg" },
				
				{ x: "29%", y: "41%", title: "Dans les champs", description: "Les paysans, ça a toujours été chacun chez soi, non?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#dansleschamps", color: "orange", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Champs.jpg" },
				
				{ x: "45%", y: "42%", title: "Les coopératives ouvrières", description: "Dans les usines, c'est le patron qui décide, on est bien d'accord ?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#alusine", color: "green", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Usine.jpg" },
				
				{ x: "45%", y: "50%", title: "Les associations", description: "Les associations, c'est depuis 1901, non?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#histoireassociations", color: "green", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Usine.jpg" },
				
				{ x: "55%", y: "58%", title: "Le cohabitat", description: "Le cohabitat, c'est une idée récente, non?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#histoirecohabitat", color: "green", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Usine.jpg" },
				
				{ x: "68%", y: "45%", title: "A l'école & après l'école", description: "Pour apprendre, quand on est petit il faut un maître ou une maîtresse, et quand on est grand un prof. C'est bien ça?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#alecole", color: "blue", link_text:"Allons vérfier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Ecole.jpg" },
				
				{ x: "86%", y: "57%", title: "Au bureau : de la systémique à l'intelligence collective", description: "La taille du bureau, elle est bien fonction de la position hiérarchique?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#aubureau", color: "purple", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Bureau.jpg" },
				
				{ x: "84%", y: "76%", title: "Au bureau : méthodes & outils", description: "La taille du bureau, elle est bien fonction de la position hiérarchique?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#histoiremethodesoutils", color: "purple", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Bureau.jpg" },

{ x: "64%", y: "78%", title: "Au bureau : Gouvernance", description: "La taille du bureau, elle est bien fonction de la position hiérarchique?", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#histoiregouvernance", color: "purple", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Bureau.jpg" },
				
		      { x: "73%", y: "35%", title: "L'ère de l'informatique : le retour des communs?", description: "C'est quand même pas un pingouin qui va défier Bill Gates ?!!!", link: "https://ferme.yeswiki.net/POP-T20/?HistoireG%C3%A9o/#leretourdescommuns", color: "black", link_text:"Allons vérifier !", image: "https://ferme.yeswiki.net/POP-T20/?ImagesPop/download&file=Retour_des_communs.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.12.2020 at 19:46:32 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 CarteHistoireGéo

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