Newsgroup: it.comp.lang.javascript
Titolo: fogli di stile! OT?

Ho visto spesso, siti con i link che "onmouseover", cambiano colore e/o
dimensione.
curiosando nel codice html, ho visto che non si tratta di "rollover", ma
sono preceduti da un parametro "class...."
credo si tratti dei fogli di stile. E' esatto?
Qualcuno sa come posso ottenere almeno questo risultato, senza addentrarmi
troppo nel dettaglio?
la questione forse non rigurada questo ng, sapete indcarmene uno, in
italiano, più appropiato?
o qualche indirizzo in rete in cui si trati dei "css(?)"
grazie a tutti, comunque!! :-)

 grazie a tutti, comunque!! :-)
http://www.w3.org/Style/CSS/
~~
artemis.alpeia

copia il codice, salvalo in un file di testo che salverai con estensione 
.html e ... buona lettura!
Ciao, Daniele.
<html>
<head>
<title>sfondoCella</title>
</head>
<style type="text/css">
body{
width: 100%;
height: 100%;
overflow: auto;
padding: 10px;
margin: 0px;
background-color: #f5f5f5;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #aaaa99;
}
h4{
padding: 5px;
margin: 0px 0px 10px 0px;
font-size: 12px;
font-weight: normal;
border-width: 1px;
border-style: solid;
}
h4.domanda{
background-color: #f0f0ff;
color: #333399;
border-color: #000099;
}
h4.risposta{
background-color: #333399;
color: #f0f0ff;
border-color: #8888ff;
}
table{
empty-cells: show;
table-layout: auto;
border-spacing: 0px;
border-collapse: collapse;
margin: 0px;
padding: 0px;
border-width: 1px 0px 0px 1px;
border-style: solid;
border-color: #000000;
}
td, th{
color: 	#333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 5px;
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #000000;
cursor: default;
}
td.out{
background-color: #000099;
color: #eeeeff;
}
td.over{
background-color: #eeeeff;
color: #000099;
}
a{
height: 100%;
margin: 0px;
padding: 5px;
color: #eeeeff;
background-color: #000099;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: default;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
a:hover{
background-color: #eeeeff;
color: #000099;
}
</style>
<body>
<h4 class="domanda">
 > Ho visto spesso, siti con i link che "onmouseover", cambiano colore 
e/o<br>
 > dimensione.<br>
 > curiosando nel codice html, ho visto che non si tratta di "rollover", 
ma<br>
 > sono preceduti da un parametro "class...."<br>
 > credo si tratti dei fogli di stile. E' esatto?<br>
 > Qualcuno sa come posso ottenere almeno questo risultato, senza 
addentrarmi<br>
 > troppo nel dettaglio?<br>
</h4>
<h4 class="risposta">
Come puoi vedere dal codice, il lavoro maggiore si svolge a livello di 
impostazioni CSS.<br>
Ho gestito il cambio di colore inserendo direttamente sul marcatore 
<strong>&lt;td&gt;</strong><br>
la chiamata JavaScript 
<strong>onMouseOver=&quot;this.className='over'&quot; 
onMouseOut=&quot;this.className='out'&quot;;</strong><br><br>
Il tutto funziona da Explorer 5.5 in poi (forse anche con il 5.0) e con 
Netscape 6.1 e successive versioni<br><br>
Un <strong>altro metodo</strong>, invece, non implica l'uso di 
JavaScript, ma solo degli <strong>stili CSS</strong>.<br>
Nota le modifiche apportate alle definizioni generali degli stili della 
pagina effettuate mediante dichiarazioni di stile inline direttamente 
nei vari tag della tabella<br>
Anche qui, prudente e doveroso č un buon controllo su vari browser e 
piattaforme ...<br><br>
Ciao!,<br>
<blockquote>Daniele.</blockquote>
</h4>
<table>
<tr>
<th colspan="3">
implementazione via <strong>JavaScript</strong>
</th>
</tr>
<tr>
<td class="out" onMouseOver="this.className='over'" 
onMouseOut="this.className='out'">
prima cella
</td>
<td class="out" onMouseOver="this.className='over'" 
onMouseOut="this.className='out'">
seconda cella
</td>
<td class="out" onMouseOver="this.className='over'" 
onMouseOut="this.className='out'">
terza cella
</td>
</tr>
</table>
<br><br>
<table style="border-width: 0px;">
<tr>
<th colspan="3" style="border-width: 1px 1px 0px 1px;">
implementazione via <strong>CSS</strong>
</th>
</tr>
<tr>
<th colspan="3" style="padding: 0px; border-width: 0px;">
<a href="JavaScript:void(0)">primo link</a><a 
href="JavaScript:void(0)">secondo link</a><a 
href="JavaScript:void(0)">terzo link</a>
</th>
</tr>
</table>
</body>
</html>

 troppo nel dettaglio?
Basta un foglio di stile:
<style type="text/css">
<!--
a           {text-decoration: none; color: black}
a:hover  {text-decoration: underline; color: red; background: white}
-->
</style>
Se vuoi cambiare gli sfondi delle tabelle
bisogna aggiungere qualche riga in più.
MaRoK