Difference between revisions of "Test page"
From Muninn land
Line 1: | Line 1: | ||
[ | [[File:5_cent_italy_2002_obverse.jpg|600px|class=moneta-overlay]] | ||
{{#tag:html| | |||
<style> | |||
.image-highlight-container { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
.image-highlight-container .highlight-box { | |||
position: absolute; | |||
border: 2px solid red; | |||
background-color: rgba(255, 0, 0, 0.3); | |||
display: none; | |||
pointer-events: none; | |||
z-index: 10; | |||
} | |||
/* Posizionamento rispetto all'immagine */ | |||
.hl1 { top: 140px; left: 250px; width: 80px; height: 80px; } /* Colosseo */ | |||
.hl2 { top: 320px; left: 180px; width: 240px; height: 60px; } /* Valore */ | |||
.hl3 { top: 60px; left: 120px; width: 350px; height: 350px; border-radius: 50%; } /* Bordo */ | |||
.hl4 { top: 200px; left: 400px; width: 80px; height: 50px; } /* Firma/RI */ | |||
</style> | |||
}} | |||
{{#tag:html| | |||
<div class="image-highlight-container" style="width:600px; margin-top:-610px;"> | |||
<div id="highlight1" class="highlight-box hl1"></div> | |||
<div id="highlight2" class="highlight-box hl2"></div> | |||
<div id="highlight3" class="highlight-box hl3"></div> | |||
<div id="highlight4" class="highlight-box hl4"></div> | |||
</div> | |||
}} | |||
{{#tag:html| | |||
<table style="border-collapse: collapse; margin-top: 1em;"> | |||
<thead> | |||
<tr> | |||
<th style="border: 1px solid #aaa; padding: 6px; background-color: #f0f0f0;">Elemento</th> | |||
<th style="border: 1px solid #aaa; padding: 6px; background-color: #f0f0f0;">Descrizione</th> | |||
</tr> | |||
</thead> | |||
<tbody> | |||
<tr onmouseover="document.getElementById('highlight1').style.display='block';" | |||
onmouseout="document.getElementById('highlight1').style.display='none';"> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Colosseo</td> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Elemento centrale della moneta</td> | |||
</tr> | |||
<tr onmouseover="document.getElementById('highlight2').style.display='block';" | |||
onmouseout="document.getElementById('highlight2').style.display='none';"> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Valore</td> | |||
<td style="border: 1px solid #aaa; padding: 6px;">"5 EURO CENT"</td> | |||
</tr> | |||
<tr onmouseover="document.getElementById('highlight3').style.display='block';" | |||
onmouseout="document.getElementById('highlight3').style.display='none';"> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Bordo</td> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Stelle lungo il bordo esterno</td> | |||
</tr> | |||
<tr onmouseover="document.getElementById('highlight4').style.display='block';" | |||
onmouseout="document.getElementById('highlight4').style.display='none';"> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Dettagli</td> | |||
<td style="border: 1px solid #aaa; padding: 6px;">Firma, RI, anno</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
}} |