Mudanças entre as edições de "Widget:VisnoTeste"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 86: Linha 86:
     .personagem.kizaru {
     .personagem.kizaru {
       background-position: center -20px;
       background-position: center -20px;
    }
    .personagem.luffypre {
      background-position: center;
     }
     }


Linha 318: Linha 322:
   </div>
   </div>


  <!-- baby 5 -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif="">
      <span>Baby 5</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
    <!-- Bartolomeo -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/ryrmqPvK/barto.png" data-gif="">
      <span>Bartolomeo</span>
      <div class="gif-overlay"></div>
    </div>
  </div>


    <!-- Basil Hawkins -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/V6FKtRhM/basil.png" data-gif="">
      <span>Basil Hawkins</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
    <!-- Bastille -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/C1J45KZs/bastille.png" data-gif="">
      <span>Bastille</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
    <!-- Bellamy -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/T38nRb7X/bellamy.png" data-gif="">
      <span>Bellamy</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- Bonney -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/k4D2NM1c/bonney.png" data-gif="">
      <span>Jewelry Bonney</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- Brook pré -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/Sx7D24vR/brookpre.png" data-gif="">
      <span>Brook</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
   <!-- bege -->
   <!-- bege -->
   <div class="tier-gold">
   <div class="tier-gold">
     <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
     <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif="">
       <span>Capone Gang Bege</span>
       <span>Capone Gang Bege</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- carrot -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/MpPfrrct/carrot.png" data-gif="">
      <span>Carrot</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- chopper pré -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/7YqCPy0m/tonytony.png" data-gif="">
      <span>Chopper</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- crocodile -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/hGm4bCVX/croco.png" data-gif="">
      <span>Sir Crocodile</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- dalamtian -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/Gpnnrbsp/dalma.png" data-gif="">
      <span>Dalmatian</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- franky pré -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/RCJr33Q0/frankypre.png" data-gif="">
      <span>Franky</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- moria -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/tg4w974p/moria.png" data-gif="">
      <span>Gecko Moria</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- hina -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/90hBFNYZ/hina.png" data-gif="">
      <span>Hina</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- burgess -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/hv27WCyS/burgess.png" data-gif="">
      <span>Jesus Burgess</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- kid -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/wMq0QGRH/kid.png" data-gif="">
      <span>Eustass Kid</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
  <!-- killer -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/44W5Twh7/killer.png" data-gif="">
      <span>Killer</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
  <!-- koala -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/FsqwhhJL/koala.png" data-gif="">
      <span>Koala</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
  <!-- leo e mansherry -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/2yyXftkG/leo-masherry.png" data-gif="">
      <span>Leo & Mansherry</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- luffy pré -->
  <div class="tier-gold">
    <div class="personagem luffypre" data-static="https://i.postimg.cc/PrZ0fBbV/luffypre.png" data-gif="">
      <span>Monkey D. Luffy</span>
       <div class="gif-overlay"></div>
       <div class="gif-overlay"></div>
     </div>
     </div>
   </div>
   </div>


  <!-- bon clay -->
    <!-- nami pré -->
   <div class="tier-prata">
   <div class="tier-gold">
     <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif="">
     <div class="personagem" data-static="https://i.postimg.cc/dQh6Rp1s/namipre2.png" data-gif="">
       <span>Bon Clay</span>
       <span>Nami</span>
       <div class="gif-overlay"></div>
       <div class="gif-overlay"></div>
     </div>
     </div>
   </div>
   </div>
 
    <!-- perona -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/wjKhQrmN/perona.png" data-gif="">
      <span>Perona</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- rebecca -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/9XKgwCct/rebecca.png" data-gif="">
      <span>Rebecca</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 


  <!-- alvida -->
    <!-- robin pré -->
   <div class="tier-bronze">
   <div class="tier-gold">
     <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif="">
     <div class="personagem" data-static="https://i.postimg.cc/W13DRLJC/robinpre.png" data-gif="">
       <span>Alvida (Slime)</span>
       <span>Robin</span>
       <div class="gif-overlay"></div>
       <div class="gif-overlay"></div>
     </div>
     </div>
   </div>
   </div>
 
    <!-- zoro pré -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/B6q9ysj1/zoropre.png" data-gif="">
      <span>Zoro</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 


   <!-- baby 5 -->
    <!-- ryuma -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/vmhS4nmc/ryuma.png" data-gif="">
      <span>Ryuma</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
    <!-- apoo -->
  <div class="tier-gold">
    <div class="personagem hancock" data-static="https://i.postimg.cc/fWVDhzHx/apoo.png" data-gif="">
      <span>Scratchmen Apoo</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- smoker -->
  <div class="tier-gold">
    <div class="personagem kizaru" data-static="https://i.postimg.cc/P53ShjVw/smoker.png" data-gif="">
      <span>Smoker</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
      <!-- law -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/FRtgssy7/law.png" data-gif="">
      <span>Trafalgar D. Water Law</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- urouge -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/1zDVB0F3/urouge.png" data-gif="">
      <span>Urouge</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
 
      <!-- usopp pré -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/qRSRdzy5/usopppre.png" data-gif="">
      <span>Usopp</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
    
      <!-- van augur -->
   <div class="tier-gold">
   <div class="tier-gold">
     <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif="">
     <div class="personagem hancock" data-static="https://i.postimg.cc/ZKTk5JH7/van.png" data-gif="">
       <span>Baby 5</span>
       <span>Van Augur</span>
       <div class="gif-overlay"></div>
       <div class="gif-overlay"></div>
     </div>
     </div>
   </div>
   </div>
 
      <!-- ichiji -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/x1wtqRYf/ichiji.png" data-gif="">
      <span>Vinsmoke Ichiji</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
      <!-- niji -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/RhYwySZS/niji.png" data-gif="">
      <span>Vinsmoke Niji</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- reiju -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/5NHBvCs6/reiju.png" data-gif="">
      <span>Vinsmoke Reiju</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 


      <!-- sanji pré -->
  <div class="tier-gold">
    <div class="personagem kizaru" data-static="https://i.postimg.cc/CKKkhnnh/sanjipre.png" data-gif="">
      <span>Vinsmoke Sanji</span>
      <div class="gif-overlay"></div>
    </div>
  </div>
 
      <!-- yonji -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/KvFKc3C6/yonji.png" data-gif="">
      <span>Vinsmoke Yonji</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
      <!-- drake -->
  <div class="tier-gold">
    <div class="personagem" data-static="https://i.postimg.cc/tRDbP1sQ/drake.png" data-gif="">
      <span>X Drake</span>
      <div class="gif-overlay"></div>
    </div>
  </div> 
