Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Effetto onmouseover su links crossbrowser

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

I Css (Cascade Style Sheets - www.risore.net/css) hanno aggiunto molte potenzialità al linguaggio Html ed i Web masters che riescono a sfruttarli al meglio possono manipolare perfettamente il layout di un sito Web in modo altamente professionale e veloce.
Purtroppo Netscape sembra avere implementato a modo suo le specifiche del W3C (di cui Netscape è membro) e ha reso, in questo senso, la vita più difficile a tutti i realizzatori di siti Internet.
Per fortuna Dhtml ci viene incontro e grazie alla sua elasticità ha reso possibile la compatibilità di alcuni effetti tipici dei Css. Ad esempio l'effetto on mouse over su links, con cambi di colore del text-background, può essere ottenuto in modo crossbrowser con alcuni accorgimenti in Javascript. Vediamo come:

<STYLE type=text/css>
A {
FONT-FAMILY: Arial,Helvetica,sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; LINE-HEIGHT: normal; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: #ffcccc; COLOR: #660066
}
</STYLE>

Questa prima parte di Css definisce le caratteristiche del testo, mentre con A:hover si imposta l'effetto on mouse over, che però non verrà letto da Netscape. Quest'ultimo browser infatti interprerà la sintassi scripting:

<SCRIPT language=JavaScript>
// Emulazione dell'effetto link hover di IE in NS.

var hoverBgColor = "#ffcccc"; // Copiato dall'IE una:hover definizione.
var hoverColor = "#660066";

function hover(layer) {

var link, str;

// Crea un sub-layer copiando il link in questo e cambiando
// sfondo e colori del testo.

link = layer.document.links[0];
str = '<a href="' + link.href + '"';
if (link.target)
str += ' target= "' + link.target + '"'
str += '><font color="' + hoverColor + '">' + link.text + '</font>';

layer.hoverLayer = new Layer(layer.clip.width, layer);
layer.hoverLayer.document.open("text/html", "replace");
layer.hoverLayer.document.write(str);
layer.hoverLayer.document.close();
layer.hoverLayer.bgColor = hoverBgColor;

// Mostra il layer hover iniziale.

layer.hoverLayer.visibility = "show";

// Metti un evento da catturare su questo layer per la visibilità del
// sub-layer.

layer.onMouseOver = hoverOn;
layer.onMouseOut = hoverOff;
}

function hoverOn() {

this.hoverLayer.visibility = "show";
}

function hoverOff() {

this.hoverLayer.visibility = "hide";
}

</SCRIPT>

Nelle variabili:

var hoverBgColor = "#ffcccc";
var hoverColor = "#660066";

vengono stabiliti rispettivamente il colore del background e del testo quando il mouse passa sopra il link (onmouseover). Il resto del codice serve a modificare il layer che conterrà il collegamento ipertestuale. E' importante infatti, ai fini di un risultato positivo, racchiudere il testo linkato tra <layer><ilayer> e </layer></ilayer>. Come su può notare infatti:

<FONT face=Arial,Helvetica size=2><ILAYER><LAYER onmouseover=hover(this);><A href="http://www.risorse.net/css" target=_blank>Cascade Style Sheetes</A></LAYER></ILAYER>

Chiudiamo questa lettera nella speranza che almeno i due principali browsers possano trovare degli accordi per limitare gli stravolgimenti sintattici a cui devono ricorrere i Web masters più perspicaci.
 

 
 
Home > dhtml > teoria > 1999 > dicembre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati