Molette + drag&drop
|
|
@ -10,7 +10,7 @@
|
|||
<div>Source : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p 7</div>
|
||||
<br />
|
||||
<h3>Usage</h3>
|
||||
<div>Vous pouvez naviguer sur les cartes en cliquant sur les différents lieux et zoomer avec le slider en haut à gauche de chaque carte.</div>
|
||||
<div>Vous pouvez naviguer sur les cartes en cliquant sur les différents lieux, scroller en drag & drop et zoomer avec la molette de la souris.</div>
|
||||
<br />
|
||||
<h3>Données</h3>
|
||||
<div>Données extraites de : <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a>, <a href="https://www.black-book-editions.fr/produit.php?id=3157" target="_blank">Invincible</a>, <a href="https://www.black-book-editions.fr/produit.php?id=4213" target="_blank">Boite d'Initiation (BI)</a>, <a href="https://www.black-book-editions.fr/produit.php?id=5895" target="_blank">Casus Belli HS01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">Casus Belli 01</a>, <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">Casus Belli 02</a>, <a href="https://www.black-book-editions.fr/produit.php?id=241" target="_blank">Casus Belli 03</a></div>
|
||||
|
|
|
|||
15
Docs/Osgild/ferrance.base.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Ferrance</h1>
|
||||
<div><b>Capitale</b> de la <a href="principautedarly.html">principauté d'Arly</a></div>
|
||||
<div><b>Lieux importants :</b> L'académie de magie</div>
|
||||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p7, S4 Les Faux-Monnayeurs p88</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="ferrance.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -10,6 +10,6 @@
|
|||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : p7, S4 Les Faux-Monnayeurs p88</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="ferrance.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="ferrance.jpg" /><a href="oceanpelurique.html" target="details"><rect x="1" y="103" width="192" height="40"><title>Océan Pelurique</title></rect></a><a href="oceanpelurique.html" target="details"><rect x="1" y="1363" width="206" height="172"><title>Océan Pelurique</title></rect></a><a href="portsable.html" target="details"><rect x="1348" y="1480" width="251" height="40"><title>Port-Sable</title></rect></a><a href="fourche.html" target="details"><rect x="1666" y="17" width="211" height="40"><title>Fourche</title></rect></a><a href="valastir.html" target="details"><rect x="1836" y="382" width="208" height="35"><title>Valastir</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR:fr19960 -->
|
||||
<area shape="rect" coords="1,103,193,143" alt="Océan Pelurique" href="oceanpelurique.html" target="_parent" />
|
||||
<area shape="rect" coords="1,1363,207,1535" alt="Océan Pelurique" href="oceanpelurique.html" target="_parent" />
|
||||
<area shape="rect" coords="1348,1480,1599,1520" alt="Port-Sable" href="portsable.html" target="_parent" />
|
||||
<area shape="rect" coords="1666,17,1877,57" alt="Fourche" href="fourche.html" target="_parent" />
|
||||
<area shape="rect" coords="1836,382,2044,417" alt="Valastir" href="valastir.html" target="_parent" />
|
||||
<area shape="rect" coords="1,103,193,143" alt="Océan Pelurique" href="oceanpelurique.html" target="details" />
|
||||
<area shape="rect" coords="1,1363,207,1535" alt="Océan Pelurique" href="oceanpelurique.html" target="details" />
|
||||
<area shape="rect" coords="1348,1480,1599,1520" alt="Port-Sable" href="portsable.html" target="details" />
|
||||
<area shape="rect" coords="1666,17,1877,57" alt="Fourche" href="fourche.html" target="details" />
|
||||
<area shape="rect" coords="1836,382,2044,417" alt="Valastir" href="valastir.html" target="details" />
|
||||
</map>
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="ferrance.jpg" />
|
||||
<a href="oceanpelurique.html" target="_parent">
|
||||
<a href="oceanpelurique.html" target="details">
|
||||
<rect x="1" y="103" width="192" height="40">
|
||||
<title>Océan Pelurique</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="oceanpelurique.html" target="_parent">
|
||||
<a href="oceanpelurique.html" target="details">
|
||||
<rect x="1" y="1363" width="206" height="172">
|
||||
<title>Océan Pelurique</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="portsable.html" target="_parent">
|
||||
<a href="portsable.html" target="details">
|
||||
<rect x="1348" y="1480" width="251" height="40">
|
||||
<title>Port-Sable</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="fourche.html" target="_parent">
|
||||
<a href="fourche.html" target="details">
|
||||
<rect x="1666" y="17" width="211" height="40">
|
||||
<title>Fourche</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="valastir.html" target="_parent">
|
||||
<a href="valastir.html" target="details">
|
||||
<rect x="1836" y="382" width="208" height="35">
|
||||
<title>Valastir</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 879 B After Width: | Height: | Size: 888 B |
14
Docs/Osgild/fourche.base.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Fourche</h1>
|
||||
<div><b>Ville marchande</b></div>
|
||||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">CB02</a> : <a href="courseduprintemps.html">La course du printemps</a> p149</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="fourche.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -9,6 +9,6 @@
|
|||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=193" target="_blank">CB02</a> : <a href="courseduprintemps.html">La course du printemps</a> p149</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="fourche.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="fourche.jpg" /><a href="virylene.html" target="details"><rect x="28" y="100" width="212" height="34"><title>Virylène</title></rect></a><a href="hauterive.html" target="details"><rect x="1172" y="0" width="230" height="29"><title>Hauterive</title></rect></a><a href="wyks.html" target="details"><rect x="1876" y="1429" width="160" height="33"><title>Wyks</title></rect></a><a href="ferrance.html" target="details"><rect x="333" y="1476" width="215" height="34"><title>Ferrance</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR: -->
|
||||
<area shape="rect" coords="28,100,240,134" alt="Virylène" target="_parent" href="virylene.html" />
|
||||
<area shape="rect" coords="1172,0,1402,29" alt="Hauterive" target="_parent" href="hauterive.html" />
|
||||
<area shape="rect" coords="1876,1429,2036,1462" alt="Wyks" target="_parent" href="wyks.html" />
|
||||
<area shape="rect" coords="333,1476,548,1510" alt="Ferrance" target="_parent" href="ferrance.html" />
|
||||
<area shape="rect" coords="28,100,240,134" alt="Virylène" target="details" href="virylene.html" />
|
||||
<area shape="rect" coords="1172,0,1402,29" alt="Hauterive" target="details" href="hauterive.html" />
|
||||
<area shape="rect" coords="1876,1429,2036,1462" alt="Wyks" target="details" href="wyks.html" />
|
||||
<area shape="rect" coords="333,1476,548,1510" alt="Ferrance" target="details" href="ferrance.html" />
|
||||
</map>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="fourche.jpg" />
|
||||
<a href="virylene.html" target="_parent">
|
||||
<a href="virylene.html" target="details">
|
||||
<rect x="28" y="100" width="212" height="34">
|
||||
<title>Virylène</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="hauterive.html" target="_parent">
|
||||
<a href="hauterive.html" target="details">
|
||||
<rect x="1172" y="0" width="230" height="29">
|
||||
<title>Hauterive</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="wyks.html" target="_parent">
|
||||
<a href="wyks.html" target="details">
|
||||
<rect x="1876" y="1429" width="160" height="33">
|
||||
<title>Wyks</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="ferrance.html" target="_parent">
|
||||
<a href="ferrance.html" target="details">
|
||||
<rect x="333" y="1476" width="215" height="34">
|
||||
<title>Ferrance</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 700 B After Width: | Height: | Size: 709 B |
15
Docs/Osgild/hauterive.base.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Hauterive</h1>
|
||||
<div><b>Ville fortifiée</b></div>
|
||||
<div><b>Lieux importants :</b> Castel-Froid, la Bibliothèque du baron, la Tour de l’alchimiste</div>
|
||||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="hauterive.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -10,6 +10,6 @@
|
|||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="hauterive.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="hauterive.jpg" /><a href="vercelise.html" target="details"><rect x="1144" y="1500" width="224" height="33"><title>Vercélise</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR: -->
|
||||
<area shape="rect" coords="1144,1500,1368,1533" alt="Vercélise" target="_parent" href="vercelise.html" />
|
||||
<area shape="rect" coords="1144,1500,1368,1533" alt="Vercélise" target="details" href="vercelise.html" />
|
||||
</map>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="hauterive.jpg" />
|
||||
<a href="vercelise.html" target="_parent">
|
||||
<a href="vercelise.html" target="details">
|
||||
<rect x="1144" y="1500" width="224" height="33">
|
||||
<title>Vercélise</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 279 B After Width: | Height: | Size: 288 B |
11
Docs/Osgild/osgild.base.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Terres d'Osgild</h1>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="osgild.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2099 1485" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2099 1485" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="osgild.png" />
|
||||
<a href="hauterive.html" target="details">
|
||||
<circle cx="144" cy="466" r="12">
|
||||
|
|
@ -115,9 +115,9 @@
|
|||
<title>Benastir</title>
|
||||
</circle>
|
||||
</a>
|
||||
<a href="unknown.html" target="details">
|
||||
<a href="fourchevive.html" target="details">
|
||||
<circle cx="518" cy="1201" r="7">
|
||||
<title>???6</title>
|
||||
<title>Fourchevive ?</title>
|
||||
</circle>
|
||||
</a>
|
||||
<a href="ormile.html" target="details">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
12
Docs/Osgild/portsable.base.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Port-Sable</h1>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="portsable.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -7,6 +7,6 @@
|
|||
<h1>Port-Sable</h1>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="portsable.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="portsable.jpg" /><a href="oceanpelurique.html" target="details"><rect x="29" y="162" width="246" height="116"><title>Océan Pelurique</title></rect></a><a href="ferrance.html" target="details"><rect x="1521" y="1" width="217" height="28"><title>Ferrance</title></rect></a><a href="desertdetanith.html" target="details"><rect x="838" y="1500" width="332" height="34"><title>Désert de Tanith</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR: -->
|
||||
<area shape="rect" coords="29,162,275,278" alt="Océan Pelurique" target="_parent" href="oceanpelurique.html" />
|
||||
<area shape="rect" coords="1521,1,1738,29" alt="Ferrance" target="_parent" href="ferrance.html" />
|
||||
<area shape="rect" coords="838,1500,1170,1534" alt="Désert de Tanith" target="_parent" href="desertdetanith.html" />
|
||||
<area shape="rect" coords="29,162,275,278" alt="Océan Pelurique" target="details" href="oceanpelurique.html" />
|
||||
<area shape="rect" coords="1521,1,1738,29" alt="Ferrance" target="details" href="ferrance.html" />
|
||||
<area shape="rect" coords="838,1500,1170,1534" alt="Désert de Tanith" target="details" href="desertdetanith.html" />
|
||||
</map>
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="portsable.jpg" />
|
||||
<a href="oceanpelurique.html" target="_parent">
|
||||
<a href="oceanpelurique.html" target="details">
|
||||
<rect x="29" y="162" width="246" height="116">
|
||||
<title>Océan Pelurique</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="ferrance.html" target="_parent">
|
||||
<a href="ferrance.html" target="details">
|
||||
<rect x="1521" y="1" width="217" height="28">
|
||||
<title>Ferrance</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="desertdetanith.html" target="_parent">
|
||||
<a href="desertdetanith.html" target="details">
|
||||
<rect x="838" y="1500" width="332" height="34">
|
||||
<title>Désert de Tanith</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 591 B After Width: | Height: | Size: 600 B |
|
|
@ -1,21 +1,119 @@
|
|||
function init() {
|
||||
var body = document.documentElement;
|
||||
var range = document.getElementById("range");
|
||||
var map = document.getElementById("map");
|
||||
map.style.width = "" + range.value + "%";
|
||||
range.oninput = function() {
|
||||
map.style.width = "" + range.value + "%";
|
||||
console.log(range.value);
|
||||
}
|
||||
//range.addEventListener("wheel", onwheel);
|
||||
addWheelListener(body, onwheel);
|
||||
|
||||
var curYPos = 0,
|
||||
curXPos = 0,
|
||||
curDown = false;
|
||||
|
||||
window.addEventListener('mousemove', function(e) {
|
||||
if (curDown === true) {
|
||||
window.scrollTo(document.body.scrollLeft + (curXPos - e.pageX), document.body.scrollTop + (curYPos - e.pageY));
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
window.addEventListener('mousedown', function(e) {
|
||||
curDown = true;
|
||||
curYPos = e.pageY;
|
||||
curXPos = e.pageX;
|
||||
e.preventDefault();
|
||||
});
|
||||
window.addEventListener('mouseup', function(e) {
|
||||
curDown = false;
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function onwheel() {
|
||||
function onwheel(e) {
|
||||
var range = document.getElementById("range");
|
||||
var map = document.getElementById("map");
|
||||
//alert(range.value);
|
||||
//var percent = range.value.toString().substring(0, range.length - 1);
|
||||
//alert(percent);
|
||||
range.value = range.value + 10;
|
||||
console.log(range.value);
|
||||
range.value = parseInt(range.value) - Math.sign(e.deltaY) * 10;
|
||||
map.style.width = "" + range.value + "%";
|
||||
//map.style.width = "" + range.value + "%";
|
||||
//map.style.width = "" + (parseInt(range.value) + 10) + "%";
|
||||
console.log(range.value);
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
// creates a global "addWheelListener" method
|
||||
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
|
||||
(function(window,document) {
|
||||
|
||||
var prefix = "", _addEventListener, support;
|
||||
|
||||
// detect event model
|
||||
if ( window.addEventListener ) {
|
||||
_addEventListener = "addEventListener";
|
||||
} else {
|
||||
_addEventListener = "attachEvent";
|
||||
prefix = "on";
|
||||
}
|
||||
|
||||
// detect available wheel event
|
||||
support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
|
||||
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
|
||||
"DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
|
||||
|
||||
window.addWheelListener = function( elem, callback, useCapture ) {
|
||||
_addWheelListener( elem, support, callback, useCapture );
|
||||
|
||||
// handle MozMousePixelScroll in older Firefox
|
||||
if( support == "DOMMouseScroll" ) {
|
||||
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
|
||||
}
|
||||
};
|
||||
|
||||
function _addWheelListener( elem, eventName, callback, useCapture ) {
|
||||
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
|
||||
!originalEvent && ( originalEvent = window.event );
|
||||
|
||||
// create a normalized event object
|
||||
var event = {
|
||||
// keep a ref to the original event object
|
||||
originalEvent: originalEvent,
|
||||
target: originalEvent.target || originalEvent.srcElement,
|
||||
type: "wheel",
|
||||
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
deltaZ: 0,
|
||||
preventDefault: function() {
|
||||
originalEvent.preventDefault ?
|
||||
originalEvent.preventDefault() :
|
||||
originalEvent.returnValue = false;
|
||||
}
|
||||
};
|
||||
|
||||
// calculate deltaY (and deltaX) according to the event
|
||||
if ( support == "mousewheel" ) {
|
||||
event.deltaY = - 1/40 * originalEvent.wheelDelta;
|
||||
// Webkit also support wheelDeltaX
|
||||
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
|
||||
} else {
|
||||
event.deltaY = originalEvent.deltaY || originalEvent.detail;
|
||||
}
|
||||
|
||||
// it's time to fire the callback
|
||||
return callback( event );
|
||||
|
||||
}, useCapture || false );
|
||||
}
|
||||
|
||||
})(window,document);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@ pre {
|
|||
}
|
||||
body {
|
||||
font-family: 'Noto Serif', serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'UnifrakturCook', cursive;
|
||||
}
|
||||
#range {
|
||||
position: fixed; top: 0; left: 0; z-index: 2; visibility: hidden;
|
||||
}
|
||||
18
Docs/Osgild/vercelise.base.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Vercélise</h1>
|
||||
<div><b>Ville</b> (~700 habitants)</div>
|
||||
<div><b>Bourgmestre :</b> Barral Rogenat</div>
|
||||
<div><b>Rivière :</b> La Reverdie</div>
|
||||
<div><b>Lieux importants :</b> L’hôtel de ville, le temple, la chapelle de Chloris, l’auberge au toit fleuri, le lac</div>
|
||||
<div><b>Activité :</b> Agriculture, élevage, pêche</div>
|
||||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="vercelise.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -13,6 +13,6 @@
|
|||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=128" target="_blank">CB01</a> : <a href="filleduseigneurdelhiver.html">La fille du seigneur de l’hiver</a> p143</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="vercelise.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="vercelise.jpg" /><a href="hauterive.html" target="details"><rect x="889" y="0" width="234" height="28"><title>Hauterive</title></rect></a><a href="virylene.html" target="details"><rect x="783" y="1484" width="211" height="34"><title>Virylène</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR: -->
|
||||
<area shape="rect" coords="889,0,1123,28" alt="Hauterive" target="_parent" href="hauterive.html" />
|
||||
<area shape="rect" coords="783,1484,994,1518" alt="Virylène" target="_parent" href="virylene.html" />
|
||||
<area shape="rect" coords="889,0,1123,28" alt="Hauterive" target="details" href="hauterive.html" />
|
||||
<area shape="rect" coords="783,1484,994,1518" alt="Virylène" target="details" href="virylene.html" />
|
||||
</map>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="vercelise.jpg" />
|
||||
<a href="hauterive.html" target="_parent">
|
||||
<a href="hauterive.html" target="details">
|
||||
<rect x="889" y="0" width="234" height="28">
|
||||
<title>Hauterive</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="virylene.html" target="_parent">
|
||||
<a href="virylene.html" target="details">
|
||||
<rect x="783" y="1484" width="211" height="34">
|
||||
<title>Virylène</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 420 B After Width: | Height: | Size: 429 B |
16
Docs/Osgild/xelys.base.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1>Xelys</h1>
|
||||
<div><b>Cité-état</b>, ville troglodyte, creusée dans les parois d’un canyon</div>
|
||||
<div>Aussi appelée <i>Porte d’Or</i> ou <i>Cité des Voleurs</i></div>
|
||||
<div>Abrite de nombreuses compagnies de Mercenaires et aussi une importante communauté de nains</div>
|
||||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : S5 Le Pic d’Anddalf p100</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="xelys.svg" width="100%" type="image/svg+xml" /></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<script type="text/javascript" src="scripts.js"></script>
|
||||
|
|
@ -11,6 +11,6 @@
|
|||
<div><b>Source :</b> <a href="https://www.black-book-editions.fr/produit.php?id=5894" target="_blank">Anathazerin</a> : S5 Le Pic d’Anddalf p100</div>
|
||||
<div>Carte par <b>Romje</b> :</div>
|
||||
<div><input type="range" min="30" max="250" value="100" id="range" /></div>
|
||||
<div><object id="map" data="xelys.svg" width="100%" type="image/svg+xml" /></div>
|
||||
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="xelys.jpg" /><a href="forterive.html" target="details"><rect x="834" y="4" width="225" height="32"><title>Forterive</title></rect></a><a href="boisdebaram.html" target="details"><rect x="1084" y="7" width="207" height="26"><title>Bois de Baram</title></rect></a><a href="kaerimbor.html" target="details"><rect x="168" y="1486" width="244" height="40"><title>Kaerimbor</title></rect></a></svg></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- #$-:Please do not edit lines starting with "#$" -->
|
||||
<!-- #$VERSION:2.3 -->
|
||||
<!-- #$AUTHOR: -->
|
||||
<area shape="rect" coords="834,4,1059,36" alt="Forterive" target="_parent" href="forterive.html" />
|
||||
<area shape="rect" coords="1084,7,1291,33" alt="Bois de Baram" target="_parent" href="boisdebaram.html" />
|
||||
<area shape="rect" coords="168,1486,412,1526" alt="Kaerimbor" target="_parent" href="kaerimbor.html" />
|
||||
<area shape="rect" coords="834,4,1059,36" alt="Forterive" target="details" href="forterive.html" />
|
||||
<area shape="rect" coords="1084,7,1291,33" alt="Bois de Baram" target="details" href="boisdebaram.html" />
|
||||
<area shape="rect" coords="168,1486,412,1526" alt="Kaerimbor" target="details" href="kaerimbor.html" />
|
||||
</map>
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
<svg style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg">
|
||||
<image href="xelys.jpg" />
|
||||
<a href="forterive.html" target="_parent">
|
||||
<a href="forterive.html" target="details">
|
||||
<rect x="834" y="4" width="225" height="32">
|
||||
<title>Forterive</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="boisdebaram.html" target="_parent">
|
||||
<a href="boisdebaram.html" target="details">
|
||||
<rect x="1084" y="7" width="207" height="26">
|
||||
<title>Bois de Baram</title>
|
||||
</rect>
|
||||
</a>
|
||||
<a href="kaerimbor.html" target="_parent">
|
||||
<a href="kaerimbor.html" target="details">
|
||||
<rect x="168" y="1486" width="244" height="40">
|
||||
<title>Kaerimbor</title>
|
||||
</rect>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 568 B After Width: | Height: | Size: 577 B |