</div>
</div>


Linha 411: Linha 693:
     "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
     "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
     "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
     "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
     "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5"
     "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5",
    "Bartolomeo": "https://wiki.gla.com.br/index.php/Bartolomeo",
    "Basil Hawkins": "https://wiki.gla.com.br/index.php/Basil_Hawkins",
    "Bastille": "https://wiki.gla.com.br/index.php/Bastille",
    "Bellamy": "https://wiki.gla.com.br/index.php/Bellamy",
    "Jewelry Bonney": "https://wiki.gla.com.br/index.php/Bonney",
    "Brook": "https://wiki.gla.com.br/index.php/Brook",
    "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
    "Carrot": "https://wiki.gla.com.br/index.php/Carrot",
    "Chopper": "https://wiki.gla.com.br/index.php/Chopper",
    "Sir Crocodile": "https://wiki.gla.com.br/index.php/Crocodile",
    "Dalmatian": "https://wiki.gla.com.br/index.php/Dalmatian",
    "Franky": "https://wiki.gla.com.br/index.php/Franky",
    "Gecko Moria": "https://wiki.gla.com.br/index.php/Moria",
    "Hina": "https://wiki.gla.com.br/index.php/Hina",
    "Jesus Burgess": "https://wiki.gla.com.br/index.php/Jesus_Burgess",
    "Eustass Kid": "https://wiki.gla.com.br/index.php/Kid",
    "Killer": "https://wiki.gla.com.br/index.php/Killer",
    "Koala": "https://wiki.gla.com.br/index.php/Koala",
    "Leo & Mansherry": "https://wiki.gla.com.br/index.php/Leo",
    "Monkey D. Luffy": "https://wiki.gla.com.br/index.php/Luffy",
    "Nami": "https://wiki.gla.com.br/index.php/Nami",
    "Perona": "https://wiki.gla.com.br/index.php/Perona",
    "Rebecca": "https://wiki.gla.com.br/index.php/Rebecca",
    "Robin": "https://wiki.gla.com.br/index.php/Robin",
    "Zoro": "https://wiki.gla.com.br/index.php/Zoro",
    "Ryuma": "https://wiki.gla.com.br/index.php/Ryuma",
    "Scratchmen Apoo": "https://wiki.gla.com.br/index.php/Apoo",
    "Smoker": "https://wiki.gla.com.br/index.php/Smoker",
    "Trafalgar D. Water Law": "https://wiki.gla.com.br/index.php/Law",
    "Urouge": "https://wiki.gla.com.br/index.php/Urouge",
    "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
    "Usopp": "https://wiki.gla.com.br/index.php/Usopp",
    "Van Augur": "https://wiki.gla.com.br/index.php/Van_Augur",
    "Vinsmoke Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
    "Vinsmoke Niji": "https://wiki.gla.com.br/index.php/Niji",
    "Vinsmoke Reiju": "https://wiki.gla.com.br/index.php/Reiju",
    "Vinsmoke Sanji": "https://wiki.gla.com.br/index.php/Sanji",
    "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
    "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
   };
   };


