Newsgroup: it.comp.www.html
Titolo: Css particolari per un link

Sto cercando di ottenere un effetto particolare per i link.
In pratica vorrei mettere i link di navigazione tutti ad esempio sulla
sinistra come varie righe di una tabella, e fare in modo che con il
mouse sopra (hover) l'intera cella contenente il link cambi colore.
Per spiegare meglio, quello che vorrei fare lo si può vedere sul sito:
htt://
crossfire.real-time.com/
Ho provato a dare un'occhiata al metodo utilizzato li, ma francamente mi
è sembrato al di sopra delle mie attuali conoscenze.
-- 
  _  _ >>Now on Linux<<  _     ||              Home Page:
 | \| |___ _____ ___ ___|_|___ ||  
http://digilander.iol.it/nemesis2001
 | .` | -_|     | -_|_ -| |_ -|||     e niente sarà più come prima ...
 |_|\_|___|_|_|_|___|___|_|___|||            ... o quasi ;)

 mouse sopra (hover) l'intera cella contenente il link cambi colore.
Il metodo più logico sarebbe:
td {background: white}
td:hover {background: yellow}
(lo sfondo di tutte le celle diventa giallo su onmouseover)
Sfortunatamente funziona solo su ns6+/mozilla.
Per ora non ho trovato nessun metodo crossbrowser altrettanto sintetico.
L'unico che sembra funzionare su tutti i browser (tranne ns4, ovvio...) è:
<td bgcolor="white"
     onmouseover="this.style.background='yellow'"
     onmouseout="this.style.background='white'">
blablabla</td>
Se qualcuno ha soluzioni migliori... interessa molto anche a me!
MaRoK

Una soluzione c'č, ma non č affatto sintetica:
mettere nel tag head questi script: (sono behaviors di Dreamweaver MX)
<script language="JavaScript">
<!--
function pviiW3Cbg(obj, pviiColor) { //v1.1 by Project VII
 obj.style.backgroundColor=pviiColor
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2)
eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
utilizzare questa sintassi per la cella (in questo caso "news"
<td class="menu" onClick="MM_goToURL('parent','news.htm');return
document.MM_returnValue" onMouseOver="pviiW3Cbg(this, '#669999')"
onMouseOut="pviiW3Cbg(this, '#99CCFF')"><a class="menutxt"
href="news.htm">News</a></td>
Con uno stile adeguato che dia alla cella un'effetto tridimensionale si
riesce a dare l'impressione di usare un rollover grafico.
Alla fine io ho scelto di non utilizzare questa soluzione perchč troppo
complicata e mi sembra che il gioco non valga la candela.
Ciao Vittorio

 htt://
crossfire.real-time.com/
Questo funziona molto bene su diversi browser.
Posti il codice per studiarlo, per favore?
Emiliano Farinella
-- 
"Science as a candle in the dark" (Carl Sagan)

 MaRoK
Visto che l'hover su ie viene implementato solo per lo stretto necessario - 
vorrei sapere sulle necessità di chi si basano :0)- puoi provare a lavorare 
direttamente sul link:
td a{display:block; background: white;}
td a:hover {background: yellow;}
Su Ie4, e probabilmente su altri browser un po' vecchiotti, la proprietà 
display non mi sembra sia implementata, ma sui browser più nuovi dovrebbe 
funzionare.
ciao
daria m.

 href="news.htm">News</a></td>
se leggo bene tra le righe con questo script
hai il vantaggio di avere un link lungo tutta
la lunghezza del cella.
utilizzando solo:
td {background: white}
td:hover {background: yellow}
purtroppo questa cosa non si riesce a fare. :(
o sbaglio?
bye
-- 
goldicus1970 AT 
yahoo.it
http://deelan.cjb.net

 la lunghezza del cella.
con il display:block assegnato al link dovresti riuscirci anche tramite css
ciao
Daria m.

 ciao
grazie, provero'. :)


 td a:hover {background: yellow;}
GRANDE!!!!
Davvero una bella soluzione, sintetica ed elegante!
Ora si tratta di vedere su quali browser funziona.
Io ho fatto un po' di prove su windows:
Su Netscape4 manco esiste l'hover, quindi il problema non si pone.
Su Opera5.12 e Opera 6.01 funge,
ma rimane una sottile sottolineatura in alto (?) sopra il link
che però scompare inserendo text-decoration: none.
Su Mozilla0.9.7, Mozilla 1.2, Netscape6.2, Netscape7.0 ed Explorer6.0 funziona.
Su Explorer4.0 l'hover si limita al singolo link,
cioè fa rollover sul solo sfondo della parola linkata
e non carica alcun colore di sfondo per la cella.
Un po' meno bello dell'altra soluzione "ripetitiva", ma pazienza...
la leggerezza della pagina farà piacere anche agli utenti IE4.
Cmq, sia per IE4 che per NS4,
è consigliabile impostare anche uno sfondo per il td
dello stesso colore dello sfondo del link: il baco si noterà di meno.
Qualcuno può fare dei test su explorer5.x per win
e su una manciata di browser per qualche altro S.O.?
Alla fine il codice è diventato:
<style type="text/css">
<!--
td {background: white}
td a {display:block; background: white; text-decoration:none}
td a:hover {background: yellow}
-->
</style>
E poi nella tabella qualcosa del genere:
<table width="50%" border=0 cellpadding=0 cellspacing=0>
<tr><td align="center"><a href="#">testo di prova</a>
</td></tr></table>
Grazie!
MaRoK

 </style>
bello, quel display: block di "td a" fa si' che
l'anchor si espanda per tutta la dimensione
del container, quindi l'intera cella e cliccabile
e non solo il testo del link, e questo era il
mio cruccio maggiore :)
ottimo.


 td a:hover {background: yellow;}
Miticuzzo funziona :-)


 td:hover {background: yellow}
Azz, manco sapevo che hover si può applicare anche a td.
L'ho provato con Galeon, ed in effetti funziona, anche se un pò male.
In pratica le celle sono un pò più grandi dei link, se allora passo con
il mouse su una parte della cella dove non c'è il link, la cella cambia
colore ma il link no.


 Posti il codice per studiarlo, per favore?
Non l'ho postato perchè è abbastanza lungo.
Comunque una pagina la puoi ottenere semplicemente salvando su disco e
così ti vai a leggere l'html.
Per i css ti basta puntare il browser sui due file:
1) 
http://crossfire.real-time.com/css/style.css
 (non sono sicuro al 100%
che si tratti di style.css, cmq uno sguardo al codice html permette di
fugare questo dubbio.)
2) 
http://crossfire.real-time.com/css/theme1.css
Cmq sto sito mi piace molto, mi pare che non utilizzi affatto tabelle,
tutta l'impaginazione, ed anche l'effetto di cui discutevamo in questo
thread sono fatti esclusivamente con i css.


 e su una manciata di browser per qualche altro S.O.?
Se mi mandi i file per e-mail faccio un po' di test su Mac OS X
(Mozilla, Netscape, IR, Opera)
Ciao,


 (Mozilla, Netscape, IR, Opera)
Ti ho inviato il file.
Se qualcun altro si vuole cimentare (magari su linux...)
il codice che ho usato è (esclusa l'intestazione):
<style type="text/css">
<!--
body       {background: navy}
td         {background: white; font-family: Verdana, Sans-Serif; font-size: 1em; text-align: center}
td a       {display:block; background: white; color: green; text-decoration:none}
td a:hover {background: #80ff40; color: black; text-decoration:none}
-->
</style>
</head>
<body>
<table width="100%" border=1 cellpadding=0 cellspacing=0><tr>
<td><a href="#">cella 1</a></td>
<td><a href="#">cella 2</a></td>
<td><a href="#">cella 3</a></td>
</tr></table>
</body>
</html>
Se le celle cambiano colore di sfondo al passare del mouse,
vuol dire che funziona! :o)
MaRoK

 Ti ho inviato il file.
Grazie della cortesia.
Testato su Mac OS X 10.2.2
Netscape 7: OK
Opera 6: OK
Mozilla 1.2: OK
IE 5.2: OK
Direi che e' un metodo abbastanza affidabile :-)


 Se qualcun altro si vuole cimentare (magari su linux...)
Su Mozilla 1.1 (ma anche sui precedenti se non mi ricordo male), 
Konqueror (3.0.3) e Galeon funziona. 
ciao
daria m.

 Direi che e' un metodo abbastanza affidabile :-)
OTTIMO!
Grazie!
MaRoK

 Konqueror (3.0.3) e Galeon funziona.
Stupendo!
Finalmente posso rasare via un bel po' di codice vecchio e zozzo! ;o)
Grazie!
MaRoK

 Grazie!
Figurati, speriamo che prima o poi l' :hover venga implementato per tutti 
gli elementi, e non solo per i link, anche nei browser piů usati, č cosě 
comodo e, sopratutto, pulito!
ciao
daria m.


Con IE 5.5 e Opera 6.01 per win, se la cella
NON è dimenionata tutta la cella è hover;
se lo E', è hover solo la riga su cui  c'è l'anchor;
se si specifica la height della cella tramite css
nel "td a" tutta la cella è hover.
uahu propio bello e comodo sto css....
Bye Cico

 uahu propio bello e comodo sto css....
Infatti! :o)
MaRoK