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

Groupement + hover

This commit is contained in:
Yan Maniez 2020-01-21 12:24:28 +01:00
parent 7563210c5d
commit 8981e586b1
21 changed files with 1354 additions and 1057 deletions

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="ferrance.jpg" /><g class="region"><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></g><g class="region"><a href="portsable.html" target="details"><rect x="1348" y="1480" width="251" height="40"><title>Port-Sable</title></rect></a></g><g class="region"><a href="fourche.html" target="details"><rect x="1666" y="17" width="211" height="40"><title>Fourche</title></rect></a></g><g class="region"><a href="valastir.html" target="details"><rect x="1836" y="382" width="208" height="35"><title>Valastir</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,28 +1,36 @@
<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>
<g class="region">
<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>
</g>
<g class="region">
<a href="portsable.html" target="details">
<rect x="1348" y="1480" width="251" height="40">
<title>Port-Sable</title>
</rect>
</a>
</g>
<g class="region">
<a href="fourche.html" target="details">
<rect x="1666" y="17" width="211" height="40">
<title>Fourche</title>
</rect>
</a>
</g>
<g class="region">
<a href="valastir.html" target="details">
<rect x="1836" y="382" width="208" height="35">
<title>Valastir</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 888 B

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="fourche.jpg" /><g class="region"><a href="virylene.html" target="details"><rect x="28" y="100" width="212" height="34"><title>Virylène</title></rect></a></g><g class="region"><a href="hauterive.html" target="details"><rect x="1172" y="0" width="230" height="29"><title>Hauterive</title></rect></a></g><g class="region"><a href="wyks.html" target="details"><rect x="1876" y="1429" width="160" height="33"><title>Wyks</title></rect></a></g><g class="region"><a href="ferrance.html" target="details"><rect x="333" y="1476" width="215" height="34"><title>Ferrance</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,23 +1,31 @@
<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>
<g class="region">
<a href="virylene.html" target="details">
<rect x="28" y="100" width="212" height="34">
<title>Virylène</title>
</rect>
</a>
</g>
<g class="region">
<a href="hauterive.html" target="details">
<rect x="1172" y="0" width="230" height="29">
<title>Hauterive</title>
</rect>
</a>
</g>
<g class="region">
<a href="wyks.html" target="details">
<rect x="1876" y="1429" width="160" height="33">
<title>Wyks</title>
</rect>
</a>
</g>
<g class="region">
<a href="ferrance.html" target="details">
<rect x="333" y="1476" width="215" height="34">
<title>Ferrance</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 709 B

After

Width:  |  Height:  |  Size: 861 B

Before After
Before After

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="hauterive.jpg" /><g class="region"><a href="vercelise.html" target="details"><rect x="1144" y="1500" width="224" height="33"><title>Vercélise</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,8 +1,10 @@
<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>
<g class="region">
<a href="vercelise.html" target="details">
<rect x="1144" y="1500" width="224" height="33">
<title>Vercélise</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 288 B

After

Width:  |  Height:  |  Size: 326 B

Before After
Before After

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Before After
Before After

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="portsable.jpg" /><g class="region"><a href="oceanpelurique.html" target="details"><rect x="29" y="162" width="246" height="116"><title>Océan Pelurique</title></rect></a></g><g class="region"><a href="ferrance.html" target="details"><rect x="1521" y="1" width="217" height="28"><title>Ferrance</title></rect></a></g><g class="region"><a href="desertdetanith.html" target="details"><rect x="838" y="1500" width="332" height="34"><title>Désert de Tanith</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,18 +1,24 @@
<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>
<g class="region">
<a href="oceanpelurique.html" target="details">
<rect x="29" y="162" width="246" height="116">
<title>Océan Pelurique</title>
</rect>
</a>
</g>
<g class="region">
<a href="ferrance.html" target="details">
<rect x="1521" y="1" width="217" height="28">
<title>Ferrance</title>
</rect>
</a>
</g>
<g class="region">
<a href="desertdetanith.html" target="details">
<rect x="838" y="1500" width="332" height="34">
<title>Désert de Tanith</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 600 B

After

Width:  |  Height:  |  Size: 714 B

Before After
Before After

View file

@ -13,4 +13,8 @@ h1 {
}
#range {
position: fixed; top: 0; left: 0; z-index: 2; visibility: hidden;
}
.region:hover {
fill: #ffffff;
opacity: .5;
}

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="vercelise.jpg" /><g class="region"><a href="hauterive.html" target="details"><rect x="889" y="0" width="234" height="28"><title>Hauterive</title></rect></a></g><g class="region"><a href="virylene.html" target="details"><rect x="783" y="1484" width="211" height="34"><title>Virylène</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,13 +1,17 @@
<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>
<g class="region">
<a href="hauterive.html" target="details">
<rect x="889" y="0" width="234" height="28">
<title>Hauterive</title>
</rect>
</a>
</g>
<g class="region">
<a href="virylene.html" target="details">
<rect x="783" y="1484" width="211" height="34">
<title>Virylène</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 429 B

After

Width:  |  Height:  |  Size: 505 B

Before After
Before After

View file

@ -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><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>
<div><svg id="map" style="fill: transparent" viewBox="0 0 2048 1536" xmlns="http://www.w3.org/2000/svg"><image href="xelys.jpg" /><g class="region"><a href="forterive.html" target="details"><rect x="834" y="4" width="225" height="32"><title>Forterive</title></rect></a></g><g class="region"><a href="boisdebaram.html" target="details"><rect x="1084" y="7" width="207" height="26"><title>Bois de Baram</title></rect></a></g><g class="region"><a href="kaerimbor.html" target="details"><rect x="168" y="1486" width="244" height="40"><title>Kaerimbor</title></rect></a></g></svg></div>
</body>
</html>

View file

@ -1,18 +1,24 @@
<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>
<g class="region">
<a href="forterive.html" target="details">
<rect x="834" y="4" width="225" height="32">
<title>Forterive</title>
</rect>
</a>
</g>
<g class="region">
<a href="boisdebaram.html" target="details">
<rect x="1084" y="7" width="207" height="26">
<title>Bois de Baram</title>
</rect>
</a>
</g>
<g class="region">
<a href="kaerimbor.html" target="details">
<rect x="168" y="1486" width="244" height="40">
<title>Kaerimbor</title>
</rect>
</a>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 577 B

After

Width:  |  Height:  |  Size: 691 B

Before After
Before After