Edição das 17h35min de 16 de junho de 2025

<!DOCTYPE html> <html lang="pt-BR"> <head> 

 <meta charset="UTF-8">
 <title>Teste GIF Hover</title>
 <style>
   body {
     margin: 0;
     font-family: sans-serif;
     color: white;
   }

   .search-bar {
     text-align: right;
     padding: 20px;
   }

   .search-bar input {
     padding: 8px;
     width: 250px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }

   .container {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     justify-content: center;
     padding-bottom: 40px;
   }

   .personagem {
     width: 250px;
     height: 115px;
     border-radius: 10px;
     background-size: 150%;
     background-position: center -30px;
     transition: transform 0.3s;
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     padding: 5px;
     font-weight: bold;
     color: white;
     text-shadow: 1px 1px 4px #000, 0 0 20px #000;
     position: relative;
     cursor: pointer;
     border: 2px solid #58aaff;
     overflow: hidden;
     text-decoration: none;
   }

   .personagem span {
     z-index: 2;
   }

   .gif-overlay {
     position: absolute;
     inset: 0;
     background-repeat: no-repeat;
     background-size: 150%;
     background-position: center -30px;
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: 1;
     pointer-events: none;
   }

   .personagem:hover {
     transform: scale(1.05);
   }

   .personagem:hover .gif-overlay {
     opacity: 1;
   }

   .personagem.luffy .gif-overlay {
     background-position: center 0px;
   }

   .personagem.hancock {
     background-size: 115%;
   }

   .personagem.kizaru {
     background-position: center -20px;
   }

   .personagem.luffypre {
     background-position: center;
   }

   /* --------- Tiers ----------- */
   .tier-diamante .personagem {
     background-color: #414c5c;
   }

   .tier-gold .personagem {
     background-color: #d4af37;
   }

   .tier-prata .personagem {
     background-color: #c0c0c0;
   }

   .tier-bronze .personagem {
     background-color: #cd7f32;
   }
 </style>

