Ok ho capito. Ora sono icasinato coi CSS e i DIV per il layout del sito (anzi se puoi visita il topic e rispondimi, sta un pò + sotto (Layout con CSS In sito Php-Nuke) ) ma appena ho tempo provo a studiarmelo bene e fare qualche prova. Comunque il linea di massima ho capito. Se hai un link che spieghi bene (in italiano però) te ne sarei grato.
Faccio la quarta scientifico-tecnologico indirizzo informatico.
Intervengo con il pieno sostegno a Salasir
Nei browser basati su Mozilla (FF), per creare l'effetto basta aggiungere poche righe al css:
Il lavoro per FF è fatto; sfortunatamente per IE 6 :hover funziona solo con i link, quindi bisogna trovare una soluzione.codice:.table tr:hover { background-color:#EE1100; color:#000; }
Utilizzo di JS per cambiare le classi
Dobbiamo per prima cosa aplicare lo stile ad una class CSS, in questo caso lux
Poi dobbiamo aggiungere il codice JavaScript alla pagina:codice:.table tr:hover, .table tr.lux { background-color:#EE1100; color:#000; }
Il codice localizza tutti i tag <tr> nel documento e assegna un gestore d'eventi mouse over; quest'ultimo applica le proprietà lux alle righe.codice:<script type="text/javascript"> var rows = document.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { rows [i] .onmouseover = function() { this.className += 'lux'; } rows [i] .onmouseover = function() { this.className = this.className.replace ('lux', ''); } } </script>
Mi sembra che sia tutto.
Spero di esserti stato d'aiuto.
P.S. Sottoscrivo quello scritto da pierofix
Sickbrain.org » A proposito di Web Publishing
Che fai, le fotocopie?Originariamente inviato da Sickbrain
P.S. Sottoscrivo quello scritto da pierofix
Leading the Web to Its Full Potential...
www.pierofix.it | www.w3.org | www.zeldman.com/externals | http://browsehappy.com | www.alistapart.com | www.webstandards.org | www.flickr.com/photos/pierofix/
vi chiedo...
ma se un visitatore ha il JS disabilitato non vede l'effetto???
Si puo' fare una cosa simile con i CSS?????????????
HELP HELP
*** You shouldn't compare yourself to the best others can do but to the best you can do ***
Per internet explorer :hover funziona solo sui tag <a>, non c'è scampo
Se un utente ha internet explorer e javascript disabilitato non c'è modo di far funzionare un cambio di colore ad un oggetto che non sia un tag <a>
Per questo motivo non uso mai hover su tag diversi da <a> e quando voglio ottenere l'effetto "cella" dichiaro (se possibile) il tag <a> con l'attributo "display: block"
Ringraziamo chi fa i browser non rispettando gli standard
puoi mica farmi un esempio?
Ho una cella width=100 height=40 e un'immagine width=100 height=20 valign=top che mi sta in alto a questa cella.
MI piacerebbe che al passaggio del mouse sopra la cella il background di questa cella cambiasse colore... però senza usare il JS che molto piu' spesso risulta disabilitato nei pc della gente...
puoi farmi un esempio con il display block di cui parli?
grazie
*** You shouldn't compare yourself to the best others can do but to the best you can do ***
Faccio un esempio semplice che puoi provare immediatamente e da cui dovresti capire tutto
Cosa fa quindi display:blockCodice PHP:<html>
<head>
<style>
.cella
{
width: 100px;
height: 40px;
}
.cella a
{
text-decoration: none;
display: block;
background-color: #fff;
}
.cella a:hover
{
background-color: #999;
}
</style>
<title></title>
</head>
<body>
<table>
<tr>
<td class="cella">
[url="www.xxx.php"]Link[/url]
</td>
</tr>
</table>
</body>
</html>
Trasforma il tag <a> in "blocklevel" invece di un "inline". In pratica ora occupa tutto lo spazio della cella e quindi il suo cambio di colore del background sembra essere quello di tutta la cella
1) Ci sono però due difetti: essendo ora il tag <a> un tag di tipo "block level", non può avere cose "a fianco"
2) Su IE cambia si colore tutta la cella, ma solo se passi con il mouse sulla scritta (o sull'immagine) mentre su mozilla (e tutti i browser che funzionano come dovrebbero) il link funziona sull'intera cella
Per questo non è SEMPRE una soluzione applicabile: il problema 1) può essere "risolto" con un buon uso dei float/margin/padding, mentre il problema 2) non si risolve se non con javascript, ma non è un problema significativo a mio avviso, tanto la gente quando clicca un link lo fa sempre sulla scritta o su una immagine, raramente si clicca su uno spazio vuoto
Faccio notare però che questo uso della tabella è semanticamente scorretto....
Se si vuole applicare un link a un'immagine, è meglio impostare l'immagine stessa come background del tag <a>.
Per ottenere l'effetto rollover su bordi e background:
CSS (valori ipotetici)
HTMLcodice:a#box { display:block; width:100px; /* larghezza effettiva del tuo box */ heigth:50px; /* altezza effettiva del tuo box */ padding:0; text-decoration:none; } a#box:link, a#box:visited { background: url(img.jpg) no-repeat top left; border:1px solid gray; } a#box:hover { background: url(img_rollover.jpg) no-repeat top left; border:1px solid red; }
codice:&nbsp;
«Prendo rifugio nel grande BOH»
Devo essere sincero... mi sembra più brutto creare un link vuoto (con ) che con una immagine
Se vogliamo fare i precisi allora va usata una tecnica di "image replacement" altrimenti è meglio l'immagine che lo spazio vuoto
Cosa significa "brutto"?Originariamente inviato da Leilond
Devo essere sincero... mi sembra più brutto creare un link vuoto (con &nbspche con una immagine
Lo spazio vuoto serve solo a "riempire" il collegamento e ad assicurarne la funzionalità (e compatibilità), mentre il css gestisce tutto il resto, bordi, sfondi, ecc...... il codice è estremamente più pulito e semanticamente (imho) non fa una grinza.
(PS: ovviamente un link fatto in questo modo dovrà contenere testo alternativo...)
«Prendo rifugio nel grande BOH»
Permessi di invio
Rispondi quotando