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 | 
 Yan Maniez
						Yan Maniez