</head> <body> 

 <input type="text" id="search" placeholder="Pesquisar personagem...">

     Aokiji

     Bartholomew Kuma

     Boa Hancock

     Borsalino Kizaru

     Brook (TS)

     Chopper (TS)

     Donquixote Doflamingo

     Dracule Mihawk

     Emporio Ivankov

     Enel

     Franky (TS)

     Jinbe

     Marshall D. Teach

     Marco

     Monkey D. Luffy (TS)

     Nami (TS)

     Portgas D. Ace

     Nico Robin (TS)



     Roronoa Zoro (TS)

     Sabo



     Sakazuki (Akainu)

     Shanks

     Usopp (TS)

     Uta

     Sanji (TS)

     Baby 5

     Bartolomeo

     Basil Hawkins

     Bastille

     Bellamy

     Jewelry Bonney

     Brook

     Capone Gang Bege

     Carrot

     Chopper

     Sir Crocodile

     Dalmatian

     Franky

     Gecko Moria

     Hina

     Jesus Burgess

     Eustass Kid

     Killer

     Koala

     Leo & Mansherry

     Monkey D. Luffy

     Nami

     Perona

     Rebecca

     Robin

     Zoro

     Ryuma

     Scratchmen Apoo

     Smoker

     Trafalgar D. Water Law

     Urouge

     Usopp

     Van Augur

     Vinsmoke Ichiji

     Vinsmoke Niji

     Vinsmoke Reiju

     Vinsmoke Sanji

     Vinsmoke Yonji

     X Drake

