Groupement + hover
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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><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>
|
||||
|
|
|
|||
|
|
@ -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 Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 30 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -13,4 +13,8 @@ h1 {
|
|||
}
|
||||
#range {
|
||||
position: fixed; top: 0; left: 0; z-index: 2; visibility: hidden;
|
||||
}
|
||||
.region:hover {
|
||||
fill: #ffffff;
|
||||
opacity: .5;
|
||||
}
|
||||
|
|
@ -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><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>
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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><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>
|
||||
|
|
|
|||
|
|
@ -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 |