1
0
Fork 0
mirror of https://github.com/Nioux/AideDeJeu.git synced 2025-10-30 06:56:10 +00:00

Molette + drag&drop

This commit is contained in:
Yan Maniez 2020-01-20 18:29:47 +01:00
parent 5aa5b35a24
commit 7563210c5d
68 changed files with 669 additions and 106 deletions

View file

@ -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>

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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

Before After
Before After

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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

Before After
Before After

View 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 lalchimiste</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 lhiver</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>

View file

@ -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 lhiver</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>

View file

@ -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>

View file

@ -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

Before After
Before After

View 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>

File diff suppressed because one or more lines are too long

View file

@ -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

Before After
Before After

View 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>

View file

@ -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>

View file

@ -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>

View file

@ -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

Before After
Before After

View file

@ -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);

View file

@ -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;
}

View 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> Lhôtel de ville, le temple, la chapelle de Chloris, lauberge 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 lhiver</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>

View file

@ -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 lhiver</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>

View file

@ -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>

View file

@ -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

Before After
Before After

View 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 dun canyon</div>
<div>Aussi appelée <i>Porte dOr</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 dAnddalf 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>

View file

@ -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 dAnddalf 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>

View file

@ -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>

View file

@ -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

Before After
Before After