<script> 

 const cards = document.querySelectorAll('.personagem');

 cards.forEach(card => {
   const staticImg = card.getAttribute('data-static');
   const gifImg = card.getAttribute('data-gif');
   const overlay = card.querySelector('.gif-overlay');
   card.style.backgroundImage = `url('${staticImg}')`;

   card.addEventListener('mouseenter', () => {
     const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`;
     overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
   });

   card.addEventListener('mouseleave', () => {
     overlay.style.backgroundImage = ;
   });
 });

 document.getElementById('search').addEventListener('input', function () {
   const term = this.value.toLowerCase();
   cards.forEach(card => {
     const name = card.querySelector('span').textContent.toLowerCase();
     card.parentElement.style.display = name.includes(term) ? 'block' : 'none';
   });
 });

 //  Links dos personagens
 const personagemLinks = {
   "Aokiji": "https://wiki.gla.com.br/index.php/Aokiji",
   "Bartholomew Kuma": "https://wiki.gla.com.br/index.php/Kuma",
   "Boa Hancock": "https://wiki.gla.com.br/index.php/Boa_Hancock",
   "Borsalino Kizaru": "https://wiki.gla.com.br/index.php/Kizaru",
   "Brook (TS)": "https://wiki.gla.com.br/index.php/Brook_(Timeskip)",
   "Chopper (TS)": "https://wiki.gla.com.br/index.php/Chopper_(Timeskip)",
   "Donquixote Doflamingo": "https://wiki.gla.com.br/index.php/Doflamingo",
   "Dracule Mihawk": "https://wiki.gla.com.br/index.php/Mihawk",
   "Emporio Ivankov": "https://wiki.gla.com.br/index.php/Ivankov",
   "Enel": "https://wiki.gla.com.br/index.php/Enel",
   "Franky (TS)": "https://wiki.gla.com.br/index.php/Franky_(Timeskip)",
   "Jinbe": "https://wiki.gla.com.br/index.php/Jinbe",
   "Marshall D. Teach": "https://wiki.gla.com.br/index.php/Marshall_D._Teach",
   "Marco": "https://wiki.gla.com.br/index.php/Marco",
   "Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
   "Nami (TS)": "https://wiki.gla.com.br/index.php/Nami_(Timeskip)",
   "Portgas D. Ace": "https://wiki.gla.com.br/index.php/Ace",
   "Nico Robin (TS)": "https://wiki.gla.com.br/index.php/Robin_(Timeskip)",
   "Roronoa Zoro (TS)": "https://wiki.gla.com.br/index.php/Zoro_(Timeskip)",
   "Sabo": "https://wiki.gla.com.br/index.php/Sabo",
   "Sakazuki (Akainu)": "https://wiki.gla.com.br/index.php/Akainu",
   "Shanks": "https://wiki.gla.com.br/index.php/Shanks",
   "Usopp (TS)": "https://wiki.gla.com.br/index.php/Usopp_(Timeskip)",
   "Uta": "https://wiki.gla.com.br/index.php/Uta",
   "Sanji (TS)": "https://wiki.gla.com.br/index.php/Sanji_(Timeskip)",
   "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
   "Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
   "Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
   "Baby 5": "https://wiki.gla.com.br/index.php/Baby_5",
   "Bartolomeo": "https://wiki.gla.com.br/index.php/Bartolomeo",
   "Basil Hawkins": "https://wiki.gla.com.br/index.php/Basil_Hawkins",
   "Bastille": "https://wiki.gla.com.br/index.php/Bastille",
   "Bellamy": "https://wiki.gla.com.br/index.php/Bellamy",
   "Jewelry Bonney": "https://wiki.gla.com.br/index.php/Bonney",
   "Brook": "https://wiki.gla.com.br/index.php/Brook",
   "Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
   "Carrot": "https://wiki.gla.com.br/index.php/Carrot",
   "Chopper": "https://wiki.gla.com.br/index.php/Chopper",
   "Sir Crocodile": "https://wiki.gla.com.br/index.php/Crocodile",
   "Dalmatian": "https://wiki.gla.com.br/index.php/Dalmatian",
   "Franky": "https://wiki.gla.com.br/index.php/Franky",
   "Gecko Moria": "https://wiki.gla.com.br/index.php/Moria",
   "Hina": "https://wiki.gla.com.br/index.php/Hina",
   "Jesus Burgess": "https://wiki.gla.com.br/index.php/Jesus_Burgess",
   "Eustass Kid": "https://wiki.gla.com.br/index.php/Kid",
   "Killer": "https://wiki.gla.com.br/index.php/Killer",
   "Koala": "https://wiki.gla.com.br/index.php/Koala",
   "Leo & Mansherry": "https://wiki.gla.com.br/index.php/Leo",
   "Monkey D. Luffy": "https://wiki.gla.com.br/index.php/Luffy",
   "Nami": "https://wiki.gla.com.br/index.php/Nami",
   "Perona": "https://wiki.gla.com.br/index.php/Perona",
   "Rebecca": "https://wiki.gla.com.br/index.php/Rebecca",
   "Robin": "https://wiki.gla.com.br/index.php/Robin",
   "Zoro": "https://wiki.gla.com.br/index.php/Zoro",
   "Ryuma": "https://wiki.gla.com.br/index.php/Ryuma",
   "Scratchmen Apoo": "https://wiki.gla.com.br/index.php/Apoo",
   "Smoker": "https://wiki.gla.com.br/index.php/Smoker",
   "Trafalgar D. Water Law": "https://wiki.gla.com.br/index.php/Law",
   "Urouge": "https://wiki.gla.com.br/index.php/Urouge",
   "X Drake": "https://wiki.gla.com.br/index.php/X_Drake",
   "Usopp": "https://wiki.gla.com.br/index.php/Usopp",
   "Van Augur": "https://wiki.gla.com.br/index.php/Van_Augur",
   "Vinsmoke Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
   "Vinsmoke Niji": "https://wiki.gla.com.br/index.php/Niji",
   "Vinsmoke Reiju": "https://wiki.gla.com.br/index.php/Reiju",
   "Vinsmoke Sanji": "https://wiki.gla.com.br/index.php/Sanji",
   "Vinsmoke Yonji": "https://wiki.gla.com.br/index.php/Yonji",
   "Ichiji": "https://wiki.gla.com.br/index.php/Ichiji",
 };

 //  Envolve as boxes com <a>
 cards.forEach(card => {
   const span = card.querySelector('span');
   const nomePersonagem = span?.textContent.trim();
   const link = personagemLinks[nomePersonagem];
   if (link) {
     const wrapper = document.createElement('a');
     wrapper.href = link;
     wrapper.target = "_blank";
     wrapper.style.display = "block";
     wrapper.style.textDecoration = "none";
     card.parentElement.replaceChild(wrapper, card);
     wrapper.appendChild(card);
   }
 });

</script>

</body> </html>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:VisnoTeste&oldid=35899”