Cambiare font con onmouseover

3 Risposte

• B

  bottomap

  Utente Attivo

  Iscritto da

  mar, 2004

  Messaggi:

  312

  Re: Cambiare font con onmouseover

  09 mag 2007, 23:12

  Ciao,
  
  Potresti usare un codice simile al seguente (con qualche piccola modifica al tuo originale, senza toccare il CSS):
  

  <script language="JavaScript">
  function ingrandisci(){
     document.getElementById("xxx").setAttribute("style","color:#00ffff; font-family:arial; font-size:20px; text-decoration:none;");
  }
  
  function rimpicciolisci(){
     document.getElementById("xxx").removeAttribute("style");
  }
  </script>

  E nell'html:

  <a class="hcb" id="hcb" href="#" onclick="return mostraMenu('menu1')" onmouseover="ingrandisci()" onmouseout="rimpicciolisci()">-&nbsp;&nbsp;Henri Cartier-Bresson, il <span id="xxx">Maestro</span></a>

  Tutto il gioco sta nello <span> presente nell'html e nella gestione dell'onomuseover e dell'onmouseout... nel primo imposti l'attributo style verso quello che preferisci (qui ho messo un font a 20px), nel secondo lo rimuovi (nota gli attributi id, necessari per la getelementbyid).
  
  PS: Ci sarebbe verso anche intervenire direttamente sullo stile via DOM (quelle chiamate che vedi nei javascript), ma il codice diverrebbe compatibile solo con IE...
  
  ------------------------------------------------------------------------------
  
  In alternativa, scrivendo meno codice ma toccando il css:

  a.hcb:link { color:#ffffff; font-family:arial; font-size:15px; text-decoration: none;} /*HCB*/
  a.hcb:visited { color:#ffffff; font-family:arial; font-size:15px; text-decoration: none;}
  a.hcb:hover { color:#00ffff; font-family:arial; font-size:15px; text-decoration:none;}
  #xxx.ingrandito { color:#00ffff; font-family:arial; font-size:20px; text-decoration:none;}

  Nel javascript:

  <script language="JavaScript">
  function ingrandisci(){
    document.getElementById("xxx").setAttribute("class","ingrandito");
  }
  function rimpicciolisci(){
    document.getElementById("xxx").removeAttribute("class");
  }
  </script>
  

  E l'html resta come nel primo esempio...
  
  Ciaociao
• P

  prouser

  Pochi posts

  Iscritto da

  mag, 2007

  Messaggi:

  37

  Re: Cambiare font con onmouseover

  09 mag 2007, 23:37

  L'ho provato, non mi funziona ma avevo già risolto in altro modo
• B

  bottomap

  Utente Attivo

  Iscritto da

  mar, 2004

  Messaggi:

  312

  Re: Cambiare font con onmouseover

  10 mag 2007, 00:47

  Ciao,
  
  Si, hai ragione... il codice che ho proposto funziona solo con Firefox. Rimedio comunque con qualcosa di più funzionale e, stavolta, funzionante anche su IE:
  
  -Il CSS rimane quello originale
  -Il nuovo script:

  <script language="JavaScript">
  function ingrandisci(){
      document.getElementById("xxx").style.fontSize="20px";
  }
  function rimpicciolisci(){
      document.getElementById("xxx").style.fontSize="15px";
  }
  </script>
  

  -Ed il link comprenderà solo lo span:

  <a class="hcb" href="#" onclick="return mostraMenu('menu1')" onmouseover="ingrandisci()" onmouseout="rimpicciolisci()">-&nbsp;&nbsp;Henri Cartier-Bresson, il <span id="xxx">Maestro</span></a>

  Ciaociao