|
|
| Line 1: |
Line 1: |
| [[File:5_cent_italy_2002_obverse.jpg|600px|class=moneta-overlay]]
| | <div style="position: relative; display: inline-block;"> |
| | | <img src="/wiki/Special:FilePath/5_cent_italy_2002_obverse.jpg" width="600"> |
| {{#tag:html|
| | <div style="position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; background-color: rgba(255,0,0,0.3); border: 2px solid red;"></div> |
| <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> | | </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>
| |
| }}
| |
